I am trying to create a modal that pops up after the user has clicked submit.
Basically, I want to ensure that if someone decides not to finish filling out the contact form, we at least have their email and can contact them anyway.
On the page, there is a field that says ‘enter your email’ and a submit button that says ‘get started for free!’.
I want the user to enter their email, click the button, and then be presented with a pop-up modal with the full contact form.
Makes sense?
I followed the video on how to make a pop-up modal and was able to do so without issue. My problem now is how to get that modal interaction on the CTA button, without the modal opening before the user has a chance to enter their email. When testing, I clicked on the email field and the modal immediately opened. I am unable to advance any further due to this issue.
I also noticed that the ‘close’ interaction within the modal stopped working, though I tested it earlier and it worked well. I think it has to do with the fact that I am now trying to use a ‘submit’ button instead of a regular button. I was hoping to have both actions on the same button in one click (submitting the email and opening the modal).
Can someone please help with these two issues?
Thank you!
Here is my public share link: LINK
The page is called ‘Ontario’ and is a landing page for Adwords.
So, it looks like you are calling the popup in many ways while it will automatically appear when the form is submitted.
You don’t need the initial appearance interaction called Modal Interaction. It is already hidden in the success message. If you wish to add any transforms or opacity animation, you can do that in the styles panel.
The culprit behind the close button not working is this interaction: Show Contact Form. Again, you don’t need it as the modal will appear when the form is submitted as it is part of the success message.
So, when you remove the Show Contact Form interaction, from the CTA button, the close button should work fine.
