{"id":35741,"date":"2022-03-23T15:00:13","date_gmt":"2022-03-23T14:00:13","guid":{"rendered":"https:\/\/qodeinteractive.com\/magazine\/?p=35741"},"modified":"2022-03-22T00:15:20","modified_gmt":"2022-03-21T23:15:20","slug":"how-to-add-contact-form-popup-in-wordpress","status":"publish","type":"post","link":"https:\/\/qodeinteractive.com\/magazine\/how-to-add-contact-form-popup-in-wordpress\/","title":{"rendered":"How to Add a Contact Form Popup in WordPress"},"content":{"rendered":"<div class=\"wpb-content-wrapper\"><p>[vc_row][vc_column][vc_column_text]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, <strong>implementing a popup that minimizes intrusiveness<\/strong> 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 <strong>all of these issues can be solved with a suitable WordPress popup plugin<\/strong>. While we have covered the <a href=\"https:\/\/qodeinteractive.com\/magazine\/best-popup-plugins-for-wordpress\/\">best premium popup plugins<\/a> 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.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Since this article focuses on <strong>adding a contact form popup using plugins<\/strong>, 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.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Here\u2019s what we\u2019ll be talking about:<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;22px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#creating-wordpress-contact-form\">Creating a WordPress Contact Form<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#adding-wordpress-contact-form-popup\">Adding a WordPress Contact Form Popup<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#exploring-the-options-of-the-popup-maker-plugin\">Exploring the Options of the Popup Maker plugin<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#additional-tips\">Additional Tips<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;80px&#8221;][vc_widget_sidebar sidebar_id=&#8221;new-top-picks-banner&#8221;][vc_empty_space height=&#8221;80px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"creating-wordpress-contact-form\"><\/a>Creating a WordPress Contact Form<\/h2>\n<p>[\/vc_column_text][vc_column_text]The <a href=\"https:\/\/wordpress.org\/plugins\/contact-form-7\/\" target=\"_blank\" rel=\"noopener\">Contact Form 7<\/a> plugin is <strong>a well-known free contact form plugin<\/strong> 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.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]After <strong>navigating to the Contact &gt; Add New section<\/strong>, you will see the content for a demo contact form placed within the first tab called <strong>Form<\/strong>.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"533\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/CF7-Add-New.jpg\" class=\"attachment-full size-full\" alt=\"CF7 Add New\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/CF7-Add-New.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/CF7-Add-New-300x165.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/CF7-Add-New-768x422.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/CF7-Add-New-620x341.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]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 <strong>Mail<\/strong> 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 <a href=\"https:\/\/contactform7.com\/setting-up-mail\/\" target=\"_blank\" rel=\"noopener\">Contact Form 7\u2019s corresponding documentation page<\/a> for more info.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"700\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/CF7-Mail-Tab.jpg\" class=\"attachment-full size-full\" alt=\"CF7 Mail Tab\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/CF7-Mail-Tab.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/CF7-Mail-Tab-300x217.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/CF7-Mail-Tab-768x555.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/CF7-Mail-Tab-620x448.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]In the <strong>Messages<\/strong> 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.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"700\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/CF7-Messages-Tab.jpg\" class=\"attachment-full size-full\" alt=\"CF7 Messages Tab\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/CF7-Messages-Tab.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/CF7-Messages-Tab-300x217.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/CF7-Messages-Tab-768x555.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/CF7-Messages-Tab-620x448.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Finally, the Contact Form 7 plugin offers the<strong> Additional Settings<\/strong> tab, where you can add your customization code. Even though we haven\u2019t used this section in the article, we advise consulting the plugin\u2019s <a href=\"https:\/\/contactform7.com\/additional-settings\/\" target=\"_blank\" rel=\"noopener\">documentation<\/a> for more info on what you can add.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/CF7-Additional-Settings.jpg\" class=\"attachment-full size-full\" alt=\"CF7 Additional Settings\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/CF7-Additional-Settings.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/CF7-Additional-Settings-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/CF7-Additional-Settings-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/CF7-Additional-Settings-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Additionally, you will notice the <strong>Popup Settings<\/strong> 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.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"558\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Popup-Settings.jpg\" class=\"attachment-full size-full\" alt=\"Popup Settings\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Popup-Settings.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Popup-Settings-300x173.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Popup-Settings-768x442.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Popup-Settings-620x357.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]While we haven\u2019t 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.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]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.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"594\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/CF7-Form-Tel.jpg\" class=\"attachment-full size-full\" alt=\"CF7 Form Tel\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/CF7-Form-Tel.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/CF7-Form-Tel-300x184.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/CF7-Form-Tel-768x471.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/CF7-Form-Tel-620x380.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]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, <strong>click the \u201cInsert Tag\u201d button<\/strong> to add the new tag to your contact form.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"579\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/CF7-Insert-Tag.jpg\" class=\"attachment-full size-full\" alt=\"CF7 Insert Tag\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/CF7-Insert-Tag.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/CF7-Insert-Tag-300x179.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/CF7-Insert-Tag-768x459.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/CF7-Insert-Tag-620x370.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]The newly created tag will be added to the form, in the position you previously placed your text cursor.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/CF7-Tel-Insert.jpg\" class=\"attachment-full size-full\" alt=\"CF7 Tel Insert\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/CF7-Tel-Insert.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/CF7-Tel-Insert-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/CF7-Tel-Insert-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/CF7-Tel-Insert-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]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.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]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 &lt;div&gt; tag with a custom CSS class that was wrapped around the newly added field is shown below.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/CF7-Div-Tel.jpg\" class=\"attachment-full size-full\" alt=\"CF7 Div Tel\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/CF7-Div-Tel.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/CF7-Div-Tel-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/CF7-Div-Tel-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/CF7-Div-Tel-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]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\u2019t forget to <strong>click the \u201cSave\u201d button at the bottom to save your editing progress<\/strong>. As for the remaining tabs, we don\u2019t have any additional suggestions apart from what was mentioned in the documentation links provided. For this reason, we will not discuss them any further.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]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.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"453\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/CF7-Newsletter.jpg\" class=\"attachment-full size-full\" alt=\"CF7 Newsletter\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/CF7-Newsletter.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/CF7-Newsletter-300x140.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/CF7-Newsletter-768x359.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/CF7-Newsletter-620x290.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]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 \u2013 the Popup Maker plugin.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"adding-wordpress-contact-form-popup\"><\/a>Adding a WordPress Contact Form Popup<\/h2>\n<p>[\/vc_column_text][vc_column_text]The <a href=\"https:\/\/wordpress.org\/plugins\/popup-maker\/\" target=\"_blank\" rel=\"noopener\">Popup Maker<\/a> plugin is one of the best WordPress popup plugins: it <strong>can be used to create any kind of popup<\/strong>, 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 \u2013 automatic open, button click, or form submission \u2013 while others are part of premium extensions. It also integrates with all of the <a href=\"https:\/\/qodeinteractive.com\/magazine\/best-wordpress-form-plugins\/\">popular contact form plugins<\/a>, while also providing a unique subscription form.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]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 &gt; Help &amp; Support section.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"622\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Popup-Maker-Support.jpg\" class=\"attachment-full size-full\" alt=\"Popup Maker Support\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Popup-Maker-Support.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Popup-Maker-Support-300x193.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Popup-Maker-Support-768x493.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Popup-Maker-Support-620x398.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]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.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]The first thing you should do is <strong>navigate to the Popup Maker &gt; Create Popup section<\/strong>, after which you will see a screen similar to the one shown below.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"606\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Popup-Creation.jpg\" class=\"attachment-full size-full\" alt=\"Popup Creation\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Popup-Creation.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Popup-Creation-300x188.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Popup-Creation-768x480.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Popup-Creation-620x388.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]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.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"531\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Gutenberg-View.jpg\" class=\"attachment-full size-full\" alt=\"Gutenberg View\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Gutenberg-View.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Gutenberg-View-300x164.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Gutenberg-View-768x421.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Gutenberg-View-620x340.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]To create the popup, you have to<strong> add a popup name and insert the content into the editor.<\/strong> 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.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Popup-Name.jpg\" class=\"attachment-full size-full\" alt=\"Popup Name\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Popup-Name.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Popup-Name-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Popup-Name-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Popup-Name-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]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 <a href=\"#additional-tips\">Additional tips section<\/a> of this article.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]That said, the hardest part of creating a popup using this plugin doesn\u2019t 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.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]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. <strong>The Popup Settings contain five tabs: Triggers, Targeting, Display, Close and Advanced.<\/strong> Some of these have options that are broken up into tabs as well, which we will see below.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"700\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Popup-Creation-Settings.jpg\" class=\"attachment-full size-full\" alt=\"Popup Creation Settings\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Popup-Creation-Settings.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Popup-Creation-Settings-300x217.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Popup-Creation-Settings-768x555.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Popup-Creation-Settings-620x448.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]In the first tab, after <strong>clicking the \u201cAdd New Trigger\u201d button<\/strong>, you will see a popup window in which you can <strong>specify the options of the trigger you want to add<\/strong> 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.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]In case you didn\u2019t 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, <strong>click the \u201cAdd\u201d button<\/strong> to proceed further.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"700\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Add-New-Trigger.jpg\" class=\"attachment-full size-full\" alt=\"Add New Trigger\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Add-New-Trigger.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Add-New-Trigger-300x217.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Add-New-Trigger-768x555.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Add-New-Trigger-620x448.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]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 \u2013 <strong>General<\/strong> and <strong>Advanced<\/strong> \u2013 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 <strong>click the \u201cAdd\u201d button.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/General-Trigger-Settings.jpg\" class=\"attachment-full size-full\" alt=\"General Trigger Settings\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/General-Trigger-Settings.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/General-Trigger-Settings-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/General-Trigger-Settings-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/General-Trigger-Settings-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;60px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Advanced-Trigger-Settings.jpg\" class=\"attachment-full size-full\" alt=\"Advanced Trigger Settings\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Advanced-Trigger-Settings.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Advanced-Trigger-Settings-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Advanced-Trigger-Settings-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Advanced-Trigger-Settings-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Following that, let us proceed to the <strong>Targeting<\/strong> 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 <strong>clicking on the \u201cChoose a condition\u201d dropdown<\/strong>, as well as <strong>choosing whether to do the same on small screens<\/strong>.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Popup-Triggering-Choose-a-Condition.jpg\" class=\"attachment-full size-full\" alt=\"Popup Triggering Choose a Condition\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Popup-Triggering-Choose-a-Condition.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Popup-Triggering-Choose-a-Condition-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Popup-Triggering-Choose-a-Condition-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Popup-Triggering-Choose-a-Condition-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]After adding a condition, you will see additional options for adding new conditions in the form of \u201c+OR\u201d and \u201c+AND\u201d links. Finally, any condition can be turned into its exact opposite by ticking the exclamation mark next to the selected condition.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"441\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Popup-Creation-Triggering.jpg\" class=\"attachment-full size-full\" alt=\"Popup Creation Triggering\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Popup-Creation-Triggering.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Popup-Creation-Triggering-300x137.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Popup-Creation-Triggering-768x350.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Popup-Creation-Triggering-620x282.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]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 <strong>Display Presets<\/strong> 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.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"458\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Display-Prestets.jpg\" class=\"attachment-full size-full\" alt=\"Display Prestets\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Display-Prestets.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Display-Prestets-300x142.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Display-Prestets-768x363.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Display-Prestets-620x293.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]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.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]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 \u201cPopup Theme\u201d dropdown option. Furthermore, you will also see a \u201cCustomize This Theme\u201d link, allowing you to get straight into the styling options behind the chosen popup theme. However, at this point, we don\u2019t 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.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Popup-Display-Appearance.jpg\" class=\"attachment-full size-full\" alt=\"Popup Display Appearance\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Popup-Display-Appearance.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Popup-Display-Appearance-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Popup-Display-Appearance-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Popup-Display-Appearance-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]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.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Popup-Display-Size.jpg\" class=\"attachment-full size-full\" alt=\"Popup Display Size\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Popup-Display-Size.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Popup-Display-Size-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Popup-Display-Size-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Popup-Display-Size-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;60px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Popup-Display-Animation.jpg\" class=\"attachment-full size-full\" alt=\"Popup Display Animation\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Popup-Display-Animation.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Popup-Display-Animation-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Popup-Display-Animation-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Popup-Display-Animation-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;60px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Popup-Display-Sounds.jpg\" class=\"attachment-full size-full\" alt=\"Popup Display Sounds\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Popup-Display-Sounds.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Popup-Display-Sounds-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Popup-Display-Sounds-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Popup-Display-Sounds-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]We come to the set of options that are directly related to the display preset you chose previously. These include <strong>the popup location and popup offset coordinates<\/strong>, whether the position should be calculated from the trigger element, or if the popup should have a fixed positioning.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"567\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Popup-Display-Position.jpg\" class=\"attachment-full size-full\" alt=\"Popup Display Position\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Popup-Display-Position.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Popup-Display-Position-300x176.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Popup-Display-Position-768x449.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Popup-Display-Position-620x363.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]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\u2019t overlapped by other website content, including other popups.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Popup-Display-Advanced.jpg\" class=\"attachment-full size-full\" alt=\"Popup Display Advanced\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Popup-Display-Advanced.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Popup-Display-Advanced-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Popup-Display-Advanced-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Popup-Display-Advanced-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]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.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Popup-Close-Button.jpg\" class=\"attachment-full size-full\" alt=\"Popup Close Button\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Popup-Close-Button.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Popup-Close-Button-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Popup-Close-Button-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Popup-Close-Button-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]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.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Popup-Close-Form-Submission.jpg\" class=\"attachment-full size-full\" alt=\"Popup Close Form Submission\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Popup-Close-Form-Submission.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Popup-Close-Form-Submission-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Popup-Close-Form-Submission-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Popup-Close-Form-Submission-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;60px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Popup-Close-Alternate-Methods.jpg\" class=\"attachment-full size-full\" alt=\"Popup Close Alternate Methods\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Popup-Close-Alternate-Methods.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Popup-Close-Alternate-Methods-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Popup-Close-Alternate-Methods-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Popup-Close-Alternate-Methods-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Finally, in the Advanced tab, you will have the choice of disabling some of the more advanced options. These include <strong>disabling the automatic popup re-triggering after non-ajax form submissions<\/strong> and <strong>disabling several features intended for visually impaired WordPress users<\/strong>. Both these options are situational, which is why we advise <a href=\"https:\/\/docs.wppopupmaker.com\/article\/406-popup-settings-box-advanced-option-settings\" target=\"_blank\" rel=\"noopener\">reading more about it in the plugin\u2019s documentation<\/a> before using them.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Popup-Advanced.jpg\" class=\"attachment-full size-full\" alt=\"Popup Advanced\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Popup-Advanced.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Popup-Advanced-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Popup-Advanced-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Popup-Advanced-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]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.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]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.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]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\u2019s 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.[\/vc_column_text][vc_empty_space height=&#8221;72px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h3 class=\"qodef-h5\">An Example of a Contact Form Popup<\/h3>\n<p>[\/vc_column_text][vc_column_text]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 <a href=\"https:\/\/qodeinteractive.com\/magazine\/lorem-ipsum\/\">simple Lorem Ipsum text<\/a> and single Contact Form 7 form shortcode. This shortcode can be found by navigating to the <strong>Contact &gt; Contact Forms<\/strong> section and finding the appropriate shortcode from the Shortcode column.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]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.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]On the other hand, the Analytics meta box was added specifically by the Popup Maker plugin and provides <strong>a simple way of tracking the success of your popup<\/strong>. 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.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Creating-Popup-Classic-Editor.jpg\" class=\"attachment-full size-full\" alt=\"Creating Popup Classic Editor\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Creating-Popup-Classic-Editor.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Creating-Popup-Classic-Editor-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Creating-Popup-Classic-Editor-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Creating-Popup-Classic-Editor-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;60px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"558\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Creating-Popup-Classic-Editor-Settings.jpg\" class=\"attachment-full size-full\" alt=\"Creating Popup Classic Editor Settings\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Creating-Popup-Classic-Editor-Settings.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Creating-Popup-Classic-Editor-Settings-300x173.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Creating-Popup-Classic-Editor-Settings-768x442.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Creating-Popup-Classic-Editor-Settings-620x357.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;60px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"428\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Creating-Popup-Contact-Form-ID.jpg\" class=\"attachment-full size-full\" alt=\"Creating Popup Contact Form ID\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Creating-Popup-Contact-Form-ID.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Creating-Popup-Contact-Form-ID-300x133.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Creating-Popup-Contact-Form-ID-768x339.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Creating-Popup-Contact-Form-ID-620x274.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]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, <strong>we have added a \u201cTime Delay\/Auto Open\u201d type of popup <\/strong>with a slight delay, which uses a cookie in two cases \u2013 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.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Creating-Popup-Triggers.jpg\" class=\"attachment-full size-full\" alt=\"Creating Popup Triggers\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Creating-Popup-Triggers.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Creating-Popup-Triggers-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Creating-Popup-Triggers-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Creating-Popup-Triggers-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Following that, we have made sure that the <strong>popup only opens on the home page and chose the center popup preset.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Creating-Popup-Targeting.jpg\" class=\"attachment-full size-full\" alt=\"Creating Popup Targeting\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Creating-Popup-Targeting.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Creating-Popup-Targeting-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Creating-Popup-Targeting-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Creating-Popup-Targeting-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;60px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"439\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Creating-Popup-Display-Presets.jpg\" class=\"attachment-full size-full\" alt=\"Creating Popup Display Presets\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Creating-Popup-Display-Presets.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Creating-Popup-Display-Presets-300x136.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Creating-Popup-Display-Presets-768x348.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Creating-Popup-Display-Presets-620x281.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Then, <strong>we have chosen the Enterprise Blue popup theme<\/strong>. The steps of its styling will be discussed shortly after this section.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Creating-Popup-Display-Appearance.jpg\" class=\"attachment-full size-full\" alt=\"Creating Popup Display Appearance\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Creating-Popup-Display-Appearance.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Creating-Popup-Display-Appearance-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Creating-Popup-Display-Appearance-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Creating-Popup-Display-Appearance-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]For the size, <strong>we have chosen a slightly smaller size than was the default<\/strong>. As for the remaining options, we have stuck to the default value. We have <strong>added the fade animation type with 350 milliseconds of animation speed<\/strong>, chose <strong>no popup opening sounds<\/strong>, and <strong>kept the popup position directly in the center of the screen.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Creating-Popup-Display-Size.jpg\" class=\"attachment-full size-full\" alt=\"Creating Popup Display Size\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Creating-Popup-Display-Size.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Creating-Popup-Display-Size-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Creating-Popup-Display-Size-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Creating-Popup-Display-Size-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;60px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Creating-Popup-Display-Animation.jpg\" class=\"attachment-full size-full\" alt=\"Creating Popup Display Animation\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Creating-Popup-Display-Animation.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Creating-Popup-Display-Animation-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Creating-Popup-Display-Animation-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Creating-Popup-Display-Animation-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;60px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Creating-Popup-Display-Sounds.jpg\" class=\"attachment-full size-full\" alt=\"Creating Popup Display Sounds\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Creating-Popup-Display-Sounds.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Creating-Popup-Display-Sounds-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Creating-Popup-Display-Sounds-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Creating-Popup-Display-Sounds-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;60px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Creating-Popup-Display-Position.jpg\" class=\"attachment-full size-full\" alt=\"Creating Popup Display Position\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Creating-Popup-Display-Position.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Creating-Popup-Display-Position-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Creating-Popup-Display-Position-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Creating-Popup-Display-Position-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Finally, as for the remaining options, we have only <strong>used the very high z-index number<\/strong> that the plugin inserted by default to ensure that our popup is placed over other website content.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Creating-Popup-Display-Advanced.jpg\" class=\"attachment-full size-full\" alt=\"Creating Popup Display Advanced\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Creating-Popup-Display-Advanced.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Creating-Popup-Display-Advanced-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Creating-Popup-Display-Advanced-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Creating-Popup-Display-Advanced-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Then, we have used the default close option, which is the \u201cx\u201d sign in this case for the popup theme we chose. We have also <strong>set a very small delay<\/strong> for the process of closing the popup after the close button has been clicked.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Creating-Popup-Close-Button.jpg\" class=\"attachment-full size-full\" alt=\"Creating Popup Close Button\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Creating-Popup-Close-Button.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Creating-Popup-Close-Button-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Creating-Popup-Close-Button-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Creating-Popup-Close-Button-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Afterward, <strong>we made the popup close after the form has been submitted<\/strong> and <strong>set a slightly longer delay<\/strong> of half a second for that process. Additionally, we <strong>enabled the popup to be closed using the ESC and F4 keys.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Creating-Popup-Form-Submission.jpg\" class=\"attachment-full size-full\" alt=\"Creating Popup Form Submission\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Creating-Popup-Form-Submission.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Creating-Popup-Form-Submission-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Creating-Popup-Form-Submission-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Creating-Popup-Form-Submission-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;60px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Creating-Popup-Alternate-Methods.jpg\" class=\"attachment-full size-full\" alt=\"Creating Popup Alternate Methods\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Creating-Popup-Alternate-Methods.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Creating-Popup-Alternate-Methods-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Creating-Popup-Alternate-Methods-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Creating-Popup-Alternate-Methods-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Finally, we haven\u2019t used any of the two advanced options.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Creating-Popup-Advanced.jpg\" class=\"attachment-full size-full\" alt=\"Creating Popup Advanced\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Creating-Popup-Advanced.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Creating-Popup-Advanced-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Creating-Popup-Advanced-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Creating-Popup-Advanced-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]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.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"521\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Result-Popup.jpg\" class=\"attachment-full size-full\" alt=\"Result Popup\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Result-Popup.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Result-Popup-300x161.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Result-Popup-768x413.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Result-Popup-620x333.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;78px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"exploring-the-options-of-the-popup-maker-plugin\"><\/a>Exploring the Options of the Popup Maker plugin<\/h2>\n<p>[\/vc_column_text][vc_column_text]At this point, someone might think that there isn\u2019t much more to popup creation using the Popup Maker plugin. However, this is far from the truth. Firstly, <strong>the plugin offers popup theme styling options, as well as additional features and options that we have yet to cover in this article<\/strong>. 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.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<strong>The styling options are located in the Popup Maker &gt; Popup Themes section.<\/strong> There, you will see all the popup themes this plugin offers. <strong>Clicking the \u201cEdit\u201d button next to a theme will let you edit all the styling options set previously.<\/strong> And, in the case you haven\u2019t edited this section previously, a default set of styling options will be applied, specific to each of the themes.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"669\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Popup-Themes-Edit.jpg\" class=\"attachment-full size-full\" alt=\"Popup Themes Edit\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Popup-Themes-Edit.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Popup-Themes-Edit-300x207.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Popup-Themes-Edit-768x530.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Popup-Themes-Edit-620x428.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]After you click to edit any popup theme, you will see two very important plugin-specific meta boxes. These are the <strong>Theme Settings<\/strong> and <strong>Theme Preview<\/strong> <strong>meta boxes<\/strong>. As the names suggest, <strong>the Theme Settings meta box contains all the design options you can edit<\/strong>, while the<strong> Theme Preview section displays a preview of any option change directly<\/strong>, using dummy popup content. As for the options, they <strong>are organized into five separate tabs: Overlay, Container, Title, Content, and Close<\/strong>. While most of these options are self-explanatory, we will still cover them briefly. Firstly, <strong>the Overlay tab allows you to set the color and opacity of the overlay.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"621\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Overlay-Theme-Preview.jpg\" class=\"attachment-full size-full\" alt=\"Overlay Theme Preview\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Overlay-Theme-Preview.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Overlay-Theme-Preview-300x192.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Overlay-Theme-Preview-768x492.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Overlay-Theme-Preview-620x397.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Then, <strong>in the Container tab, you will be able to adjust some of the styling properties<\/strong> 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.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Popup-Themes-Container.jpg\" class=\"attachment-full size-full\" alt=\"Popup Themes Container\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Popup-Themes-Container.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Popup-Themes-Container-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Popup-Themes-Container-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Popup-Themes-Container-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;60px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Popup-Themes-Container-Background.jpg\" class=\"attachment-full size-full\" alt=\"Popup Themes Container Background\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Popup-Themes-Container-Background.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Popup-Themes-Container-Background-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Popup-Themes-Container-Background-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Popup-Themes-Container-Background-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;60px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Popup-Themes-Container-Border.jpg\" class=\"attachment-full size-full\" alt=\"Popup Themes Container Border\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Popup-Themes-Container-Border.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Popup-Themes-Container-Border-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Popup-Themes-Container-Border-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Popup-Themes-Container-Border-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;60px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"700\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Popup-Themes-Container-Drop-Shadow.jpg\" class=\"attachment-full size-full\" alt=\"Popup Themes Container Drop Shadow\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Popup-Themes-Container-Drop-Shadow.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Popup-Themes-Container-Drop-Shadow-300x217.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Popup-Themes-Container-Drop-Shadow-768x555.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Popup-Themes-Container-Drop-Shadow-620x448.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Similarly, <strong>in the Title tab, you will be able to adjust the typography settings<\/strong> 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.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]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\u2019s functionality, as well as some of its advanced features.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"700\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Popup-Themes-Title-Font.jpg\" class=\"attachment-full size-full\" alt=\"Popup Themes Title Font\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Popup-Themes-Title-Font.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Popup-Themes-Title-Font-300x217.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Popup-Themes-Title-Font-768x555.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Popup-Themes-Title-Font-620x448.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;60px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"612\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Popup-Themes-Title-Text-Shadow.jpg\" class=\"attachment-full size-full\" alt=\"Popup Themes Title Text Shadow\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Popup-Themes-Title-Text-Shadow.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Popup-Themes-Title-Text-Shadow-300x189.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Popup-Themes-Title-Text-Shadow-768x485.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Popup-Themes-Title-Text-Shadow-620x392.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Then, <strong>in the Content tab, you can choose the content text color, font weight, and style<\/strong>, apart from the previously mentioned font family option.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Popup-Themes-Content.jpg\" class=\"attachment-full size-full\" alt=\"Popup Themes Content\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Popup-Themes-Content.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Popup-Themes-Content-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Popup-Themes-Content-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Popup-Themes-Content-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Finally, <strong>in the Close tab, you will be able to style all the details of the close button<\/strong>. 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\u2019t go over them any further.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"606\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Popup-Themes-Close-General.jpg\" class=\"attachment-full size-full\" alt=\"Popup Themes Close General\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Popup-Themes-Close-General.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Popup-Themes-Close-General-300x188.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Popup-Themes-Close-General-768x480.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Popup-Themes-Close-General-620x388.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;60px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"527\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Popup-Themes-Close-Size.jpg\" class=\"attachment-full size-full\" alt=\"Popup Themes Close Size\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Popup-Themes-Close-Size.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Popup-Themes-Close-Size-300x163.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Popup-Themes-Close-Size-768x418.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Popup-Themes-Close-Size-620x337.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;60px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Popup-Themes-Close-Background.jpg\" class=\"attachment-full size-full\" alt=\"Popup Themes Close Background\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Popup-Themes-Close-Background.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Popup-Themes-Close-Background-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Popup-Themes-Close-Background-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Popup-Themes-Close-Background-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;60px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"678\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Popup-Themes-Close-Font.jpg\" class=\"attachment-full size-full\" alt=\"Popup Themes Close Font\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Popup-Themes-Close-Font.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Popup-Themes-Close-Font-300x210.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Popup-Themes-Close-Font-768x537.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Popup-Themes-Close-Font-620x434.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;60px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Popup-Themes-Close-Border.jpg\" class=\"attachment-full size-full\" alt=\"Popup Themes Close Border\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Popup-Themes-Close-Border.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Popup-Themes-Close-Border-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Popup-Themes-Close-Border-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Popup-Themes-Close-Border-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]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 \u201ccasts\u201d, as well as a shadow around the text or close icon you used. To properly understand these settings, we advise reading up on the <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/filter-function\/drop-shadow()\" target=\"_blank\" rel=\"noopener\">drop-shadow()<\/a> CSS function and <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/text-shadow\" target=\"_blank\" rel=\"noopener\">text-shadow<\/a> 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.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"700\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Popup-Themes-Close-Drop-Shadow.jpg\" class=\"attachment-full size-full\" alt=\"Popup Themes Close Drop Shadow\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Popup-Themes-Close-Drop-Shadow.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Popup-Themes-Close-Drop-Shadow-300x217.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Popup-Themes-Close-Drop-Shadow-768x555.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Popup-Themes-Close-Drop-Shadow-620x448.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;60px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"603\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Popup-Themes-Close-Text-Shadow.jpg\" class=\"attachment-full size-full\" alt=\"Popup Themes Close Text Shadow\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Popup-Themes-Close-Text-Shadow.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Popup-Themes-Close-Text-Shadow-300x187.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Popup-Themes-Close-Text-Shadow-768x478.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Popup-Themes-Close-Text-Shadow-620x386.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]This concludes our overview of the popup theme styling options. As mentioned above,<strong> these options need to be set for each popup theme separately<\/strong>. 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.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Tweaking the styling options past the default values afterward wasn\u2019t 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 <strong>Popup Maker &gt; Settings section<\/strong>. Most of these options are advanced or directly relate to the plugin\u2019s 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 &gt; Settings section.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]These options are organized into four tabs: <strong>General, Subscriptions, Privacy, and Misc<\/strong>. In the <strong>General tab, you can set a default popup theme, allow usage tracking, integrate your Google Fonts API key<\/strong> or <strong>enable the Gutenberg editor<\/strong> 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.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"576\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Popup-Maker-General-Settings.jpg\" class=\"attachment-full size-full\" alt=\"Popup Maker General Settings\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Popup-Maker-General-Settings.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Popup-Maker-General-Settings-300x178.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Popup-Maker-General-Settings-768x457.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Popup-Maker-General-Settings-620x369.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Following that, the options in <strong>the Subscriptions tab<\/strong> relate to the Popup Maker\u2019s 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.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"700\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Popup-Maker-Subscriptions.jpg\" class=\"attachment-full size-full\" alt=\"Popup Maker Subscriptions\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Popup-Maker-Subscriptions.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Popup-Maker-Subscriptions-300x217.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Popup-Maker-Subscriptions-768x555.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Popup-Maker-Subscriptions-620x448.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Next, <strong>in the Privacy tab<\/strong>, you can choose to <strong>disable the Analytics section<\/strong> found on specific popups and adjust the content of the Popup Maker\u2019s subscription form shortcode. More precisely, all these options pertain to adding a consent field to the subscription form.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Popup-Maker-Privacy-General.jpg\" class=\"attachment-full size-full\" alt=\"Popup Maker Privacy General\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Popup-Maker-Privacy-General.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Popup-Maker-Privacy-General-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Popup-Maker-Privacy-General-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Popup-Maker-Privacy-General-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;60px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"700\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Popup-Maker-Privacy-Subscription-Forms.jpg\" class=\"attachment-full size-full\" alt=\"Popup Maker Privacy Subscription Forms\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Popup-Maker-Privacy-Subscription-Forms.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Popup-Maker-Privacy-Subscription-Forms-300x217.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Popup-Maker-Privacy-Subscription-Forms-768x555.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Popup-Maker-Privacy-Subscription-Forms-620x448.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Finally, most of the advanced options are in the <strong>Misc tab<\/strong>, 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.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"700\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Popup-Maker-Misc.jpg\" class=\"attachment-full size-full\" alt=\"Popup Maker Misc\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Popup-Maker-Misc.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Popup-Maker-Misc-300x217.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Popup-Maker-Misc-768x555.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Popup-Maker-Misc-620x448.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]And, while most of the aforementioned options aren\u2019t 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\u2019t using the previously mentioned plugin, you can simply disregard this option.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]On the other hand, you shouldn\u2019t disregard the options which relate to the <strong>Popup Maker shortcode button, Popups Menu Editor<\/strong>, and the <strong>Popups Admin Bar<\/strong>. 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.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"549\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Popup-Maker-Shortcode-Button.jpg\" class=\"attachment-full size-full\" alt=\"Popup Maker Shortcode Button\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Popup-Maker-Shortcode-Button.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Popup-Maker-Shortcode-Button-300x170.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Popup-Maker-Shortcode-Button-768x435.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Popup-Maker-Shortcode-Button-620x351.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]The second relates to an additional field added to any menu item in <strong>Appearance &gt; Menus<\/strong>. This field allows you to select a popup to be triggered when that menu item is clicked.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"615\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Menus-Trigger-a-Popup.jpg\" class=\"attachment-full size-full\" alt=\"Menus Trigger a Popup\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Menus-Trigger-a-Popup.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Menus-Trigger-a-Popup-300x190.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Menus-Trigger-a-Popup-768x487.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Menus-Trigger-a-Popup-620x393.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Finally, the <strong>Popups Admin Bar<\/strong> 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 <a href=\"https:\/\/qodeinteractive.com\/magazine\/fix-wordpress-admin-bar-missing-issue\/\">admin bar isn\u2019t missing<\/a> as well as not to tick the checkbox next to the \u201cDisable Popups Admin Bar\u201d option.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Admin-Bar-Popup-Maker.jpg\" class=\"attachment-full size-full\" alt=\"Admin Bar Popup Maker\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Admin-Bar-Popup-Maker.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Admin-Bar-Popup-Maker-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Admin-Bar-Popup-Maker-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Admin-Bar-Popup-Maker-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]As for the other subtab, <strong>Assets<\/strong>, you can use it to<strong> disable the loading of Google fonts<\/strong>, 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 <a href=\"https:\/\/qodeinteractive.com\/magazine\/wordpress-css-guide\/\">acquainted with CSS code creation<\/a>.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Popup-Maker-Misc-Assets.jpg\" class=\"attachment-full size-full\" alt=\"Popup Maker Misc Assets\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Popup-Maker-Misc-Assets.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Popup-Maker-Misc-Assets-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Popup-Maker-Misc-Assets-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Popup-Maker-Misc-Assets-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]With that we conclude the overview of the <strong>Settings<\/strong> section, which is the main location for options found within this plugin. Apart from the Settings tab, you should also explore the <strong>Popup Maker &gt; Subscribers<\/strong> and <strong>Popup Maker &gt; Tools<\/strong> sections. We will only mention them briefly, as they don\u2019t 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\u2019s error log and an overview of the website\u2019s scheduled actions.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]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.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"additional-tips\"><\/a>Additional Tips<\/h2>\n<p>[\/vc_column_text][vc_column_text]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.[\/vc_column_text][vc_empty_space height=&#8221;72px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h3 class=\"qodef-h5\">Using the Popup Maker Shortcode Button<\/h3>\n<p>[\/vc_column_text][vc_column_text]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 <strong>the visibility of the Shortcode button.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]During the time of writing, the Popup Maker Shortcode button was <strong>only available while using the TinyMCE editor<\/strong>, 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.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]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, <strong>click on the Popup Maker Shortcode button<\/strong> and, then, <strong>click on the shortcode you wish to add<\/strong>. As an example, we will cover the Popup Trigger shortcode.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"474\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Popup-Maker-Popup-Trigger.jpg\" class=\"attachment-full size-full\" alt=\"Popup Maker Popup Trigger\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Popup-Maker-Popup-Trigger.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Popup-Maker-Popup-Trigger-300x147.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Popup-Maker-Popup-Trigger-768x376.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Popup-Maker-Popup-Trigger-620x303.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]After clicking on the desired shortcode, a popup window will appear. In this popup window, you will be asked to <strong>specify the values for the corresponding shortcode options<\/strong>. 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.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Then, in the second tab of the shortcode\u2019s 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 <strong>click the \u201cSave\u201d button.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Popup-Trigger-Test.jpg\" class=\"attachment-full size-full\" alt=\"Popup Trigger Test\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Popup-Trigger-Test.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Popup-Trigger-Test-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Popup-Trigger-Test-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Popup-Trigger-Test-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;60px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Popup-Trigger-Options.jpg\" class=\"attachment-full size-full\" alt=\"Popup Trigger Options\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Popup-Trigger-Options.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Popup-Trigger-Options-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Popup-Trigger-Options-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Popup-Trigger-Options-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]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 \u201cClick here\u201d, which we have previously inserted.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Popup-Maker-Visual-Editor.jpg\" class=\"attachment-full size-full\" alt=\"Popup Maker Visual Editor\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Popup-Maker-Visual-Editor.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Popup-Maker-Visual-Editor-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Popup-Maker-Visual-Editor-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Popup-Maker-Visual-Editor-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]You should also know that by <strong>clicking on this item you can edit the options once more<\/strong>, in the case you want to change any of the previously inserted values or insert new ones. To do that, simply click on the \u201cEdit\u201d option that appears after the shortcode content is clicked.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Popup-Edit-Options.jpg\" class=\"attachment-full size-full\" alt=\"Popup Edit Options\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Popup-Edit-Options.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Popup-Edit-Options-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Popup-Edit-Options-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Popup-Edit-Options-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]On the other hand, if you want to see how the shortcode looks in its \u201craw\u201d form, i.e. see the shortcode call, then, you can switch to the Text tab.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Shortcode-Popup-Text-Editing-Mode.jpg\" class=\"attachment-full size-full\" alt=\"Shortcode Popup Text Editing Mode\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Shortcode-Popup-Text-Editing-Mode.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Shortcode-Popup-Text-Editing-Mode-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Shortcode-Popup-Text-Editing-Mode-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Shortcode-Popup-Text-Editing-Mode-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Then, if you want to <strong>insert this trigger shortcode on any of your pages or posts<\/strong>, you can do so by copying the shortcode call and <strong>pasting it in a valid shortcode-rendering element<\/strong>. For example, if you are using the Gutenberg editor, you can use the Shortcode block to insert the previously copied shortcode call. Of course, <strong>the shortcode-rendering element differs on the page builder plugin you are using.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]This is why we advise consulting our article on <a href=\"https:\/\/qodeinteractive.com\/magazine\/create-shortcode-in-wordpress#using-custom-shortcodes\">using shortcodes in WordPress<\/a>, 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 <a href=\"https:\/\/qodeinteractive.com\/magazine\/add-shortcode-to-wordpress-widget\/\">adding shortcodes to WordPress sidebars<\/a>, we advise reviewing it as well.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]To illustrate that we have added the shortcode call to a page and updated it afterward.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Popup-Trigger-Shortcode.jpg\" class=\"attachment-full size-full\" alt=\"Popup Trigger Shortcode\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Popup-Trigger-Shortcode.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Popup-Trigger-Shortcode-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Popup-Trigger-Shortcode-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Popup-Trigger-Shortcode-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]The result we have gotten is shown below.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Result-Popup-Button.jpg\" class=\"attachment-full size-full\" alt=\"Result Popup Button\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Result-Popup-Button.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Result-Popup-Button-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Result-Popup-Button-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Result-Popup-Button-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]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:[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">.my-css-class {\r\n\/\/ CSS code goes here \r\n}<\/pre>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]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\u2019t go any further into it. But, we will mention that, after creating the code, you can add it to the <strong>Appearance &gt; Customize &gt; Additional CSS<\/strong> section, which is the default place for adding custom CSS code.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]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.[\/vc_column_text][vc_empty_space height=&#8221;72px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h3 class=\"qodef-h5\">Triggering a Popup Via the WordPress Navigation Menu<\/h3>\n<p>[\/vc_column_text][vc_column_text]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.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]First, navigate to the <strong>Appearance &gt; Menus<\/strong> section and <strong>choose a menu item to which you want to assign the popup<\/strong>, i.e. where a visitor should click to trigger the popup. Then, <strong>to trigger it, you can use one of the three possible options<\/strong>. We will explain all three options below.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]The first option is to use the \u201cTrigger a popup\u201d option that the Popup Maker plugin adds to each menu item. Therefore, <strong>click on the dropdown below the \u201cTrigger a popup\u201d option<\/strong> and <strong>select a popup you wish to add<\/strong>. Needless to say, you need to make sure to create a popup beforehand for this option to work properly. After selecting the popup, <strong>click the \u201cSave Menu\u201d button<\/strong> and <strong>inspect the functionality on the front end of your website<\/strong>.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"700\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Edit-Menu-Trigger-a-Popup.jpg\" class=\"attachment-full size-full\" alt=\"Edit Menu Trigger a Popup\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Edit-Menu-Trigger-a-Popup.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Edit-Menu-Trigger-a-Popup-300x217.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Edit-Menu-Trigger-a-Popup-768x555.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Edit-Menu-Trigger-a-Popup-620x448.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]The second option is to use the CSS Classes option present on all menu items. All you need to do is add the <strong>popmake-&lt;ID&gt;<\/strong> label, where the &lt;ID&gt; part should be replaced with the ID of the popup item. After adding the label, <strong>click the \u201cSave Menu\u201d button<\/strong> and <strong>inspect the result<\/strong>.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"612\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Edit-Menu-CSS-Classes.jpg\" class=\"attachment-full size-full\" alt=\"Edit Menu CSS Classes\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Edit-Menu-CSS-Classes.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Edit-Menu-CSS-Classes-300x189.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Edit-Menu-CSS-Classes-768x485.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Edit-Menu-CSS-Classes-620x392.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Of course, if you aren\u2019t 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 <strong>Popup Maker &gt; All Popups<\/strong> section, where the CSS class would be located in the CSS Class column next to the corresponding popup item.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/All-Popups-CSS-Classes.jpg\" class=\"attachment-full size-full\" alt=\"All Popups CSS Classes\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/All-Popups-CSS-Classes.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/All-Popups-CSS-Classes-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/All-Popups-CSS-Classes-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/All-Popups-CSS-Classes-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]That said, we have to mention that in the case you don\u2019t see the Trigger a Popup or CSS Classes options we mentioned in these two methods, you shouldn\u2019t worry. In that case, you only need to enable those sections from the Screen Options and proceed as mentioned above.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Screen-Options-Popup.jpg\" class=\"attachment-full size-full\" alt=\"Screen Options Popup\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Screen-Options-Popup.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Screen-Options-Popup-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Screen-Options-Popup-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Screen-Options-Popup-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;60px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Screen-Options-Popup-Menu.jpg\" class=\"attachment-full size-full\" alt=\"Screen Options Popup Menu\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Screen-Options-Popup-Menu.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Screen-Options-Popup-Menu-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Screen-Options-Popup-Menu-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Screen-Options-Popup-Menu-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]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 <strong>#popmake-&lt;ID&gt;<\/strong> link in the URL field and <strong>click the \u201cSave Menu\u201d button<\/strong>. Of course, you need to replace the &lt;ID&gt; with the corresponding ID of your popup. It can be done in the same way as described in the class method, or by <a href=\"https:\/\/qodeinteractive.com\/magazine\/find-post-page-category-comment-uder-id-wordpress\/\">finding the ID of the popup by looking at its permalink<\/a> while in the Edit screen.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"534\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Popup-Maker-Custom-Links.jpg\" class=\"attachment-full size-full\" alt=\"Popup Maker Custom Links\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Popup-Maker-Custom-Links.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Popup-Maker-Custom-Links-300x165.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Popup-Maker-Custom-Links-768x423.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Popup-Maker-Custom-Links-620x342.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]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.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"527\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Menu-Item-Popup-Final.jpg\" class=\"attachment-full size-full\" alt=\"Menu Item Popup Final\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Menu-Item-Popup-Final.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Menu-Item-Popup-Final-300x163.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Menu-Item-Popup-Final-768x418.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Menu-Item-Popup-Final-620x337.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\">Final Thoughts<\/h2>\n<p>[\/vc_column_text][vc_column_text]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.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]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.<br \/>\n[\/vc_column_text][\/vc_column][\/vc_row]<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>Improve your website&#8217;s UX by adding a contact form popup to it. We will walk you through your design options.<\/p>\n","protected":false},"author":11229,"featured_media":35891,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[232,4,13],"class_list":["post-35741","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","tag-contact-form","tag-tips","tag-wordpress"],"_links":{"self":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/35741","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/users\/11229"}],"replies":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/comments?post=35741"}],"version-history":[{"count":0,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/35741\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media\/35891"}],"wp:attachment":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media?parent=35741"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/categories?post=35741"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/tags?post=35741"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}