Embedded Forms are signup forms that are usually found on the footer of a website. We recommend having an embedded form in addition to your popup to give site visitors another opportunity to subscribe to your emails.
From the main dashboard, click Campaigns and select Sign Up Forms from the drop down menu. Click Create Signup Form in the upper right hand corner.
- The Configure page will prompt you to:
- Enter a name for your Sign Up Form
- Select which email list(s) you’d like new subscribers to land in
- Choose Embedded Form
Once you’ve selected Embedded Form, click Next to proceed to the Design Content page to begin designing your embedded form. You’ll see a default template to help get you started:
The default Embedded Form will have Email as the default Type & Attribute name for the Input Form, as the singular purpose for the embedded form is to give users another opportunity to subscribe to your emails. We recommend keeping a simple design and clear call-to-action when creating an embedded form.
To edit the default Label text, highlight the input form and edit the Label text field on the right hand side:
Show label: Select whether or not you’d like text before your input form.
Label text: Optional text that will display before your input form.
Placeholder: Placeholder text will auto populate in the input form and will show users what information to input here.
Attribute name: The default attribute name is Email. For Embedded Forms we recommend not changing this.
Required: Checking this box will make entering this input field required in order to proceed with completing the form.
When a new subscriber successfully subscribes via embedded form, the page will refresh with a short success message thanking the subscriber for signing up.
You can edit the default text by clicking into the text module:
Once your embedded form is complete, select copy Embedded Form Code and paste it on the backend of your site.
Embedding the form code onto your site:
The steps for adding the code to your website varies depending on which shopping cart you're using.
- From your Big Commerce admin, go to Storefront -- this should take you to the "My Themes" section
- Your current theme should be at the top of the page. Select "Advanced" and then "Make a Copy". We suggest naming this new theme something that will remind you that this is the version with the Springbot Embedded Form included. Then click "Save a Copy"
- Next, under "My Themes", you should see your newly saved theme listed first. Click on the three dots (...) and select "Edit Theme Files"
- Expand “Templates” > “Components” > “Common” > find “footer.html” or “newsletter-signup.html”
If your theme already has an Embedded Form built in, you will need to make an adjustment so your current form no longer shows
On the line before the form where <article class= is, add “<!--” and on the line after the form where </article> is add “-->”
To ensure the Springbot form is formatted correctly, you can use the first line of styling from the existing form, “<article class="footer-info-col" data-section-type="newsletterSubscription">
Remember to close the form by adding </article> after the last </div> and before </section>
Now, paste the Springbot Embedded Form code between the <article class= and the </article>, select “Save File” and then click Preview to see how your form looks
Once you're done, make sure to publish your changes in your newly saved theme!
- From your Shopify admin, go to Online Store > Themes
- Find the theme you want to edit and click the Customize button for the theme
- Click the Settings tab > Click Add section
- In the Advanced layout area, click Custom HTML > Add
- Click Custom HTML, and enter the HTML code that you want to embed on your home page > Click Save
- You can also refer to this article from Shopify for more help!
- Go to Admin > CMS > Static Blocks
- Pages > select page > content > select insert widget icon > Widget Type “CMS Static Block” > under Widget Options select the Static Block you created for your sign up form > Insert Widget
If you're looking to place your Embedded Form on your WordPress site, please email firstname.lastname@example.org and our team can provide a custom line of code specific for your site that you can use to place the form properly.
After pasting the code on your site, be sure to Activate the Embedded Form on the main Sign Up Forms page and you will be all set!