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.

Configure Page

  • Enter a name for your Sign Up Form (i.e., Embedded Form)

  • Select which email list(s) you’d like new subscribers to land in. This will default to Pop Up List.

  • Type: Select Embedded Form

  • 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.

Content 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

  1. From your Shopify admin, go to Online Store > Themes

  2. Find the theme you want to edit and click the Customize button for the theme

  3. Click the Settings tab > Click Add section

  4. In the Advanced layout area, click Custom HTML > Add

  5. Click Custom HTML, and enter the HTML code that you want to embed on your home page > Click Save

  6. You can also refer to this article from Shopify for more help!

Magento

  1. Go to Admin > CMS > Static Blocks

  2. 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

  1. From your Big Commerce admin, go to Storefront -- this should take you to the "My Themes" section

  2. 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"

  3. Next, under "My Themes", you should see your newly saved theme listed first. Click on the three dots (...) and select "Edit Theme Files"

  4. 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 “-->”

  5. 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">

  6. Remember to close the form by adding </article> after the last </div> and before </section>

  7. 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.


Did this answer your question?