Add your Formstack Forms to your Shopify pages to elevate a customized experience for your customers. Here's how!
Add Formstack Forms using iFrame
Easily embed a form into your Shopify page using iFrame. If you plan to embed multiple forms on multiple pages, using iFrame is the best practice.
Step 1: From the form builder's navigation, select the Share tab and choose Embed Form from the available sharing options. Here, copy the iFrame Embed text box:
Step 2: Log into your Shopify account and navigate to the page where you would like to embed your Formstack form. Here, select the "< >" icon near the text editor.
Step 3: Paste the iFrame code into the text editor and then click the < > icon to exit HTML code mode.
Step 4: Select Save and view the published page to test.
Note: 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.
Add Formstack Forms using Javascript
Use Javascript to embed your Formstack Forms to seamlessly look like a part of your website and be mobile responsive.
Step 1: Access the theme code applied to your Shopify page. Under the Sales Channel, select Themes. Click the action icon (...) and select Edit Code from the dropdown options:
Step 2: From the auto-populated theme editing screen, select "Add a new Template" under Templates.
Step 3: In the modal, use the dropdown to select Page, toggle to liquid, and give your template a unique name. Select Done to save the template.
Step 4: Your newly created template is added in the template list titled 'page.{your_template_name}.liquid'. Click on your template.
Step 5: Toggle tabs to your Formstack form builder's navigation, select the Share tab, and copy the Javascript Embed Script.
Step 6: Return to Shopify, paste the Javascript contents in your template's text box and select Save to capture.
Step 7: Under Sales Channel, select Pages and choose the page to embed the form or click Add Page to create a new site page.
Step 8: On the page editor, Select the Template dropdown and choose your newly created template:
Step 9: Select View Page to see how the embed form looks on the public site.
Note: Any text entered in the text box will display below the form.