Search through more than a hundred articles on every aspect of User.com

Rafał Olszewski
Written by Rafał Olszewski

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


Recommended knowledge of basic HTML and JavaScript.

Each form can contain a JavaScript code in it, that what we need to have Thank you message inside of a single pop-up.

1. We need main form view, in our case it's element with id my_form
<div id="my_form">
  <p>This is my first part of the form.</p>
  <button id="nextStep">Submit</button>
</div>
2. Then, we'll create thank you part, let's create an element with id thank_you and with hidden style property.
<div id="thank_you" style="display: none;">
  <p>Thanks for filling up the form!</p>
  <button type="submit">Close</button>
</div>
3. On top of it, we will connect everything with short and simple JavaScript code.
<script>
  var nextStep = document.querySelector('#nextStep');

  nextStep.addEventListener('click', function (e) {
    e.preventDefault();
    // Hide first view
    document.getElementById('my_form').style.display = 'none';

    // Show thank you message element
    document.getElementById('thank_you').style.display = 'block';
  });
</script>
Final result code would look like this, copy it and adjust to your form and needs.
<div id="my_form">
  <p>This is my first part of the form.</p>
  <button id="nextStep">Submit</button>
</div>

<div id="thank_you" style="display: none;">
  <p>Thanks for filling up the form!</p>
  <button type="submit">Close</button>
</div>

<script>
  var nextStep = document.querySelector('#nextStep');

  nextStep.addEventListener('click', function (e) {
    e.preventDefault();
    // Hide first view
    document.getElementById('my_form').style.display = 'none';

    // Show thank you message element
    document.getElementById('thank_you').style.display = 'block';
  });
</script>