Adding confirm email field in BigCommerce contact form

Recently I worked on a BC project. Client made a small request of adding confirm email field in the contact form of BigCommerce website. Its not really much tricky. Here goes the quick tutorial.

We’ll need to add/edit html code in the BigCommerce Template files. So you just need to click “Design” link in the navigation in BC admin panel and click “Edit HTML/CSS”.

Step 1

Now just find this file page_contact_form.html in the panels. Add this html code in the page_contact_form.html file.

<dt><span class="Required">*</span>&nbsp; Confirm Email</dt>
<dd class="smallTextbox"><input type="text" placeholder="Confirm Email" name="confirm_email" class="Textbox Field200" /></dd>

In the screenshot given below, you can see that I’ve added this code on line number 23-24.

Step 1 - Add code in page_contact_form.html

Step 2

Now you’ll need to add little bit JS code in the ContactFormJavaScript.html file.

var confirm_email = $('#confirm_email').val();
if(confirm_email != email_address) {
  alert('Emails should match');
  $('#confirm_email').focus();
  $('#confirm_email').select();
  return false;
}

In the screenshot you can see that I’ve added this code on line number 6 and line number 14-19.

Add JS code in ContactFormJavaScript.html

And thats it!! Here goes the output:

Confirm Email field in Contact form BigCommerce

Please post comment if you’ve any question. Thanks

Published by

Amandeep

Blogger & Web Developer having expertise in Shopify, BigCommerce, WordPress and Front-End Technologies (HTML, CSS and JavaScript).

3 thoughts on “Adding confirm email field in BigCommerce contact form”

  1. Awesome, thanks! I really need to implement this on sign-up and guest accounts for my bigcommerce store. The number of mistyped email addresses is shockingly high…

    Question : For creating a new account i guess the JS goes in “CreateAccountJavaScript.html”, but what about for the ExpressCheckout > Guest option?

    Thanks!
    R

Leave a Reply

Your email address will not be published. Required fields are marked *