It is possible to create your own form such as a contact us or a quote request. This article is for experienced readers, as it takes a little bit of HTML knowledge to create a form from scratch. For the inexperienced readers, we have a Custom form builder as well, allowing you to create forms with ease.
For the experienced readers, lets move on to creating our own forms. It is not possible to create the form inside the HTML of the AmeriCommerce online store directly. The reason is that the system uses the .aspx protocol, which will not allow a form inside a form. The AmeriCommerce online stores system puts the entire page into a form, which is how the "Add to cart" functionality works.
We have created a widget to alleviate these issues.
Embed A Form widget
Use the Embed A Form widget to place a custom form onto any page. Let's take a look at how to configure it.
Custom Form - Here is where you will place your form tag with your custom form.
Do Not Redirect - If you enable this, the page will not refresh or redirect when submitting the form. Allows the user to remain on the page
Submit Confirmation Message - This is only applicable if you have 'Do Not Redirect' enabled. This is for any custom content you wish to be displayed after the form submits.
Some considerations
This widget is ONLY used for custom forms with an explicit form tag defined. It is not to be used for external forms that are embedded via iframe or script tags. Some external form providers will give you a div to place onto your page with a code snippet that will generate the form dynamically when the page loads. These types of forms actually work just fine out of the box and can usually be placed directly onto your store with no issues.
Legacy Instructions
This was the old method for getting around form issues, before the Embed A Form widget was created. Please use that widget if possible
Since we can't nest a form inside a form, we need to bring this form in with an iframe.
Click here to see the W3schools article on iframes.
Think of an iframe like a mini HTML document, inside another HTML document. This iframe will let us get around the form within a form issue, and allow us to put a working form on the site.
First, we will want to create the form that is to be displayed. This is the HTML for the form I am going to display:
After creating the HTML for the form, it needs to be saved into an HTML document. Then upload it into the Content > Files portion of the admin panel.
After uploading the form to your test store, you will need to take the relative URL of the path it uploads to.
I uploaded it to this page, but your location will differ:
/Shared/Forms/customform.html
Now that we have the form uploaded to the store, and the URL of its location, we just need to incorporate this into the HTML of the page we choose.
Edit the page/widget you'd like to have this form on. Make sure you are in the HTML editor on the page. The markup for an iframe is like this:
<iframe src="/Shared/Forms/customform.html"></iframe>
You will need to replace the text in red with the relative URL that is created when uploading the form to your store.
After this, save the page. Now when you go to the URL of whatever page this is displaying on, you should have your form!
Additional styling
When putting a form in an iframe, there is often a border around the iframe, and this may not be the look you are trying to accomplish. However, it is easy to remove this border, by adding this in the iframe HTML:
frameBorder="0"
<iframe src="/Shared/Forms/customform.html" frameBorder="0"></iframe>