Benchmark Email Help Center

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 September 23, 2022

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.

If you prefer a video tutorial, watch this video.

Before getting started, please note the following:

  • Free accounts have a limit of 75 signups per day.
  • PREMIUM accounts have no signup limits.
  • 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.
  • If you know CSS, you can also add your own code and add an extra touch to your signup forms.
  • If the changes are not applied, clear your browser cache and try again.
  • If a signup form is not collecting new contacts, make sure the correct form is on your site.

Embedded Forms

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. This form is designed to help you collect as much information as needed from your subscribers, and you can also modify the signup form to be GDPR compliant.

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 999 px. 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 100% of the space added.

To change the width see the steps below:

  1. Go to an existing embedded form. In Step 2, click on Global Settings.
  2. Then click on the Custom Width option.
  3. Add in your new width.
  • 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, and 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

By using our quick builder you can create forms that fit in footers and sliders, with Opt-In Settings available

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.

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.

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 the 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.
  1. Click Save & Next.
  2. 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.
  3. When done, click on Save & Publish.

Please note the following:

The Popup form is 400 px wide by default, with 40 px padding on the left and right. The maximum image area is 320 px. 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.

To change the width see the steps below:

  1. Go to an existing embedded form. In Step 2, click on Global Settings.
  2. Then select Settings.
  3. Add in your new width.
  • You can add animation! Your form can slide in from the left, up, right, down, expand, or fade in.
  • 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, and 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, and 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.
  • The delay allows you to set a time when the form pops up. The options available are from no delay time to 60 seconds.

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 the visitor option.
  1. 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 ↑


Can My Popup Form Have a Delay Time?

Popup forms can be set to have a short delay when a visitor comes to your website or any page on which you’ve placed a signup form. The delay option is in step 2 Design of the form creation process.

Follow the instructions below to apply a delay to your popup signup form:

  1. Go to an existing popup form.
  2. Now, click on Global Settings on the top left, then select Box Settings. Change the delay time under Delay.

You can continue editing your signup form when done click on the Save and Publish option.

Back to the top ↑


Third-Party Forms

Create Forms through integrated plugins:  

  • Facebook – Create & add Signup forms to your Facebook profile or fan page.
  • Unbounce – Connect your Signup form to any Unbounce list you wish.
  • WordPress – Add Signup Forms to your WordPress site by using our plugin app.
  • Twitter – Easily add your Benchmark Signup Form as a link in your Twitter profile.

Back to the top ↑


Can Signup Forms Be Used in Emails?

Email clients consider having signup forms within emails a security risk. While some email clients warn you of potential danger, others outright disable the signup forms.

Therefore, there is no option to add a signup form in your Benchmark emails.

Instead, we recommend sending your contacts to a signup form on your website. This is the safest, most reliable solution to pairing an email message with a form. In addition, more people will see it and be able to use it. As a result, engagement will increase.

CONSIDER

While you can’t place a signup form in an email, you can certainly add the signup form’s unique URL to your email campaign. The Embedded Form provides you with a web link that is not limited to only your site, take that URL and share it in multiple channels to see your subscriber list grow.

To get your signup form URL click on the Get URL option. Then click on Copy, and the URL will be copied to your clipboard.

You can take the form’s URL and share it on any site. Contacts added through the signup form will still be added to your contact list.

Back to the top ↑


If you have any questions, please contact our support team.