BigCommerce out of the box sports a decent contact form that is usable for everyone 99% of the time. However, things get a little tricky if we need to add in a few extra fields in there or even a whole new form; for example, a product warranty registration form. This is when we handover all form responsibilities to Google Forms.

Bigcommerce

The standard way of embedding Google Forms is to use an iframe, which is sufficient. The more preferable way of course is by manually extracting the form’s HTML fields and re-coding it according to your theme’s HTML structure. Not only will it match your theme nicely, but you can also insert some custom JS validation on the fields as needed. Another plus is that Google Forms captures form submissions in a convenient spreadsheet format.

The Steps

The first step is to create two web pages in BigCommerce that will become our form page and success page when users submit the form. The form page is a custom template file that will contain our form HTML codes while the success page is simply a generic page. Take note of the success page URL.

Next, build our form in Google Forms with the most minimalist styling. Once tested and published, view its source to get the form codes and re-code the form into our custom template file — in the HTML structure we like while preserving the field names and the <form> action (and method). Next is some code alterations.

<script type="text/javascript">var submitted=false;</script>
<iframe name="hidden_iframe" id="hidden_iframe"style="display:none;" onload="if(submitted) {window.location='SUCCESS_PAGE_URL';}"></iframe>


<form action="https://docs.google.com/forms/d/1CsZt9s0vVegFb3-Qa3162Ri7A91ggx6S9B6qvBZcyJY/formResponse" method="POST" target="hidden_iframe" onsubmit="submitted=true;">
...your form fields...
</form>

Add line 1 and 2 right before our form tag and replace the correct success page URL in line 2.

Next, add target="hidden_iframe" onsubmit="submitted=true;" attributes to the <form> tag so that the form submits into the hidden <iframe> we created in line 2.

Finally, give it a test run. It is advisable to validate the form fields with JS to ensure the form is indeed being submitted successfully.

Although this guide is written for BigCommerce, the implementation steps are generic enough to be used on any platforms where you have HTML and JS editing access. Hope it helps.

Need help making your BigCommerce store stands out from the competition? Get in touch.