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 Spark Pay online store. The reason is that the system uses the .aspx protocol, which will not allow a form inside a form. The Spark Pay online stores system puts the entire page into a form, which is how the "Add to cart" functionality works. But since its in a form, and 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>
