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> Reason:</dt>
[/box]
<dd>
<select id="reason">
<option>Reason1</option>
<option>Reason2</option>
<option>Reason3</option>
<option>Reason4</option>
</select>
</dd>
(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.
<dt><span>*</span> %%LNG_ContactQuestion%%:</dt>
var bools = true;
$('#captcha').focus(function() {
if (bools) {
$('#contact_question').val($('#contact_question').val()+"nReason: "+$('#reason').val());
bools = false;
}
});
[/box]
[box] <dt style=”display”> 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.
<dt><span>*</span> %%LNG_ContactQuestion%%:</dt>
if (bools) {
$(‘#contact_question’).val($(‘#contact_question’).val()+”nlocation: “+$(‘#location’).val());
bools = false;
}
});
[/box]