Streaming live at 10am (PST)

Modal Question - can the user enter their email, click submit, and THEN the modal pops up?


#1

Hi guys,

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.


#2

You can do this by nesting the modal inside of the success element of the form. That way it only becomes visible when the form submits.


#3

Great! That worked like a charm, thank you so much!

Any idea why the close button doesn't work in the modal ?


#4

on which page does your modal show up?


#5

The page is called 'Ontario'


#6

Hi @cjeancouture

What seems to be the issue with the close button? I tested it and it is working fine on my end.

Can you please describe or show in detail what the issue is? Maybe share a screencast using a tool like Cloupdapp.

Standing by for your response.


#7

Here is a video of me clicking the close button repeatedly as well as clicking outside the modal. I am using Chrome.

@AnnaKelian


#8

Hi @cjeancouture

So, it looks like you are calling the popup in many ways while it will automatically appear when the form is submitted.

1) 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.

2) 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.

​Hope this is helpful.


#9

Hi @AnnaKelian,

Thank you. I removed both the interactions you mentioned but the close button still isn't working for me.

Am I missing something?


#10

Hi @cjeancouture

Here's the culprit: same interaction Show Contact Form is set on the whole section. Please, remove that.


#11

@AnnaKelian It worked! Thanks so much for all your help!


#12

You're most welcome Catherine @cjeancouture


#13

This topic was automatically closed 125 days after the last reply. New replies are no longer allowed.