×

Get in Touch

Need a hand? We've got you covered.

Knowledge Base Home aero-right Signup Forms aero-right How to create a Signup Form

How to create a Signup Form

Signup Forms Updated on May 21, 2019

Using a signup form is an excellent way to collect subscribers on a website or a social media platform.  There are different forms that you can create with Benchmark Email, and in this article, we’ll walk you through on how to create a signup form for each form available.

Click on the form you want to create below.

Before getting started, please note the following:

  • The Full Embed form is not available for clients using our old interface.
  • The new Embedded Form replaced our Classic Signup Form in our new interface. It has all of the same functionalities as the classic form.
  • Embedded forms, as the name suggests, is inline with the site. It will be nested among the other elements or sections on the site.
  • If you need to delete a section in your signup form, open the form in the editor and hover over the specific section, you’ll see a trash bin. Click on it to delete the section from your form. Option not available for the Classic Signup form.

 

 

Embedded Forms

Here is how to create this signup form:

  1. On the Dashboard menu, select Contacts.
  2. Now, click on Signup Forms form the Dashboard menu.
  3. Then, click on the Create New Signup Form button on the right side of the page.
  4. Select Embedded Form, and click Next.
  5. Give your Signup Form a name and select Save & Next
  6. Create and edit your signup form
    • You can edit the Opt-In message by clicking the Opt-IN Settings option on the top left.
    • Change the appearance of your form or add additional fields, by hovering over the signup form and clicking on the More options icon (3 dots.)
  7. When done click on Save & Publish.
  8. Then your signup form code will appear, select the type of code you want, either Javascript or HTML then copy and paste on to your site.

Important

  • If you don’t set pixel width, the form will fill 100% of its width area.
  • URL Version Max width is 600px.

Back to the top

 

Small Embed Forms

Before getting started, please note the following:

  • The width is dependent on where you decide to place your signup form on your website.
  • The Small Embedded form, only collects Email Address, First Name, and Last Name.

Here is how to create this signup form:

  1. Sign into your Benchmark account.
  2. On the Dashboard menu, select Contacts.
  3. Now, click on Signup Forms form the Dashboard menu.
  4. Click on the Create New Signup Form button on the right side of the page.
  5. Select the Popup Form style and click Next.
  6. Give your form a name and select a contact list.
  7. Click Save & Next.
  8. Create and edit your signup form.

When done click on Save & Publish. Then your signup form code will appear, select the type of code you want Javascript or HTML copy and paste on your site.

 

Back to the top

 

Popup Forms

These types of forms will pop up when a visitor visits your page.  It will grey out the page and overlay the signup form on the page.

Before getting started, please note the following:

  • The Pop Up Form is 400px wide by default with 40px padding on the left and right. The maximum image area for is 320px. However, if the image takes up the full width you can change it if needed.

Here is how to create this signup form:

  1. On the Dashboard menu, select Contacts.
  2. Now, click on Signup Forms form the Dashboard menu.
  3. Then, click on the Create New Signup Form button on the right-side of the page.
  4. Select the Popup Form style and click Next.
  5. Give your form a name and select a contact list
  6. Click Save & Next.
  7. Create and edit your signup form
      • You can edit the Opt-In message by clicking the Opt-IN Settings option in the top left.
      • Set your popup settings, by clicking on Global Settings and then edit the options available.
  8. When done click on Save & Publish.

Back to the top

 

Use this work around to set your pop up form to appear just once for returning visitors.

After your popup form has been created, saved and published, you’ll need the HTML code. To get the HTML you must first publish your signup form.

  1. Click on the drop down menu and select the HTML Code.
  2. Copy&Paste the SignUp Form Pop-Up HTML code to a text file.
  3. Then Search for the following text: “verticalCenter(signupFormContainer);” then copy and paste the following thread in red after the last semicolon: localStorage.setItem(“bmePopupFormSignedUp#SIGNUPFORMID#”, “true”);
  4. Once copied change the #SIGNUPFORMID#” to your sign up form ID, which is located in the URL of the sign up form.
  5. When done you may copy your updated code and paste into the desired pages.

*Please note nothing else should be removed or modified from the HTML Code, only added.

 

Back to the top

 

Classic Form

Before getting started, please note the following:

  • The classic form is an older form that is similar to the Embedded Forms. However, the style of the classic form is dated.  
  • Our Embedded Form has replaced the Classic Signup form.
  • You can duplicate existing classic signup forms, but can’t create any new ones.
  • The Classic Signup form is only available to users using our old interface.

Follow these instructions to create a classic form:

  1. Sign into your Benchmark account.
  2. On the Dashboard menu, select Contacts.
  3. Now, click on Signup Forms form the Dashboard menu.
  4. Click on the Create New Signup Form button on the right-side of the page.
  5. Select Classic Form type and click Next.
  6. Give your form a name and select a contact list
  7. Click Save & Next.
  8. Create and edit your signup forms.
Select a template you wish to use.
  9. Customize the fields you wish to have on the form.
  10. Customize the form button, text, and colors then click
  11. Save & Next.
  12. Setup the opt-in email
  13. 
Lastly, copy and paste the code to your website or blog.

Back to the top

 

How to create GDPR compliant Signup Form

Adding a checkbox for GDPR compliance is a 2 step process, please see the steps below.

  • Editing an extra field in a contact list.
  • Adding the checkbox in the signup form.

Extra Field in the contact list

  1. Create a list which should be linked to the Signup Form.
  2. Click on edit once the list is opened.
  3. You can see all the fields of the list. Scroll to the extra fields and select  one to edit. You can rename for example, Privacy Policy.
  4. Change this edited field type to True/False. This is to record the yes or no as the response provided for the opt-in.

 

Once the field type is edited, we need to create the signup form compliant to GDPR.

Adding the checkbox in the signup form

You can use the Embedded Form or Popup Signup Form for this.

  1. Create a signup form(you can also use an existing one).
  2. Then, select the list you created above with the edited field. On the second step of the signup form creation process Add the field we edited in the previous step.
  3. Hover over the signup form between the name and email address field and click on the 3 dots where you want to add the field.
  4. Then click on Select Fields, and check the extra field you created.
  5. Now, click on the back arrow, and you’ll see your selected field.
  6. Click on the field.
  7. Give a name to your field (optional since you changed the field name in the list), an example Privacy Policy.
  8. Change the Type to Check.
  9. Mark this field as Required.
  10. In the Answer Field, add the following piece of code.<a target=”blank” href=”https://www.yourdomain.com”><u>Privacy Policy</u></a>Note: Replace https://www.yourdomain.com with your site’s privacy policy page.

Continue editing your form or click on the Save & Publish option when done.

Important

  • The href link mentioned in the point #8 must be the policy link to your website.
  • The above checkbox cannot be created using the Small Embed form as it is not supported.

You can also refer to the following videos for a detailed walkthrough.

  • Full Embedded Signup Form (new interface only)

  • Classic Signup Form (old interface). Click here to watch the video.

Back to the top

If you have additional questions, please feel free to contact our support team via Email, LiveChat or Phone.

Did this answer your questions?
8 7

Can't find what you're looking for?

Submit a Ticket

view ticket history