How to Add a Contact Form Popup in WordPress
Even though popups might seem annoying to some, there is no denying that they help with getting more customer conversions or simply getting more subscribers. Of course, implementing a popup that minimizes intrusiveness and includes practical, user-friendly forms will yield the best results. However, you also need to worry about the design of the popup, its placement on the website, and what actions trigger it, so that it is integrated with your website seamlessly. Still, even though it might seem overwhelming all of these issues can be solved with a suitable WordPress popup plugin. While we have covered the best premium popup plugins in one of our earlier articles, for this one, we have purposefully chosen a more affordable combination of plugins which make creating a contact form popup very easy.
Since this article focuses on adding a contact form popup using plugins, it is worth a read for a wide range of WordPress users, regardless of the level of their technical knowledge. More precisely, in this article, we will be using two plugins that work well in conjunction to create a contact form popup. The first will be used to create the contact form, while the second will provide the necessary functionality to integrate that contact form with the popup functionality.
Here’s what we’ll be talking about:
Qode Themes: Top Picks
View Collection
The Contact Form 7 plugin is a well-known free contact form plugin that lets you customize the contact form and mail content with simple HTML markup. It also supports reCAPTCHA, spam filtering, Ajax-powered form submission, and has detailed documentation. Furthermore, it easily integrates with the popup-making plugin which we will cover later. Let us, then, go over some key points of creating a form using the Contact Form 7 plugin.
After navigating to the Contact > Add New section, you will see the content for a demo contact form placed within the first tab called Form.
In this tab, you need to create the content for your contact form either by editing the existing form template or by inserting your code entirely. Following that, in the Mail tab, you will need to set the content of the email that will be sent to someone that submits their info in the contact form. There is also a predefined template suggesting you should add. Nevertheless, we advise consulting Contact Form 7’s corresponding documentation page for more info.
In the Messages tab, you will be able to edit the response messages that are displayed after submitting your info in the contact form. Once again, they will all be set to their predefined values, which you should adjust according to your needs.
Finally, the Contact Form 7 plugin offers the Additional Settings tab, where you can add your customization code. Even though we haven’t used this section in the article, we advise consulting the plugin’s documentation for more info on what you can add.
Additionally, you will notice the Popup Settings tab at the end. This tab is not available by default, as it was added by the Popup Maker plugin, which we will showcase in the following section. In this section, you can set whether the popup should be closed or a new one of your choosing opened after this contact form has been successfully submitted. In the case you choose to close a popup, you can set the time delay of it closing after successfully submitting the form.
While we haven’t used these options in our example, we will mention them as something that you can consider revisiting and adjusting according to your needs, after creating the popup.
That said, when creating your custom contact form, the easiest way to start is to edit the existing demo form template. For example, you can add a new template tag (e.g. telephone) by clicking on it from the list of available tags.
Having done that, you will see a popup window asking you to specify some information regarding the tag. You can specify its name, default value, and placeholder, whether it is required, and what CSS ID and class attribute you wish to add to the tag. As you fill the options, so will the preview of the tag located at the bottom of the window change. Having chosen and configured all the options, click the “Insert Tag” button to add the new tag to your contact form.
The newly created tag will be added to the form, in the position you previously placed your text cursor.
You may notice that the newly inserted tag is slightly different from the remaining tags, in that it is missing a label. Adding a label is optional and represents what is shown on the frontend above the field added using the tag code. To change this, you can simply add the opening and closing label tags around the inserted tag, in a similar manner as was done in the demo form template. There are two additional things you can also do.
As said previously, you can remove a form field by simply deleting the code that generates it. But, most importantly, you can also add additional HTML code around field tags or even wrap the whole contact form. Furthermore, while adding the HTML code, you can even specify an ID or custom CSS class that will later be used for styling. A simple example of a <div> tag with a custom CSS class that was wrapped around the newly added field is shown below.
That said, by following our tips as well as the relevant plugin documentation, we are sure you will be able to create the contact form code suited for your website. After editing the form template code, you shouldn’t forget to click the “Save” button at the bottom to save your editing progress. As for the remaining tabs, we don’t have any additional suggestions apart from what was mentioned in the documentation links provided. For this reason, we will not discuss them any further.
For this article, we will use a very simple contact form as an example. It contains only an email text field and a submit button, with a bit of additional HTML code we added.
We have highlighted the shortcode the contact form has generated. It is exactly this shortcode that will help us integrate the newly created contact form in the popup generated by the other plugin we used for this article – the Popup Maker plugin.
The Popup Maker plugin is one of the best WordPress popup plugins: it can be used to create any kind of popup, modal, slide-in, banner, or content overlay. It is a freemium plugin with a lot of ways of triggering the popup. Only three of those are free – automatic open, button click, or form submission – while others are part of premium extensions. It also integrates with all of the popular contact form plugins, while also providing a unique subscription form.
Apart from that, the plugin has very thorough documentation, which we will reference multiple times in the article. Furthermore, the key points of using this plugin have been broken down into several sections, catering towards WordPress users of varying knowledge and technical skill. To access those sections, you only need to navigate to the Popup Maker > Help & Support section.
Then, you can decide whether to examine the full documentation on your own or check the catered content first. While creating the article, we have done a little bit of both. As a result, we have created an in-depth guide for creating popups with the Popup Maker plugin that integrate a contact form shortcode made with the Contact Form 7 plugin. With that being said, let us begin.
The first thing you should do is navigate to the Popup Maker > Create Popup section, after which you will see a screen similar to the one shown below.
The reason we say similar is that the plugin uses the TinyMCE editor to create and edit the content of popups, but also has an option that allows you to use the Gutenberg editor instead. However, since the option is still experimental, we decided not to use it for this article. Thus, if you decide to use it, the editing screen will be only slightly different.
To create the popup, you have to add a popup name and insert the content into the editor. Furthermore, you can add a popup title, which will be shown on the frontend alongside the popup content. As for the content, you can add regular text, as well as shortcodes. Furthermore, you can also use the Popup Maker shortcodes, which are found by clicking the icon shown on the screenshot below.
For the main part of the article, we have decided to use only a simple text and the contact form shortcode as the content, without using the Popup Maker shortcodes additionally. However, we will still cover them later on, in the Additional tips section of this article.
That said, the hardest part of creating a popup using this plugin doesn’t lie in the content creation, but in properly setting the wide array of options this plugin provides. This is why we have decided to make an overview of the popup options first before going into the popup example we created for this article.
Firstly, the options provided by the Popup Maker plugin are placed in various locations, which is why we will cover them on multiple occasions, in various sections across this article. The first section we will start from is directly related to the popup creation process and it is called the Popup Settings. It is located below the editor screen when creating or editing a popup item. The Popup Settings contain five tabs: Triggers, Targeting, Display, Close and Advanced. Some of these have options that are broken up into tabs as well, which we will see below.
In the first tab, after clicking the “Add New Trigger” button, you will see a popup window in which you can specify the options of the trigger you want to add to your new popup. These options include what kind of trigger you want to add, whether to set a cookie to prevent a popup from showing again or after which visitor action should the popup close. Of course, all these options are specific to the type of popup you wish to display on your website.
In case you didn’t fully understand the purpose of these options, the plugin also has a link to the documentation that will reveal more about cookies. In general, the plugin has very thorough documentation, which we suggest consulting for any doubts you might have. Furthermore, the relevant documentation articles are often linked to next to key options, making the process of creating and managing popups that much easier. That said, after setting the three previously mentioned options, click the “Add” button to proceed further.
An additional popup window will be opened showing the inserted cookie (in the case you decided to add it). The additional options are provided in two tabs – General and Advanced – and include adding custom CSS selectors for elements that can be used to trigger the popup and choosing whether or not to prevent the default click functionality of those elements. To further clarify this functionality, the plugin offers an example of a download link that can be pressed to both download a file and open the corresponding popup that was attached to it. Of course, using these additional options is optional. If you choose to use them, make sure to click the “Add” button.
Following that, let us proceed to the Targeting tab, which allows you to add a rule or a set of rules regarding where the popup will be enabled or disabled. You can choose the condition for displaying the popup by clicking on the “Choose a condition” dropdown, as well as choosing whether to do the same on small screens.
After adding a condition, you will see additional options for adding new conditions in the form of “+OR” and “+AND” links. Finally, any condition can be turned into its exact opposite by ticking the exclamation mark next to the selected condition.
In the following tab, you will be able to set most of the options regarding the display of your popup. These include adjusting the popup position, which design pattern, i.e. theme it will use, as well as the popup size and the animation and the sounds that come with it. All of these options are stored in separate subtabs, starting from the Display Presets one. In it, you can choose the general position and appearance your popup will have. Having selected your display preset option, you will see the message notifying you of the choice you made.
In general, these four preset popup display types represent only the start of the popup editing process. However, you should be aware that all these options come with their own sets of settings and default values. These are related to size, animation type, popup position, whether other popups can be open at the same time, and if the popup has an overlay or not. You should be aware that the options screen for the remaining options in the Popup Settings section might differ from the ones you see, simply due to having chosen a different display preset.
That said, in the Appearance subtab, you can choose which theme your popup will use, i.e. what type of design it will have. To clarify, the plugin has quite a few design patterns which you can apply to your popups. These have their individual styling options, which will be covered separately later on in this article. You can choose the popup theme from the “Popup Theme” dropdown option. Furthermore, you will also see a “Customize This Theme” link, allowing you to get straight into the styling options behind the chosen popup theme. However, at this point, we don’t advise clicking on that link before saving any changes you previously made and publishing/updating the popup item. The reason for it is that the link will open in the same tab, which can cause you to lose some of the editing progress you previously made.
Moving on, the options in the following three subtabs are mostly self-explanatory, and concern the width of the popup, its animation, and opening sounds. We will mention only that the plugin also allows you to enter an URL to a custom sound file, in case you wish to add a custom popup opening sound.
We come to the set of options that are directly related to the display preset you chose previously. These include the popup location and popup offset coordinates, whether the position should be calculated from the trigger element, or if the popup should have a fixed positioning.
Finally, in the Advanced subtab, you will be able to adjust some of the more technical options. You can choose to disable the popup overlay, make several popups remain open, disable the responsive popup reposition or specify the popup z-index so that you can ensure it isn’t overlapped by other website content, including other popups.
Moving on, the options within the Close tab can also be broken down into three subtabs. In the first, you can override the default view of the close text/icon, which is set within the stylization options for each of the popup design themes the plugin has to offer. As said previously, we will cover them a bit later in the article. However, in the first subtab, you can also specify the delay in which the close button will appear.
As for the remaining two subtabs, they allow you to choose specific situations and options for closing the popup. More precisely, you can enable the popup to be closed after the form has been submitted, or when a user clicks on the form overlay or presses the ESC or F4 keyboard keys.
Finally, in the Advanced tab, you will have the choice of disabling some of the more advanced options. These include disabling the automatic popup re-triggering after non-ajax form submissions and disabling several features intended for visually impaired WordPress users. Both these options are situational, which is why we advise reading more about it in the plugin’s documentation before using them.
With that we conclude our overview of the Popup Settings section. But, before we jump into the review of the remaining options and features the plugin has to offer, we thought it is best to illustrate the previous points with an example.
For this article, we have created a very simple popup that integrates a previously created contact form created with the Contact Form 7 plugin. The popup will be set to open automatically on a certain page, with a cookie that prevents further opening. Of course, this is far from the full potential this plugin has, as you can create popups with an intricate set of conditions and features.
However, we thought it was better to use a simpler example, that will show you all the key steps you should take and options to consider when creating your popups. Thus, with some of our pieces of advice and as well as by consulting the plugin’s thorough documentation, you will be able to create popups that are as complex as you want them to be. Having said that, let us proceed to our example.
An Example of a Contact Form Popup
As mentioned above, the first step in creating a popup is to add its name and, optionally, the title that will be displayed. Afterward, the following step is to add the content. As the Popup Maker plugin uses the Classic editor by default, you can add your text, images, and shortcodes directly. We have opted for a simple Lorem Ipsum text and single Contact Form 7 form shortcode. This shortcode can be found by navigating to the Contact > Contact Forms section and finding the appropriate shortcode from the Shortcode column.
Then, by copying the shortcode and pasting it within the editor, we will achieve that the corresponding contact form is located below the text when the popup appears on the screen. With that being said, you may also notice two additional sections. In the Publish section, you can publish the popup and make sure it is enabled, among other things. Of course, this is a default WordPress meta box, in which the option to enable the popup was added.
On the other hand, the Analytics meta box was added specifically by the Popup Maker plugin and provides a simple way of tracking the success of your popup. It shows the number of times it was opened, the number of conversions, and the conversion rate. It also allows you to reset the count while providing the stats regarding the last reset. Of course, we encourage you to thoroughly test any popup you are creating and to use the reset option once you are ready to display the popup publicly.
Having explained how our content was created as well as the key sections you should use, let us quickly go over the options we used. Firstly, we have added a “Time Delay/Auto Open” type of popup with a slight delay, which uses a cookie in two cases – on popup close and after submitting the form, to prevent the form from re-opening. The cookie duration was set to one month, which is the default duration.
Following that, we have made sure that the popup only opens on the home page and chose the center popup preset.
Then, we have chosen the Enterprise Blue popup theme. The steps of its styling will be discussed shortly after this section.
For the size, we have chosen a slightly smaller size than was the default. As for the remaining options, we have stuck to the default value. We have added the fade animation type with 350 milliseconds of animation speed, chose no popup opening sounds, and kept the popup position directly in the center of the screen.
Finally, as for the remaining options, we have only used the very high z-index number that the plugin inserted by default to ensure that our popup is placed over other website content.
Then, we have used the default close option, which is the “x” sign in this case for the popup theme we chose. We have also set a very small delay for the process of closing the popup after the close button has been clicked.
Afterward, we made the popup close after the form has been submitted and set a slightly longer delay of half a second for that process. Additionally, we enabled the popup to be closed using the ESC and F4 keys.
Finally, we haven’t used any of the two advanced options.
With all these options set, we have made sure to publish the popup and then review it on the front end. The result we have gotten is shown in the following screenshot.
At this point, someone might think that there isn’t much more to popup creation using the Popup Maker plugin. However, this is far from the truth. Firstly, the plugin offers popup theme styling options, as well as additional features and options that we have yet to cover in this article. As there are quite a few of these, we will try a more structured approach by reviewing a set of related options or features one at a time. We will go over the styling options first.
The styling options are located in the Popup Maker > Popup Themes section. There, you will see all the popup themes this plugin offers. Clicking the “Edit” button next to a theme will let you edit all the styling options set previously. And, in the case you haven’t edited this section previously, a default set of styling options will be applied, specific to each of the themes.
After you click to edit any popup theme, you will see two very important plugin-specific meta boxes. These are the Theme Settings and Theme Preview meta boxes. As the names suggest, the Theme Settings meta box contains all the design options you can edit, while the Theme Preview section displays a preview of any option change directly, using dummy popup content. As for the options, they are organized into five separate tabs: Overlay, Container, Title, Content, and Close. While most of these options are self-explanatory, we will still cover them briefly. Firstly, the Overlay tab allows you to set the color and opacity of the overlay.
Then, in the Container tab, you will be able to adjust some of the styling properties tied to the HTML element that contains the popup content. These properties include the padding in the container, the border radius of the container, the color and opacity of its background, its border properties, and the properties for the drop shadow that surrounds it.
Similarly, in the Title tab, you will be able to adjust the typography settings that relate to its title and the shadow around it. These include the title color, font size, line height, font weight, style and alignment, and the choice of the font family. While for the text shadow, you can adjust its color, opacity, horizontal and vertical positions, and blur radius.
Having said that, you can choose to use either the fonts that are loaded by your theme or ones loaded by the plugin. This is true for all font family options. To further optimize the assets that get loaded, you can choose to disable the fonts that come with the plugin and use only the ones that are part of your theme. Of course, we will mention this option later, when we come to the set of options that directly relate to the plugin’s functionality, as well as some of its advanced features.
Then, in the Content tab, you can choose the content text color, font weight, and style, apart from the previously mentioned font family option.
Finally, in the Close tab, you will be able to style all the details of the close button. Whether you choose to use a text or an icon for the close element, you will be able to properly style it using these options. As most of the options are self-explanatory, we won’t go over them any further.
We will only touch upon the fewer known properties that are part of the Drop Shadow and Text Shadow subtabs. These allow you to specify the properties of a shadow the close element “casts”, as well as a shadow around the text or close icon you used. To properly understand these settings, we advise reading up on the drop-shadow() CSS function and text-shadow CSS property for more info regarding the parameters you can change. Of course, changing the settings values and using the Theme Preview section to preview the changes can also be quite helpful.
This concludes our overview of the popup theme styling options. As mentioned above, these options need to be set for each popup theme separately. Of course, each of them comes with a unique set of default option values, which can be a good starting point for the design of your popup(s). This is why creating a popup using the popup editor and the Popup Settings section was how we began this article.
Tweaking the styling options past the default values afterward wasn’t a problem for us as it only required slight changes. Of course, opting for the opposite approach is also viable, especially now that you understand the basics of popup creation and stylization. However, we still have to bring your attention to the set options in the Popup Maker > Settings section. Most of these options are advanced or directly relate to the plugin’s subscription form shortcode, which is one of the four shortcodes the plugin offers. That said, let us go over the options found within the Popup Maker > Settings section.
These options are organized into four tabs: General, Subscriptions, Privacy, and Misc. In the General tab, you can set a default popup theme, allow usage tracking, integrate your Google Fonts API key or enable the Gutenberg editor and use it to create popups. As mentioned previously, while creating this article, we have decided not to use this feature as it is still experimental, with not all of the plugin functionalities being fully supported at the time of writing the article. But, we will touch more on this topic later.
Following that, the options in the Subscriptions tab relate to the Popup Maker’s subscription shortcode, as well as for any third party newsletter plugin that integrates with the Popup Maker plugin. You can choose your default newsletter provider and adjust the response messages that are sent to your users in various situations.
Next, in the Privacy tab, you can choose to disable the Analytics section found on specific popups and adjust the content of the Popup Maker’s subscription form shortcode. More precisely, all these options pertain to adding a consent field to the subscription form.
Finally, most of the advanced options are in the Misc tab, which has two subtabs. Some notable options within the first subtab include trying to bypass ad blockers that would otherwise prevent the popup, adjusting the right padding to prevent popups jumping when opened, enabling browser console-related debugging tools, the possibility to disable plugin asset caching, disabling random tips and completely removing the plugin data on plugin deactivation.
And, while most of the aforementioned options aren’t hard to grasp, some require additional explanation. Firstly, the plugin called Easy Modal preceded the Popup Maker plugin, which led to the compatibility mode option. Therefore, if you weren’t using the previously mentioned plugin, you can simply disregard this option.
On the other hand, you shouldn’t disregard the options which relate to the Popup Maker shortcode button, Popups Menu Editor, and the Popups Admin Bar. The first relates to the button that enables you to insert one of the four popup-related shortcodes available with this plugin. It is available when trying to create a new popup and edit an existing one, as we have previously mentioned.
The second relates to an additional field added to any menu item in Appearance > Menus. This field allows you to select a popup to be triggered when that menu item is clicked.
Finally, the Popups Admin Bar pertains to the Popup Maker section found in the admin bar on the front end, which is great for previewing and testing the popup functionality. Of course, to be able to use it, you need to make sure that both your admin bar isn’t missing as well as not to tick the checkbox next to the “Disable Popups Admin Bar” option.
As for the other subtab, Assets, you can use it to disable the loading of Google fonts, if you only want to use font families that are already loaded by your theme. Additionally, you can disable the loading of plugin-specific styles and popup theme styles, if you want to style your popups solely using the CSS code you create. Of course, this is reserved for intermediate and advanced WordPress users only, as it requires you to be acquainted with CSS code creation.
With that we conclude the overview of the Settings section, which is the main location for options found within this plugin. Apart from the Settings tab, you should also explore the Popup Maker > Subscribers and Popup Maker > Tools sections. We will only mention them briefly, as they don’t directly pertain to the main topic of this article. The former offers a way of tracking your subscribers, while the latter offers some handy features, most notably the plugin’s error log and an overview of the website’s scheduled actions.
Finally, the plugin offers some additional functionalities that further extend the popup creation and display. While we have foreshadowed them several times already, they require a detailed explanation to be used properly. For that reason, we have purposefully decided to group them in a single section and elaborate on them at the end of the article. Let us proceed.
In this section, we will discuss how you can use the Popup Maker shortcodes, as well as trigger popups using navigation menu items. Some of the shortcodes, like the subscription form, can help in creating the popup, while others can help you control the popup display in a more meaningful way, which is also true for the menu item feature. Unfortunately, both features need to be elaborated on, which we will do below. Let us proceed.
Using the Popup Maker Shortcode Button
As said previously, when creating a popup with the Popup Maker plugin, you can use the Popup Maker Shortcode button to add plugin-specific shortcodes to the popup. Furthermore, these shortcodes can be added to one of your pages or posts, which we will be discussing in this section. But, before we proceed, we must note something important regarding the visibility of the Shortcode button.
During the time of writing, the Popup Maker Shortcode button was only available while using the TinyMCE editor, which is the default editor for creating and editing popups. Therefore, if you opted to enable the option that allows you to edit popups using the Gutenberg editor, you will be lacking the Shortcode button option. While we are sure that this option will be available in the future, we have to mention that it is the only feature we found lacking currently.
To add one of the shortcodes available with the Popup Maker plugin, you would need to either edit an existing popup item or go into the screen for creating new ones. We will opt for the latter. Therefore, to add any of the four Popup Maker shortcodes, click on the Popup Maker Shortcode button and, then, click on the shortcode you wish to add. As an example, we will cover the Popup Trigger shortcode.
After clicking on the desired shortcode, a popup window will appear. In this popup window, you will be asked to specify the values for the corresponding shortcode options. For the Trigger shortcode, you need to select which popup it will trigger and the content it will have. You can use other shortcodes, images, text, or even, HTML content. We have opted for text only, as an example.
Then, in the second tab of the shortcode’s popup window, we have specified the HTML tag that will wrap our text and added a custom CSS class to that element that could be used to stylize it later on. Additionally, you can specify whether or not you want to prevent the default action click functionality. We have opted not to use this option while showcasing the shortcode. After filling out the options, you should click the “Save” button.
The shortcode content will be generated shortly. Its display will be shown in the Visual tab. In our case, it is a simple textual element stating “Click here”, which we have previously inserted.
You should also know that by clicking on this item you can edit the options once more, in the case you want to change any of the previously inserted values or insert new ones. To do that, simply click on the “Edit” option that appears after the shortcode content is clicked.
On the other hand, if you want to see how the shortcode looks in its “raw” form, i.e. see the shortcode call, then, you can switch to the Text tab.
Then, if you want to insert this trigger shortcode on any of your pages or posts, you can do so by copying the shortcode call and pasting it in a valid shortcode-rendering element. For example, if you are using the Gutenberg editor, you can use the Shortcode block to insert the previously copied shortcode call. Of course, the shortcode-rendering element differs on the page builder plugin you are using.
This is why we advise consulting our article on using shortcodes in WordPress, where we go into more detail about this topic. Furthermore, as shortcodes can be placed in WordPress widget areas, they can appear in all parts of your website. Of course, the shortcode call needs to be placed in a corresponding WordPress shortcode-rendering widget to display properly. As we have already covered this in our article on adding shortcodes to WordPress sidebars, we advise reviewing it as well.
To illustrate that we have added the shortcode call to a page and updated it afterward.
The result we have gotten is shown below.
As you can see, it is a simple label, which, when clicked on, opens the popup. To further style it, we could write a bit of CSS code that targets the custom CSS class we added. As we have added the custom class called my-css-class, the corresponding pseudo-code would look like this:
.my-css-class {
// CSS code goes here
}
Of course, such CSS code has to be created on a case-by-case basis, to fit the existing styling of your website, which is why we won’t go any further into it. But, we will mention that, after creating the code, you can add it to the Appearance > Customize > Additional CSS section, which is the default place for adding custom CSS code.
As a final tip regarding the Popup Maker Shortcode button, we can suggest a possible workaround solution that enables you to use plugin-specific shortcodes, while using the Gutenberg editor as the main popup editor. Of course, it is to simply create the corresponding shortcode call in a manner described above in a separate tab, while keeping the corresponding block editor-related option off. Then, after enabling the Gutenberg plugin option, you can paste the shortcode call inside the Shortcode block placed within your popup.
Triggering a Popup Via the WordPress Navigation Menu
As mentioned previously, one of the ways that a Popup Maker popup can be triggered is by clicking on a navigation menu item. Let us explain how to set this feature properly.
First, navigate to the Appearance > Menus section and choose a menu item to which you want to assign the popup, i.e. where a visitor should click to trigger the popup. Then, to trigger it, you can use one of the three possible options. We will explain all three options below.
The first option is to use the “Trigger a popup” option that the Popup Maker plugin adds to each menu item. Therefore, click on the dropdown below the “Trigger a popup” option and select a popup you wish to add. Needless to say, you need to make sure to create a popup beforehand for this option to work properly. After selecting the popup, click the “Save Menu” button and inspect the functionality on the front end of your website.
The second option is to use the CSS Classes option present on all menu items. All you need to do is add the popmake-<ID> label, where the <ID> part should be replaced with the ID of the popup item. After adding the label, click the “Save Menu” button and inspect the result.
Of course, if you aren’t certain of the ID of your popup, there is a solution. The easiest way to figure out the ID, and even the whole CSS class is to navigate to Popup Maker > All Popups section, where the CSS class would be located in the CSS Class column next to the corresponding popup item.
That said, we have to mention that in the case you don’t see the Trigger a Popup or CSS Classes options we mentioned in these two methods, you shouldn’t worry. In that case, you only need to enable those sections from the Screen Options and proceed as mentioned above.
Having said that, let us proceed to the final method of adding a popup trigger via a menu item. While the previous two methods can be added to menu items of any kind, the last is reserved for menu items that are added as custom links only, as it relies on the URL option that custom link menu items have. More precisely, in this case, you need to add the #popmake-<ID> link in the URL field and click the “Save Menu” button. Of course, you need to replace the <ID> with the corresponding ID of your popup. It can be done in the same way as described in the class method, or by finding the ID of the popup by looking at its permalink while in the Edit screen.
Similar to all other methods, you should inspect the result on the front end of your website after adding the custom link. Of course, you should expect the same result regardless of which of the three methods you choose. The result we got is shown in the screenshot below. With it, we conclude this article.
Final Thoughts
In this article, we have covered all the details of creating a contact form popup. We have purposefully broken it into the following steps: creating a contact form, creating a popup that integrates the contact form, adjusting the popup options, and adjusting the styling of the popup, once created. We have made sure to thoroughly explain each of these steps, as well as add some tips and tricks that can help you use all the functionality provided by the Popup Maker plugin that we covered.
Therefore, you should have no issue creating any type of contact form popup, regardless of how intricate it may be. Finally, since contact form popups, as well as popups in general, are essential in growing a successful WordPress website, we strongly suggest bookmarking this article for this time you might need to use it.
