Adding a “Confirm Email” Field to the Bigcommerce Contact Form

Recently we worked on a Bigcommerce project where the client requested that we add a “Confirm Email” field to the contact form on their site, and we were able to take care of it pretty easily. If you’re interested in doing this for your own site, here’s a simple rundown.

You’ll need to add/edit HTML code in the Bigcommerce template files. So you just need to click “Design” link in the navigation of your BC admin panel and click “Edit HTML/CSS”.

Step 1

Locate page_contact_form.html in the panels. Add this HTML code within the file.

12 <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 provided below, you can see that I’ve added this code on lines 23-24.

image01

 

 

 

 

 

 

Step 2

Now you’ll need to add a bit of JS code in theContactFormJavaScript.html file.

1234567 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 6 and lines 14-19.

image02

 

And that’s it! Here goes the output:

image00

If you have any questions, please post in the Comments section below. And if you’re looking to really take your Bigcommerce site to the next level, get in touch with Coalition Technologies. We help businesses just like yours to increase and even multiply traffic and revenue. Call us today at (310) 827-3890 for a free quote on our SEO, design, and development services.

Related Posts That May Help