Customizing Signup Forms

Customizing Signup Forms

From the customization screen, you can design the overall look of your signup form. In this section, we'll go over various levels of customization, including editing fields, adding a logo, adding background images, changing colors, font styles, adding a CAPTCHA, and more.

To customize your signup form:

  1. From the navigation toolbar, choose Lead Gen and select Lead sources
  2. Select the Signup Form associated with your desired mailing lists or create a new form by clicking Create form.
  3. Click the Edit icon that corresponds to the signup form you want to customize.
  4. Navigate through the form to edit the following:
      • Customize fields - Customize or add new fields to ask leads for more information.
      • Add special elements - Add your lists, and CAPTCHA.
      • Customize layout - Add your logo, customize colors, and change the font style.

Customize fields

Any extra information about a lead can be collected through custom fields. These fields may be used to collect anything you choose, including phone numbers, gender information, diet, and political affiliation.

To add custom fields:
  1. Toggle the switch present in the top-left corner to Fields.
  2. Click  next to Customize Field to add a custom field.
  3. Now, a pop-up called Add custom fields will appear. Fill in the following information:
    • Display label - Give a name to the custom field.
    • Field length - Give the length of the field.
  4. Click Save to confirm.


Edit field:
  1. Toggle the switch in the top-left corner to Fields.
  2. Click the Settings icon on the left of each field by hovering over the field.


  3. The Field Properties pop-up will appear, which displays the following elements:
    • Field Name - The name of the field.
    • Field Title - The title of the field that will be displayed to leads. Make sure you give a name that helps leads understand the purpose of the field easily.
    • Mark as required field - Choose whether to make a field mandatory for leads to fill in.
    • Mark as hidden field - When a lead tries to sign up through a form, the hidden fields auto-fill themselves. Later, you can filter the leads based on hidden field and create segments to target a set of leads.

You can add the company logo to your signup form. If you are sharing your signup form on Twitter, this may help your leads easily recognize your brand.

To add logo:

  1. Click on Add Logo in the signup form.


    The Image Gallery pop-up will appear, where you can either choose a file from the recently uploaded images or from your image library.

  2. Click Upload on the top-right corner of the pop-up to upload new images to the image library.
  3. Choose an image file from your computer, then click Add.

Edit/Delete logo

  • To edit a logo, click the Change link located below the logo.
  • To delete a logo, click the Delete link located below the logo.

Note:

The maximum size for the image is 1024 x 1024 pixels. The maximum file size is 1MB, and supported image file types are *.png, *.jpg, *. Jpeg, *.gif, *.bmp.

Customize layout

Customize your signup form using design tools. You can change the font type, font color, or size.


Page

  • Background Color - Add color to the page's background to complement the rest of your page.

  • Font - Edit the font type and color.

  • Padding - Increase and decrease the space between the page border and content body by adjusting the pixel padding.

  • Background Image - Instead of a background color, you may choose to have a background image.

Heading

  • Background Color - Add a background color to the heading of your signup form.

  • Font - Edit the font style and color.

  • Padding - Increase and decrease the space between the page border and content body by adjusting the pixel padding.

  • Border - Add or remove a border, increase or decrease the border thickness, and customize the border as solid, dotted, or dashed.

Body

  • Background Color - Add a background color to the signup form body.

  • No Fill - If you don't want a background color, click the No Fill icon.

  • Padding - Increase and decrease the space between the page border and content body by adjusting the pixel padding.

  • Font - Edit the font type and color for the body text.

  • Border - Add or remove a border, increase or decrease the border thickness and customize the border as solid, dotted, or dashed.

Form

  • Field Color - Change the background color for your fields.
  • Field Title - Change the field title's font size, style, and color.
  • Field Text - Change the field text's font size, style, and color.
  • Field Border - Customize the border thickness, color, and style.
  • Required Text - This is the privacy policy at the foot of your signup form. You can decide the text color, font size, and style.

