Home » Jquery » jquery – How can I make a button trigger a Javascript popup (Divi + ActiveCampaign)

jquery – How can I make a button trigger a Javascript popup (Divi + ActiveCampaign)

Posted by: admin February 22, 2020 Leave a comment

Questions:

I just got off support with ActiveCampaign and they said they couldn’t provide me with code examples on how to add their modal pop-up forms to be triggered by wordpress buttons.

I found a few resources online but they are all slightly different than the functionality I’m looking for.

I already added the ActiveCampaign plugin to my wordpress site and there are two options of embedding the form within the site.

  1. shortcode “[activeCampaign formId=1]” or

  2. <script src="https://exampledomain.com/f/embed.php?id=1" type="text/javascript" charset="utf-8"></script>

I’m currently using the divi theme, and the buttons have sections for CSS ID’s and CSS Classes.

so to summarize, I would like to be able to click a button and have the activecampaign modal form popup.

If you could show me how I can add code to the button and my site to trigger the modal popup that’d be amazing.

Let me know if you have any other information.

Thanks!

How to&Answer:

Sugesstion:

This involves DOM manipulation. create a css class called active which should be set to the form container to show. Here’s an example:

var formToggle = document.getElementById("form-toggler");

var formContainer = document.querySelector(".form-container");

formToggle.addEventListener('click', function(){
  // When you click the button, first check if the form is open
  //  so that you know if you should close or open
  if(formContainer.classList.contains("active")){
    // Form is currently open, because it has active as one of it's classes
    // so remove active to hide it.
    formContainer.classList.remove("active");
  }else{
    // Form is currently closed, because it does not have active as one of it's classes
    // so add active to show it.
    formContainer.classList.add("active");
  }
});
.form-container{
  width: 100%;
  height: 100%;
  min-height: 200px;
  background-color: rgba(0,0,0,0.2);
  display: none;
}

/* When form has active class, set display to block */
.form-container.active{
  display: block !important;
}
<div class="form-container">
    <!-- your Form Here -->
    <h1>Yey, form is active!!</h1>
</div>

<button id="form-toggler">OpenForm<button>

This is just at the basic level of approaching your scenario. So you’ve got to work on your css to make your Modal cover the entire window and add a close button on it in case someone decides to close it.