Popups and asynchronous loading of contact forms

Loading contact forms dynamically can introduce some problems. The main reason is that all JavaScript is already loaded by the time the contact form actually appears on the page (in a popup, tabs, …).

Loading a form this way will render the HTML code, but will often not register the necessary JavaScript events. Some plugins, like “Popup Maker” do a pretty good job at fixing this out of the box. But in some cases you might want to do it yourself or try to get it working with another third party plugin or theme.

Create a popup with Popup Maker

Click here to open the popup
  1. Install Popup Maker
  2. Create your contact form
  3. Go to the WP Admin Panel > Popup Maker > Add Popup
  4. Choose a name and a title, and add your Contact Form 7 shortcode in the content area
  5. Under Triggers click Add Trigger and choose Click Trigger
  6. Publish the Popup, go to Popup Maker> All Popups and take note of the ID.
  7. Create a new page and add this shortcode: [popup_trigger id="{ID}" tag="a"]Click here to open the popup[/popup_trigger] (replace {ID} with your popup ID)

Doing it yourself