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 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.

And thats it!! Here goes the output:

Please post comment if you’ve any question. Thanks