Years after the fact and this video is still extremely helpful to many. I can not tell you how frustrating it has been to come across instructions that only apply to the simplest of cases and not the obvious one - applying pop-up forms to buttons. The clear explanations finally helped this to click with me. Greatly appreciated!
You have a pleasant voice, I was looking for a similar tutorial on pop builder button trigger I see yours is maker but watched to the end coz of your voice, kinda similar to a celebrity's voice in movies but can't recall which one. You should think of auditioning animation voice-over, commentary, or radio
Hi there, thanks for this great video. I have created my first popup and face two problems. 1. the popup is also shown on the newsletter subscription page. This is unnecessary since the subscriber is already on the signup page. How to turn this off for this page only? 2. how can I prevent showing this sign up popup to people that have already subscribed and are in our Mailchimp database? Thanks in advance for you reply.
1) Use your targeting settings. In “choose a condition,” select “Pages: Selected,” and then choose your subscription page. Now, hit the exclamation point - that turns it into a “not” rule. So that rule will mean show this on every page except for the subscription page. 2) If I’m correctly understanding what you want, it can’t be done exactly like that. There is no way for the system to know that someone is already on your MailChimp list. You can prevent new subscribers from seeing the popup again by setting a cookie after form submission. But for existing subscribers, the best UX would be to make a small “I’m Already a Subscriber” button below the signup form. I wouldn’t make it a full button style cause you want it to be less prominent than the signup form. Just make it underlined text to show that it’s clickable. Use the Popup Maker shortcode generator to make that text a close button, and add another cookie that sets on popup close. If you don’t want to set a long cookie for people who simply close the popup, then you could do an advanced treatment of the “I’m Already a Subscriber” button. The advanced method would be to add a class to that link that triggers a second popup, but give that popup no content and make a theme that is completely invisible. You can also use CSS to make it just one pixel in the corner of the screen. The purpose of this second popup is only to set a separate cookie for the “Already a Subscriber” button. You can then make that cookie super long, like 10 years, but the close button cookie only a day or so. If you need any additional help with this, we offer one-on-one Popup Maker training and consulting. You can find contact information on our website at jcmmediagroup.com.
hello mate, first of all thanks for the video. There is no problem when I do what you say, but I want it to be able to download the pdf file I added to the library after I fill out the form. The popup doesn't work when I add the link of the pdf file. What do you think is the reason for this? Is it wrong to make a video about education? I can share it with you via an e-mail where I can reach you. Thanks in advance.
It's hard to understand your exact workflow, but here's an easy way to do it... 1) Make your popup with the contact form. I prefer using Contact Form 7 because it's well integrated with Popup Maker. Set this popup to close when a contact form is submitted. 2) Use the "Redirection for Contact Form 7" plugin to recognize when that form is completion and redirect to your PDF document directly (in a new tab). That's basically the equivalent of downloading it and is a better user experience on mobile phones, which might not have local storage for file downloading.
I like classes the most because they look cleaner in the user experience on the page. I don't like elements that look like links but aren't. And sometimes Google picks up anchor links that start with #, and it would be weird for those to get indexed if it just triggered a popup. I've also found the link triggers to be more error-prone than custom classes because lots of developers' JavaScript targets those types of elements for various reasons. It's more "out of the way" of other people's code to target a custom class. If you can't add a class to an element, the standard way to open a popup with a link is to use the link format as follows: Popup Text where "123" is your popup ID. Sometimes this doesn't work for various reasons, like I said above. In this case, you can still use a custom selector to trigger the popup, even if you can't edit the classes of the element. As long as you can edit the link, you can still do it. For example, set your link to #my-popup and in the custom class section of the click trigger in your popup settings, put a[href="#my-popup"] --- this selector precisely targets your custom link without having to add new classes or IDs. Hope this helps!
Hi Thanks alot for the time you set aside to do this video. But I keep facing one problem. Once a form has been submitted and my form submission message shows, if I click the button again say to submit another form it does not work. They keep showing me the same form submission message indicating that the form has already been submitted. I had deactivated my cookies as well so I don't know why it should behave this way.
This is probably going to depend on which form plugin you are using. If you're using Contact Form 7, for example, what you are describing is the default behavior. Even outside of a popup, you can't submit multiple Contact Form 7's without reloading the page. If you're seeing something different between how the form processes on a static page versus inside a popup, check if the page is loading when the form submits. If the page reloads, it's NOT using AJAX and could feasibly be reset to accept another form submission. But inside the popup, you really want to be processing the form via AJAX, so to solve your use case, you're going to have to look for a plugin that submits via AJAX and has the ability to instantly reset after submission. I don't know of a plugin off the top of my head that can do this. Good luck! Come back and share if you find a solution. I'd be curious to hear how you tackle it.
Also, stuck with this for hours -.- The form was made in 5min, but finding out how to make the button work in elementor is an entirely different struggle... -.-
Hi! I've tried your solution but the extra class names on the buttons already have prebuilt classes. Two things happened when I followed your solution. 1. The design of the buttons changed. 2. The pop-up function didn't work. Hope there is a different solution to this? Thank you!
It’s a hard to troubleshoot without seeing exactly what you’re seeing, but if you are using one of the popular page builders and you are seeing extra classes already in place on your button elements, they were probably placed there by the website developer or the theme demo content, and it sounds as if those extra classes are being used to style the buttons. When you add your popup maker class, add it in addition to the ones that are already there, putting a space between them and not using the period before the class. When you inspect the button element on the front end with dev tools, you should see the existing classes and your new class all on the same element, and the styles associated with the prebuilt classes should still work. If the popup still does not trigger, it’s either a problem with your configuration or you have a generic iQuery problem somewhere in your theme or plugins. You can check for errors in the console log, and that should give you some clues. If none of that works, you’ll probably need to reach out to a web developer to troubleshoot at the code level or try a different plugin.
Glad it helped! I made this for one of my clients who was having trouble figuring it out and put it on RUclips to make it easy to share. So glad that it's also helping others who stumble onto it :)
I mostly make these kinds of things randomly when clients need help or have questions. What else would you like to see? More Popup Maker stuff? I've been thinking about doing one where I show a whole system that mimics Hubspot marketing automation using single pixel invisible popups and Popup Maker's cookie system to target different types of website visitors based on behavior. It would be a pretty intense tutorial though, probably overkill for most people.
Hi Marc, you absolutely can write custom scripts and call PopupMaker functions. You have to make sure that the popup is initialized on the page (via targeting), but then you can do pretty much whatever you want with jQuery. You can find a couple basic examples here, but if you examine the main JS file in the plugin, you can find function calls for pretty much whatever you need. docs.wppopupmaker.com/article/84-getting-started-with-custom-js
@@jcmmediagroup I just want to set a button class, and then use that as my target (on button click). My pop-up contains a Javascript embed code for a zoho form, and I want to show that on button click without using a shortcode or writing a custom script or function etc.
@@marcrigor6423 the classic WP wysiwyg editor has never really supported JS inside of it, but depending on your page builder, there is often a way to add custom HTML or custom JS. Even without that, it’s pretty straightforward to turn a snippet of JavaScript, like your Zoho form, into a simple shortcode in functions.php. WordPress is more of development environment than a “no coding required” website builder. Using any platform without learning at least basic coding is going to result in frequent functional limitations. There just isn’t a way for plugin developers to account for everyone’s unique needs, especially for free.
Years after the fact and this video is still extremely helpful to many. I can not tell you how frustrating it has been to come across instructions that only apply to the simplest of cases and not the obvious one - applying pop-up forms to buttons. The clear explanations finally helped this to click with me. Greatly appreciated!
Thank you so much, I ve looked at all the articles of Popup Maker and they are not answering this at all. That helped me so much !
Much appreciated! Thank you
You have a pleasant voice, I was looking for a similar tutorial on pop builder button trigger I see yours is maker but watched to the end coz of your voice, kinda similar to a celebrity's voice in movies but can't recall which one. You should think of auditioning animation voice-over, commentary, or radio
Thanks! That's really nice of you to say. You made my day :)
@@jcmmediagroup9511 I really mean it though, give it a shot brother. And above all stay safe one love
Thank you so so so much. I've been struggling with this for hours. This video is exactly what I was looking for!!
Thank you so much! It is helpful :)
Hi there, thanks for this great video. I have created my first popup and face two problems.
1. the popup is also shown on the newsletter subscription page. This is unnecessary since the subscriber is already on the signup page. How to turn this off for this page only?
2. how can I prevent showing this sign up popup to people that have already subscribed and are in our Mailchimp database?
Thanks in advance for you reply.
1) Use your targeting settings. In “choose a condition,” select “Pages: Selected,” and then choose your subscription page. Now, hit the exclamation point - that turns it into a “not” rule. So that rule will mean show this on every page except for the subscription page.
2) If I’m correctly understanding what you want, it can’t be done exactly like that. There is no way for the system to know that someone is already on your MailChimp list. You can prevent new subscribers from seeing the popup again by setting a cookie after form submission. But for existing subscribers, the best UX would be to make a small “I’m Already a Subscriber” button below the signup form. I wouldn’t make it a full button style cause you want it to be less prominent than the signup form. Just make it underlined text to show that it’s clickable. Use the Popup Maker shortcode generator to make that text a close button, and add another cookie that sets on popup close. If you don’t want to set a long cookie for people who simply close the popup, then you could do an advanced treatment of the “I’m Already a Subscriber” button. The advanced method would be to add a class to that link that triggers a second popup, but give that popup no content and make a theme that is completely invisible. You can also use CSS to make it just one pixel in the corner of the screen. The purpose of this second popup is only to set a separate cookie for the “Already a Subscriber” button. You can then make that cookie super long, like 10 years, but the close button cookie only a day or so. If you need any additional help with this, we offer one-on-one Popup Maker training and consulting. You can find contact information on our website at jcmmediagroup.com.
very very thank you.
hello mate, first of all thanks for the video. There is no problem when I do what you say, but I want it to be able to download the pdf file I added to the library after I fill out the form. The popup doesn't work when I add the link of the pdf file. What do you think is the reason for this? Is it wrong to make a video about education? I can share it with you via an e-mail where I can reach you. Thanks in advance.
It's hard to understand your exact workflow, but here's an easy way to do it... 1) Make your popup with the contact form. I prefer using Contact Form 7 because it's well integrated with Popup Maker. Set this popup to close when a contact form is submitted. 2) Use the "Redirection for Contact Form 7" plugin to recognize when that form is completion and redirect to your PDF document directly (in a new tab). That's basically the equivalent of downloading it and is a better user experience on mobile phones, which might not have local storage for file downloading.
@@jcmmediagroup ok thanks mate. I will try.
Muchas gracias.
Thank u so much !! ♥♥♥
How to opent popup when i use tag, example I'm in a page I want clict to url href /#openpopup Because many case we can't add custom class
I like classes the most because they look cleaner in the user experience on the page. I don't like elements that look like links but aren't. And sometimes Google picks up anchor links that start with #, and it would be weird for those to get indexed if it just triggered a popup. I've also found the link triggers to be more error-prone than custom classes because lots of developers' JavaScript targets those types of elements for various reasons. It's more "out of the way" of other people's code to target a custom class.
If you can't add a class to an element, the standard way to open a popup with a link is to use the link format as follows: Popup Text where "123" is your popup ID. Sometimes this doesn't work for various reasons, like I said above. In this case, you can still use a custom selector to trigger the popup, even if you can't edit the classes of the element. As long as you can edit the link, you can still do it. For example, set your link to #my-popup and in the custom class section of the click trigger in your popup settings, put a[href="#my-popup"] --- this selector precisely targets your custom link without having to add new classes or IDs.
Hope this helps!
Thanks pro
Hi Thanks alot for the time you set aside to do this video. But I keep facing one problem. Once a form has been submitted and my form submission message shows, if I click the button again say to submit another form it does not work. They keep showing me the same form submission message indicating that the form has already been submitted. I had deactivated my cookies as well so I don't know why it should behave this way.
This is probably going to depend on which form plugin you are using. If you're using Contact Form 7, for example, what you are describing is the default behavior. Even outside of a popup, you can't submit multiple Contact Form 7's without reloading the page. If you're seeing something different between how the form processes on a static page versus inside a popup, check if the page is loading when the form submits. If the page reloads, it's NOT using AJAX and could feasibly be reset to accept another form submission. But inside the popup, you really want to be processing the form via AJAX, so to solve your use case, you're going to have to look for a plugin that submits via AJAX and has the ability to instantly reset after submission. I don't know of a plugin off the top of my head that can do this. Good luck! Come back and share if you find a solution. I'd be curious to hear how you tackle it.
Also, stuck with this for hours -.-
The form was made in 5min, but finding out how to make the button work in elementor is an entirely different struggle... -.-
finally
if u're using elementor, go to advanced tab, advanced dropdown menu, css classes
Thank you for video. If you want to use it just for link (you do not want button) then use this LINK
Thank you!! it was very helpfull
Hi! I've tried your solution but the extra class names on the buttons already have prebuilt classes.
Two things happened when I followed your solution.
1. The design of the buttons changed.
2. The pop-up function didn't work.
Hope there is a different solution to this?
Thank you!
It’s a hard to troubleshoot without seeing exactly what you’re seeing, but if you are using one of the popular page builders and you are seeing extra classes already in place on your button elements, they were probably placed there by the website developer or the theme demo content, and it sounds as if those extra classes are being used to style the buttons. When you add your popup maker class, add it in addition to the ones that are already there, putting a space between them and not using the period before the class. When you inspect the button element on the front end with dev tools, you should see the existing classes and your new class all on the same element, and the styles associated with the prebuilt classes should still work. If the popup still does not trigger, it’s either a problem with your configuration or you have a generic iQuery problem somewhere in your theme or plugins. You can check for errors in the console log, and that should give you some clues. If none of that works, you’ll probably need to reach out to a web developer to troubleshoot at the code level or try a different plugin.
sos un genio!!!!!! GRACIASSSS
Thank youuuu
Glad it helped! I made this for one of my clients who was having trouble figuring it out and put it on RUclips to make it easy to share. So glad that it's also helping others who stumble onto it :)
yo we need more videos
I mostly make these kinds of things randomly when clients need help or have questions. What else would you like to see? More Popup Maker stuff? I've been thinking about doing one where I show a whole system that mimics Hubspot marketing automation using single pixel invisible popups and Popup Maker's cookie system to target different types of website visitors based on behavior. It would be a pretty intense tutorial though, probably overkill for most people.
If shortcode wasn't mandatory and it could actually deal with scripts, we'd be using this popup plugin. Too bad.
Hi Marc, you absolutely can write custom scripts and call PopupMaker functions. You have to make sure that the popup is initialized on the page (via targeting), but then you can do pretty much whatever you want with jQuery. You can find a couple basic examples here, but if you examine the main JS file in the plugin, you can find function calls for pretty much whatever you need. docs.wppopupmaker.com/article/84-getting-started-with-custom-js
@@jcmmediagroup I just want to set a button class, and then use that as my target (on button click). My pop-up contains a Javascript embed code for a zoho form, and I want to show that on button click without using a shortcode or writing a custom script or function etc.
@@marcrigor6423 the classic WP wysiwyg editor has never really supported JS inside of it, but depending on your page builder, there is often a way to add custom HTML or custom JS. Even without that, it’s pretty straightforward to turn a snippet of JavaScript, like your Zoho form, into a simple shortcode in functions.php. WordPress is more of development environment than a “no coding required” website builder. Using any platform without learning at least basic coding is going to result in frequent functional limitations. There just isn’t a way for plugin developers to account for everyone’s unique needs, especially for free.