Can you add custom or additional form fields in BigCommerce without a third party hosted service?

Yes, we’ll walk you through the process of adding custom form fields to the BigCommerce Templates.

Note: This post may need updating for the current BigCommerce system and we are looking into it.

If you’ve started using or have been using BigCommerce you will quickly recognize how powerful this eCommerce system is. You will also quickly discover it’s shortcomings. One of these shortcomings happens to be the limited contact form functionality. The base contact forms are pretty limited and consequently one of the most common requests we receive is, “how do I customize my form fields?”

If you call BigCommerce Support 99% of the time the answer will be that you have to use a third party system and integrate it with your store. If your form requirements are extremely custom then you probably will need to do just that, however, many website owners can solve their custom form field needs within the BigCommerce system.

Here’s how you can add custom form fields to your BigCommerce store:


{You will be adding code to (2) separate files}

The first tutorial is specifically for adding a custom drop down selection field to your form and the second is for a standard text box form field.

__________________________________________________________

1. Open the file called page_contact_form.html and insert the code below:
[box] <dt><span>*</span>&nbsp; Reason:</dt>
<dd>
<select id="reason">
<option>Reason1</option>
<option>Reason2</option>
<option>Reason3</option>
<option>Reason4</option>
</select>
</dd>[/box]

(you can replace reason1, reason2, …, with the text you want to display in your form field)

__________________________________________________________

Note: We recommend inserting the code above before this line of code.

Code:
<dt><span>*</span>&nbsp; %%LNG_ContactQuestion%%:</dt>
__________________________________________________________

 

2. The next step would be to open the file called ContactFormJavaScript.html and add the code below exactly after //<![CDATA[
[box] var bools = true;
$('#captcha').focus(function() {
if (bools) {
$('#contact_question').val($('#contact_question').val()+"nReason: "+$('#reason').val());
bools = false;
}
});[/box]
__________________________________________________________

 

For this tutorial we used “Reason” as the custom form field name, you can change it to whatever you want – just make sure that your naming is consistent throughout.

 

If you would just like to add a standard text box form field to your existing BigCommerce contact form it’s essentially the same process, but here is the exact code:

 

[box] <dt style=”display”>&nbsp;&nbsp; Location</dt>

<dd style=”display”><input type=”text” name=”location” id=”location” class=”Textbox Field200″ value=”location” /></dd>[/box]

Note: We recommend inserting the code above before this line of code.

Code:
<dt><span>*</span>&nbsp; %%LNG_ContactQuestion%%:</dt>
__________________________________________________________
2. The next step would be to open the file called ContactFormJavaScript.html and add the code below exactly after //<![CDATA[

 

[box] var bools = true;$(‘#captcha’).focus(function() {

if (bools) {

$(‘#contact_question’).val($(‘#contact_question’).val()+”nlocation: “+$(‘#location’).val());

bools = false;

}

});
[/box]

__________________________________________________________