Embed your form into a Shopify Page

The two easiest ways to embed your Formstack form into a Shopify page are:

1) iFrame

2) Javascript embed code 

This support document will provide you with step-by-step directions on how to do both.

 

iFrame

This is the fastest and easiest way to embed a form into your Shopify page. This is also the best way to embed your form if you plan to embed multiple forms on multiple pages.

The first step is to copy the form's iFrame code from the Publish tab > Embed Form. 

Screen_Shot_2019-06-27_at_2.38.40_PM.png

 Next, log in to your Shopify account and navigate to the page where you'd like to add your form. Click the < > icon in the top right corner of the text editor.

Paste your iFrame code into the text editor and then click the < > icon to exit HTML code mode.

 Finally, click 'Save' and view your published page. If you'd like to adjust the height or width of the iFrame, return to the Page editor, click on the HTML code button and change the height and width amounts in the code, then re-save the page. 

<iframe src="https://colin.formstack.com/forms/order_form_shopify" title="Order Form_Shopify" width="600" height="400"></iframe>

 

Javascript Embed Code 

This option takes a few more steps but allows you to embed the form in such a way that it will look like a part of your website and will be mobile responsive.

The first step is to access the code of the theme you have applied to your Shopify page. To do this, in Shopify, click on 'Themes' under 'Sales Channel'. Next click 'Actions' on your current theme and select 'Edit Code'.

This will take you to a list of files. Scroll down to 'Templates' and choose 'Add New Template'.

On the modal that pops up choose to 'Create a new template for 'page'  and then enter a name for the template such as 'form'.

 This will create a template in the list titled 'page.{your_template_name}.liquid'. In my example, I used 'form' for the template name so it is 'page.form.liquid'. Click on this template. 

 

Now, go back into Formstack to the Publish tab of your form and copy the Javascript Embed Code of your form.

Screen_Shot_2019-06-27_at_2.40.40_PM.png

Return to Shopify, and paste the form embed code above <div class="rte">.

 

Next, click on 'Pages' on the side menu under Sales Channels to return to your site's pages. Click on the page where you'd like to embed your form or click 'Add Page' if you need to create a new page for your form.

 On the page editor, you'll see a dropdown list under 'Template' on the right side. Choose your newly created template which, in this example, it will be 'page.form'.

Finally, view the published version.

Note that any text entered in the text box will display below the form.

 

Was this article helpful?
4 out of 11 found this helpful

Comments

0 comments

Please sign in to leave a comment.