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 February 19, 2021

Using a signup form is an excellent way to collect subscribers on a website or a social media platform.  You can create different forms with Benchmark Email, and in this article, we’ll walk you through 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:

  • Free accounts have a limit of 75 signups per day.
  • Paid accounts have no signup limits.
  • 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, are in line 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.
  • As of September 2018, many Google services were blocked in Mainland China. Due to these restrictions, reCaptcha may not work correctly if you are in those affected Chinese regions. You can learn more about this by Clicking Here.

  • Javascript Forms (website tracking included): Changes or updates made to a javascript form will automatically appear on the form on your site.
  • HTML Forms (website tracking included): Changes or updates made to an HTML form will not automatically appear on the form on your site. To see the new changes, you will need to save and publish the form again, copy the new HTML code and last paste the new code on your site.

 

 

Embedded Forms

Here is how to create this signup form:

  1. On the Dashboard menu, select Contacts.
  2. Now, click on Signup Forms from 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 a list, then click 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 your form’s appearance or add additional fields by hovering over the signup form and clicking on the More options icon.
  7. When done, click on Save & Publish.
  8. Your signup form code will then appear, select the type of code you want, 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.
  • The signup form’s max-width on a desktop is 999px. However, if the signup form is opened on a mobile device, the form will autofill to the screen size.

What you can customize

  • You can add a custom width if needed. However, we don’t recommend making changes to the width. By default, your form will span to 100% in the space added.
  • You can change the background color, add a border to your form, and set a corner radius.
  • Click on your form to add images, text, spacers, customize the header, fields, and signup form button.
  • In the Embedded form, you can add as many fields as you need, but we recommend keeping it short.

Need inspiration? Here are signup forms made in Benchmark.

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 can only collect email addresses, first names, and last names.

Here is how to create this signup form:

  1. Sign in to your Benchmark account.
  2. On the Dashboard menu, select Contacts.
  3. Now, click on Signup Forms from the Dashboard menu.
  4. Click on the Create New Signup Form button on the right side of the page.
  5. Select the Small Embed 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. Your signup form code will then appear, select the type of code you want Javascript or HTML copy, and paste on your site.

What you can customize

Because this is a compact size signup form, it is limited to only 3 fields, the first name, last name, and email address field. This signup form does not support images.

  • You can add a custom width if needed. However, we don’t recommend making changes to the width. By default, your form will span to 100% in the space added.
  • Customize the form background color, header, and button style

Need inspiration? Here are signup forms made in Benchmark.

Back to the top

How to set the Small Embed Form horizontally

Small embed forms only allow 3 fields, first, last name, and email address. This is why we only recommend altering the small embed form code; we encourage you to keep a two-field minimum. If your web design allows it and you need it, you can activate the last name field.

Follow the steps below to set the small embed form horizontally.

We will start within the Signup Form tool

To create the horizontal form, you will need to have an already made small embed form.

  1. Once your form is done, you can click on Save & Publish.

  1. Confirm the changes and, in the popup, click on the drop-down menu and select the HTML Code.
  2. Click on the Copy option. The copy option selects the whole code.

  1. Close the popup window and go back to the home dashboard by clicking on the Benchmark logo on the top left.

The process will now continue within the Code Editor; this part is optional as you can also use a text file.

  1. Now, let’s go to the Emails dashboard.
  2. Click on the Create New Email button, and then select Regular Email
  3. Very important step: Choose the CODE EDITOR.

  1. Write a name for your email, this is only for testing purposes; you are not going to send this campaign. When you are finished, we recommend deleting the email or leaving it as is because the code could change.
  2. You don’t need to fill the checklist. Go directly to the Design Email option.

  1. Replace the existing text on the left with the HTML Code you previously copied from your small embed signup form. You will see your signup form on the right screen.

Don’t worry about the footer you see now. This will not be displayed when you copy your code in the end.

  1. Now, use your keyboard to search the fields. If you are on mac cmd+f, or windows ctrl+f.

This is an example of what we are actually looking for:

  1. In the search bar type: fieldset OR the name of the field (ex. First Name). If you looked for fieldset, you will find several fieldsets, but we are looking for this one:

<fieldset class=”formbox-field 

The first one followed by: class=  

You’ll be able to recognize it because it has the name of the field. Look at the image above; the field name is highlighted in blue.

  1. Now we can edit. BEFORE the tag <fieldset you will add the following (you can copy and paste)

<table><tr><td>

  1. Once done, you have to close the tag by adding at the end of the field:

</td>

Identify the end of the field with this tag: </fieldset>.

  1. Go to the next field and add before the tag:

 <td> 

  1. If you have one more field (last name field), add the <td> at the beginning and close with </td>
  2. At the end of your last field close with the tags:

 </td></tr></table>

  1. You will see that your form is now horizontal, and the last thing to do is delete the width.
  2. Let’s take out the search bar again and look for the width we are looking for this:

width: 320px

Once you find it, DELETE it from the code, do not delete anything else.

This is how the code will look like in the end:

Notice we highlighted the tags added in blue. Also, the width attribute was already removed, and you can see the form horizontally.

  1. The form is ready! Copy the whole code and paste it into your website.

If you are more of a visual person, follow the steps in code editor from this video:

 

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.

Here is how to create this signup form:

  1. On the Dashboard menu, select Contacts.
  2. Now, click on Signup Forms from 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.

Please note the following:

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

What you can customize

In this form, there is more to customize than just the form. You can also edit the Success message. Remember, this is a form you set to popup when a new visitor visits your site. Although you can add many fields to the form, we suggest keeping your popup form short to quickly collect more subscribers.

  • You can choose the popup position where your form will be displayed: centered is usually selected.
  • You can set a new width.
  • You can add animation! Your form can slide in from the left, up, right, down, expand, or fade in.
  • The delay allows you to set a time when the form pops up. The options available are from no delay time to 60 seconds.
  • Like the other forms, you can also customize color, border, and corner radius, and for this type of form, you can add a shadow and choose the opacity and size.
  • Visitors can close the popup window if not interested. Customize the close icon position, color, type of icon, background, border, and more.
  • The overlay, by default, is black with 70% opacity. This is the background behind your form when it is displayed. You can customize the color, opacity and even disable it if you don’t need it. We recommend that you keep the overlay to give your form a more dramatic visual.
  • Click on the form to add images, text, spacers, customize the header, fields, and signup form button.
  • Click on the Success option to customize the message. You can change the font, color style, text, and background.

Need inspiration? Here are signup forms made in Benchmark.

Back to the top

 

Does the popup form appear more than once to already signed up users?

Our popup forms are set by default only to appear when a visitor has not yet signed up. Once a visitor signs up, the popup form will not appear again. However, if the returning visitor clears their browser cache or uses incognito mode or another browser, the popup form will appear again.

How to set a popup form to appear only once?

  1. In the Design step of your signup form, click on Global Settings
  2. Then, click on the Close option. 
  3. Now, select the Show popup only once to visitor option.
  4. Last, click on Save and Publish.

If the signup form is used on multiple pages, the rule of showing only once still applies.

 

Back to the top

 

Classic Form

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.

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 that should be linked to the Signup Form.
  2. Click on edit once the list is opened.
  3. You can see all of the fields for 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 with 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 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 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

Important

If you know CSS, you can also add your own code and add an extra touch to your signup forms.

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


Did this answer your questions?
You already voted!

Can't find what you're looking for?

Submit a Ticket

view ticket history