Button

  • Font - Edit the body text font type and color.
  • Border - Customize the border thickness, color, and style.
  • Border Radius - Change the button's area and corners.
  • Padding Right and Left - Increase and decrease the space on the sides of your button.
  • Padding Top and Bottom - Increase and decrease the space on top and bottom of your button.

Logo

Align the logo to the left, right, or center, as well as increase or decrease the logo size with the elements provided.

Add special elements

The Add Special Elements option is located below the Field Customization option. The following options are available:

  • Privacy Policy

To stay compliant with GDPR, it is recommended to provide your company's privacy policy in your signup forms. Privacy policy is like a statement of trust that you give to the leads of the signup form.

You can edit the privacy text by selecting the checkbox for Privacy Policy under Add Special elements.


On clicking the icon, a popup will be displayed where you can enter the display text and the privacy policy URL.


  • Privacy Note

It is better to provide a privacy note in your signup forms. You can edit the note by directly entering the text in the text area. You can completely remove the privacy note by unchecking Privacy Note element in the Add Special Elements section.


  • Multiple list subscription

    Multiple list subscription lets leads join other mailing lists via the signup form you have created. All you have to do is just link the mailing lists in the signup form. Follow the below steps to do this.

    1. Toggle the switch present at the top-left corner to Lists.
    2. Enable the option Multiple List Subscription under Add Special Elements.
    3. Drag and drop the desired mailing lists onto the form.
  • CAPTCHA

reCAPTCHA protects your mailing list from spam bots by differentiating between humans and bots. reCAPTCHA requires users to pass a simple test designed to be easy for humans but impossible for bots. Zoho Campaigns allows you to add reCAPTCHAs to your sign-up form to prevent spam bots from joining your mailing list.

Advantages

  • Prevents fake signups by spam bots.
  • Assures your leads that their email address will be kept safe.
  • Keeps personal information safe from spam bots.
  • Simpler than CAPTCHA (where the lead is asked to enter text given in a box in a distorted font or to solve a simple math problem). reCAPTCHA just requires the leads to click a checkbox.

Disadvantages

  • Though reCAPTCHAs can prevent spam bots from joining your list, it doesn't stop human spammers. To protect against this type of attack, we recommend a sign-up form confirmation (double opt-in).
  • Some people may find that reCAPTCHA takes up a lot of space in their sign-up form or reduces their sign-up rate. If you encounter these issues, you can disable it at any time, though we do not recommend it.

CAPTCHAs are enabled by default but you can disable it by unchecking the checkbox.

More options

Preview Form

Change Template

Reset Form


  1. Enter the note to be displayed in the screen
  2. Enter the text for the link that will redirect to your privacy policy.
  3. Enter the URL of your privacy policy
  • Click the Preview button located at the top of the customization page to see a preview of your signup form.
  • Click More in the top-right corner and select Change Template from the dropdown options.
  • Click More and select Reset Form to reframe the form from the beginning. Doing this will cause you to lose any and all the saved edits to the form.
  • Click Save and Proceed once you are done with the customization to continue to the next process.

    • Related Articles

    • Creating signup forms

      It is always easier to change an existing template than to start one from scratch. Unless you have a very specific need, we suggest choosing a template from our gallery.  To navigate to signup form templates: From the navigation toolbar , choose Lead ...
    • Customizing signup pages and emails

      Zoho MarketingHub lets your leads update their profile, tell a friend, and resubscribe and unsubscribe via email footer links. The link to do all these activities will be present at the footer section of the email that you send. On the create ...
    • How to create my first signup form?

      Once you create your Zoho MarketingHub account, we’ll take you to our welcome page, where you can start with creating your first signup form. To create a signup form, On the Welcome page, click the Create signup form. Signup form creation is divided ...
    • Understanding forms

      Form is a simple yet effective way of gathering leads and growing your mailing lists. Easy to create and host, sign up forms are the best way to grow your lists long-term.  Zoho MarketingHub holds three types of signup forms to meet your ...
    • Signup form reports

      You can view the number of visitors who have submitted and confirmed their subscription. The following data is represented in the form of a doughnut chart: Form Views - Number of visitors who have visited pages embedded with your signup form. ...