How to create pop-ups with a "Thank you" message

Make sure you have a basic understanding of HTML and JavaScript before proceeding.

1. Setting Up the Main Form

Start by creating the main form view using HTML. In this example, we'll use an element with the ID my_form:

<div id="my_form">     
     <p>Fill out the form.</p>          
          <form>            
               <div>               
                    <label for="first_name">First Name:</label>                    
                    <input type="text" id="first_name" name="first_name" placeholder="Your first name" required>               
               </div>               
               <div>                    
                    <label for="email">Email:</label>                         
                    <input type="email" id="email" name="email" placeholder="Your email address" required>               
               </div>               
               <div>                    
                    <button id="nextStep">Submit</button>               
               </div>          
          </form>
</div>

The form shown above contains two fields: first name and email. You can always modify it and adjust it to your needs. 

In order to send data to User.com once the form (first step) is submitted, you can add the following script:

var popupForm = document.querySelector("form");
var popupButton = document.querySelector("button");

popupButton.addEventListener("click", function () {
     var popupEmail = popupForm.querySelector("#email").value;
     var popupName = popupForm.querySelector("#first_name").value;

     var event_data = {
          event_name: "popup_sent",
          email: popupEmail,
          name: popupName
     }

     window.top.UE.pageHit({'apiKey':put_api_key_of_your_app_here, 
          'email': popupEmail,
          'name': popupName,
          'event': event_data
     });  
});

2. Creating the Thank You Message

Next, create the thank you message element with the ID thank_you and set its style property to display: none to keep it hidden initially:

<div id="thank_you" style="display: none;">
     <p>Thanks for filling out the form!</p>
     <button data-dismiss="true" class="close-button">Close</button>
</div>

3. Connecting Everything with JavaScript

Use JavaScript to handle the form submission and display the thank you message. Add the following script to your HTML:

var popupForm = document.querySelector("form");
var popupButton = popupForm.querySelector("button"); 
     popupButton.addEventListener('click', function (e) {
          e.preventDefault();

          document.getElementById('my_form').style.display = 'none';
          document.getElementById('thank_you').style.display = 'block';
     });

4. Final Result

Your final HTML code should look like this:

<div id="my_form">
     <p>Fill out the form.</p>
          <form>
               <div>
                    <label for="first_name">First Name:</label>
                    <input type="text" id="first_name" name="first_name" placeholder="Your first name" required>
               </div>
               <div>
                    <label for="email">Email:</label>
                    <input type="email" id="email" name="email" placeholder="Your email address" required>
               </div>
               <div>
                    <button id="nextStep">Submit</button>
               </div>
          </form>
</div>

<div id="thank_you" style="display: none;">
     <p>Thanks for filling out the form!</p>
     <button data-dismiss="true" class="close-button">Close</button>
</div>

<script>
var popupForm = document.querySelector("form");
var popupButton = popupForm.querySelector("button");
     popupButton.addEventListener('click', function (e) {
          e.preventDefault();
          var popupEmail = popupForm.querySelector("#email").value;
          var popupName = popupForm.querySelector("#first_name").value;

          var event_data = {
               event_name: "popup_sent",
               email: popupEmail,
               name: popupName
               }

          window.top.UE.pageHit({'apiKey':put_api_key_of_your_app_here,
               'email': popupEmail,
               'name': popupName,
               'event': event_data
               });  
          document.getElementById('my_form').style.display = 'none';
          document.getElementById('thank_you').style.display = 'block';
     });
</script>

Feel free to copy and adjust this code to suit your specific form and design requirements. This simple implementation provides a smooth and visually appealing way to acknowledge user submissions with a pop-up "Thank You" message.

Keep in mind that that submitting the form in the first step will actually send the data to User.com.

5. Set up the automation

To show the popup on your website, you must create an automation that will handle the process. To do so, follow these steps:

1. Add Page visit automation trigger.
   

2. In the trigger settings define on which URL address(es) it should launch.
   

3. Add Show pop-up automation block.
   

4. Select the popup you’ve created previously.
   

5. Connect two blocks and save and exit the automation setting it to run each time the condition is met or if you’d like the popup to display not more often than once a day, choose this option.
   

Elements used in this use case

• Module: Tools » Pop-ups

• Automation blocks: Page visit

• Automation blocks: Show popup