Pop up message after user hits send on contact us page

[flammagreg]

Hi guys,

Website: seraneeva.com

After a user hits send on the contact us page a message pops up thanking them and telling them our representatives will be in touch. How can I add a message underneath "our representatives will be in touch" will something exactly like the attached image with "we'll email you at: user's inputted email" and a copy of their message. Pic attached for reference.

[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 {
    margin-top: 15px;
    position: relative;
    text-align: center;
    padding: 8px 60px;
    background-color: transparent;
    color: #ffffffc7;
    border: none;
    font-size: 14px;
    letter-spacing: 1px;
    text-transform: uppercase;
}
  button.pop-up-btn:before {
    background-color: var(--primary-btn-bg-color);
    border-radius: 2px;
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: -1;
    transform: translate(-50%, -50%) !important;
    transition-duration: .8s;
    transition-property: transform;
    transition-timing-function: cubic-bezier(.5,0,0,1) ;
  }
  
  .email-title, .message-title {
    display: inline-block;
    font-size: 16px;
  }
  
   button.pop-up-btn:hover:before {
    transform: translate(-50%, -50%) scale(.95, .9) !important;
   }
</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 email = localStorage.getItem("email");
      let message = localStorage.getItem("message");
      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) && email && message && 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('.email-title + span').innerHTML = email;
        document.querySelector('.message-title ~ span').innerHTML = message;
        document.querySelector('.pop-up-btn').addEventListener("click", () => {
          overlay.style.display = "none";
          localStorage.setItem("first_name", '');
          localStorage.setItem("last_name", '');
          localStorage.setItem("email", '');
          localStorage.setItem("message", '');
        })
      }
      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');
      let form_email = document.querySelector('#form_email-address');
      let form_message = document.querySelector('#form_message');
      btn_submit.addEventListener("click", () => {
         first_name = localStorage.setItem("first_name", form_first_name.value);
         last_name = localStorage.setItem("last_name", form_last_name.value);
         email = localStorage.setItem("email", form_email.value);
         message = localStorage.setItem("message", form_message.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 😍