From the main dashboard, click Signup Forms from the left navigation when you hover over the Audience tab. Click Create Signup Form in the upper right-hand corner.
Configure Page
Enter a name for your Sign Up Form (i.e., Embedded Form)
Type: Select Embedded Form
Select which email list(s) you’d like new subscribers to land in. This will default to Pop Up List.
Pages: This step can be ignored for the embedded form. The form will appear wherever you embed the code on your site (instructions on that below!)
Click Next to proceed to the Design Content page. Once you’ve selected Embedded Form, click Next to proceed to the Content Page to begin designing your embedded form. You’ll see a default template to help get you started.
Form Design Page
We recommend keeping a simple design and clear call-to-action when creating an embedded form. The button color will default to the button color chosen in the Template Defaults in your Store Branding. To edit the default Label text, highlight the input form and edit the Label text field on the right-hand side:
Success Page
When a new subscriber successfully subscribes via your 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:
Review Page & Activation
Once your embedded form is complete, select Copy Embedded Form Code. Once you've copied the code, click Save and Exit and proceed to the backend of your website to paste the code.
Don't forget to activate your embedded form in Springbot once you've pasted the code on your site!
Please note, if you make edits to your embedded form, you will need to embed the code again on your site. It will not update automatically.
Embedding the code on your site:
Shopify
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!
Magento
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
BigCommerce
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!
WordPress
If you're looking to place your Embedded Form on your WordPress site, please email help@springbot.com and our team can provide a custom line of code specific for your site that you can use to place the form properly.