Add pop up message after user hits send on contact form

[flammagreg]

Hi guys,

Website: seraneeva.com

Right now after a user hits send on the contact form, a small green section shows up at the top of the contact form thanking the user and telling them our representatives will be in touch. How can I change the green section to be a pop up in the middle of the users screen like the attached image? Any help would be greatly appreciated!

[sahilsharma9515]

Hi @flammagreg It can be done with custom coding if this functionality is not available in your store by default, you will need to add the JS code along with CSS to shave this functionality.

Best Regards

Sahil

[Made4uo-Ribe]

Hi @flammagreg 

Unfortunately, you will need a developer to add this feature. 

[BSSCommerce-HDL · Accepted solution]

Hi @flammagreg, 

Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code
Step 2: Search file contact-form.liquid

Step 3: Insert the code css to your file -> Save

<style>
 .overlay {
    position: fixed;
    background-color: #00000059;
    top: 0;
    left: 0;
    z-index: 2;
    width: 100vw;
    height: 100vh;
  }
  p.pop-up-title {
    font-size: 20px;
  }

  .custom-pop-up {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: calc(100vw / 2 + 250px);
    padding: 10px;
    background-color: white;
    border-radius: 8px;
    text-align: center;
}
  .note.form-success {
    opacity: 0;
  }

  button.pop-up-btn {
    position: relative;
    text-align: center;
    padding: 8px 80px;
    background-color: transparent;
    color: #ffffffc7;
    border: none;
    font-size: 14px;
    letter-spacing: 1px;
    text-transform: uppercase;
}
</style>

 Step 4: Insert the code html to your file -> Save

<div class="overlay" style="display: none">
         <div class="custom-pop-up">
              <p class="pop-up-title">{{ 'contact.form.post_success' | t }}</p>
             <button class="pop-up-btn"> Done </button>
          </div>
      </div>

Step 5: Insert the code js before close section tag to your file -> Save

<script>
      let first_name = localStorage.getItem("first_name");
      let last_name = localStorage.getItem("last_name");
      let pop_up_title = document.querySelector('.pop-up-title');
      let overlay = document.querySelector('.overlay:has(.custom-pop-up)');
      let form_success = document.querySelector('.note.form-success');
      if(first_name && last_name && pop_up_title && form_success) {
        overlay.style.display = "block";
        let text_form_success = pop_up_title.innerHTML.trim();
        pop_up_title.innerHTML = text_form_success.replace("Thank you.", `Thank you, ${first_name} ${last_name}.<br/>`);
        document.querySelector('.pop-up-btn').addEventListener("click", () => {
          overlay.style.display = "none";
          localStorage.setItem("first_name", '');
          localStorage.setItem("last_name", '');
        })
      }
      let btn_submit = document.querySelector('.btn[type="submit"]');
      let form_first_name =  document.querySelector('#form_first-name');
      let form_last_name =  document.querySelector('#form_last-name');
      btn_submit.addEventListener("click", () => {
         first_name = localStorage.setItem("first_name", form_first_name.value);
         last_name = localStorage.setItem("last_name", form_last_name.value);
      })
    </script>

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