Help

How To Guides

Current Lesson
Course Content
Course Content

Embedded Opt-In Forms

Opt-in forms are a great way to grow your email list, increase conversions, and build an engaged audience. And having opt-in forms that are personal and customized can help a lot. That's why we put together this guide to show you how to customize your opt-in forms in Simplero. 

To Embed an Opt-In Form

  1. Select Contacts from your Simplero Dashboard.
  2. Select Lists from the dropdown menu.
  3. Select the list you want to create the opt-in for.
  4. Click on the Signup forms tab.
  5. Click the red Create new signup form button in the middle or upper right corner of the page.

  6. For the type of signup form, select Embedded.

  7. Choose your template.

  8. Once you've selected your template, you'll be directed to a screen where you can edit the Content, Settings, and Fields of your signup form. In the Content tab, you can edit the form design like the color for Text, Background, Button, and Accent.
  9. After making changes, click the blue Save changes button.

  10. Select the Settings tab for your opt-in and complete all boxes. (Name, Presentation, how it can be viewed, when it can be viewed, etc.)

  11. When you're done, click the blue Save changes button.
  12. Select the Fields tab and select the fields you want from the right side of the page (these are all the fields you've added under Settings >>> Fields).

  13. Go back to the Content tab.
  14. Copy the Embed Code that you'll paste into the source code (or using the Script section) of the page where you want the form to show (your landing page, your website homepage, etc.).


To Embed a Manually-Triggered Opt-In When Using an Image

  1. Select Contacts from your Simplero Dashboard.
  2. Select Lists from the dropdown menu.
  3. Select the list you want to create the opt-in for.
  4. Click on the Signup forms tab.
  5. Click the red Create new signup form button in the  upper right corner of the page.

  6. For the type of signup form, select Embedded.

  7. Select your template.

  8. Once you've selected your template, you'll be taken to the screen where you can edit the Content, Settings, and Fields of your signup form. In the Content tab, you can edit the form design like the color for Text, Background, Button, and Accent.
  9. After making changes, click the blue Save changes button.

  10. Select the Settings tab for your opt-in and complete all boxes. (Name, Presentation, how it can be viewed, when it can be viewed, etc.)

  11. When you're done, click the blue Save changes button.
  12. Select the Fields tab and select the fields you want from the right side of the page (these are all the fields you've added under Settings >>> Fields).

  13. Select the Share tab to get your Embed Code.
    Embeded form.png
  14. Copy the Embed Code and paste it into a Notepad or Word document.
  15. Copy the Manual trigger code.
  16. Go to the Notepad or Word document where you copied and pasted the Embed Code.
  17. Paste the Manual trigger code at the end of the Embed Code you copied.
  18. Go to your Landing page and find the source code for your button image.
  19. Replace "Show the form" on your combined code with the image code from your button image that you just found.
  20. On your Landing page, copy and paste the combined codes (from Embed Code and Manual trigger). It will end up looking something like this: <script async id="_simplero_landing_page_js_77130" src="https://123.simplero.com/page/77130.js"><a rel="simplero-landing-page" href="#"><img src="https://d3pz8y41wq4xyo.cloudfront.net/uploads/asset/file/2232414/Aug-7-normal.png" alt="Aug-7-normal.png" align="" /></a>

To Embed a Manually-Triggered Opt-In to a Button

  1. Select Contacts from your Simplero Dashboard.
  2. Select Lists from the dropdown menu.
  3. Select the list you want to create the opt-in for.
  4. Click on the Signup forms tab.
  5. Click the red Create new signup form button in the upper right corner of the page.

  6. For the type of signup form, select Embedded.

  7. Select your template.

  8. Once you've selected your template, you'll be taken to the screen where you can edit the Content, Settings, and Fields of your signup form. In the Content tab, you can edit the form design like the color for Text, Background, Button, and Accent.
  9. After making changes, click the blue Save changes button.

  10. Select the Settings tab for your opt-in and complete all boxes. (Name, Presentation, how it can be viewed, when it can be viewed, etc.)

  11. When you're done, click the blue Save changes button.
  12. Select the Fields tab and select the fields you want from the right side of the page (these are all the fields you've added under Settings >>> Fields).

  13. Select the Content tab to get your Embed Code. Yours will look similar to this:
  14. Open the Page Editor for the page you'd like to add the button to.
  15. In any text area, open the Source code and paste in the first bit of code. This can be pasted anywhere in the Source code - it doesn't matter where it goes.
  16. Copy the following code and paste it into the Source code of your page, where you'd like the button to show: <a href="#simplero-landing-page-103131" class="btn btn--md btn--solid" >Click Here to Open Opt-In</a>
  17. Replace the bolded text with the second bit of code from step 13.
  18. Change "Click Here to Open Opt-In" to whatever you want the button to say.
  19. Press Ok and Save. Your button now shows up and triggers an embedded opt-in form!

Here it is in action:

Try It Out Here! This Button Is Live!

Last updated 16 Sep 2021.
Previous Lesson How to Setup List opt-in Forms Next Lesson Utilizing More Than One Opt-in Form
Like