Customize and Install a Form

Go live and start list buidling

Recently, I've been talking a lot about tinyEmail tools that can help you build a list. In three different articles, I showed you how to start building a form (Embedded, Popup, and Flyout) that feeds subscribers directly into your audience (i.e. list).

This article completes the workflow. You learn how to:

1. customize layout orientation
2. add or remove components
3. configure component properties (e.g. field labels, font color, cell alignment, etc.)
4. install the form

Adjusting layout

A stack of vertical components is the default form orientation. But you can change that or even combine vertical and horizontal layouts.

• Check the arrow in the top left corner of each container. That's the visual clue for orientation.

Click the Content tab and drag a horizontal or vertical container to the canvas. Then drag form components (e.g. a button or email address field) into the container.

Click a component to open the Properties panel and customize the layout inside the container. To achieve a balanced display, adjust the Width percentages to increase or decrease the amount of space allocated to each component inside the container.

Adding components

The default form comes with five components:

1. text component (with default instructions to the website site visitor)
2. first name
3. last name
4. email address
5. submit button

In any form that you build, the only must-have components are Email address and Submit button. The others are optional.

When a subscriber fills in a form and clicks Submit, Email address is the only mandatory field.

To remove a component, hover over the component and click the trash icon.

To add a component, go to the side panel and drag a component to the form builder. In addition to standard items like a text field and submit button, the side menu has components to collect detailed address and contact information (e.g. full mailing address and phone number).

Configuring properties

Each component has its own Properties panel. This is where you can find the default settings and make your own adjustments.

Everything you'd expect is here, including these standard features:

• component labels
• cell alignment and width
• border (width and color)
• font (typeface, color, size)

You can also check a box to hide a component.

Variant

Use the Variant property to customize the appearance of each form field. Pick one of three options:

• outlined
• standard
• filled

Management icons

In the top right corner of the page, click the eye icon to preview your work (desktop and mobile display).

When you complete the form, click the Next button. This moves you to the installation stage, which is called Code.

Installing a form

On the Code page, complete three steps.

Domain

First, enter the domain of the site(s) that will hold your live form, and then click the plus (+) icon. Yes, I know this seems like an extra step (well, because it is), but it's a needed security feature that helps us hold off those dastardly spammers.

• Note  Be sure to paste in your domain with the https:// prefix and remove the backslash at the end of the domain.

You must have at least one Allowed domain to publish a form. After you publish a form, do not delete the Allowed domain(s). If the Allowed domain field is empty, tinyEmail automatically disables the live form.

Copy code

You'll need to do a bit of copying and pasting. Copy the script in the Code box (see the above screenshot) and then paste it into your site (e.g. a footer or sidebar widget on a WordPress site). Pasting the code into a sidebar widget works for any form type, Embedded, Popup, or Flyout.

Publish

Click the Publish button to activate the form. The form should be live on your site (after pasting in the code).

If you click the Unpublish button, the form does not display on the website. Click Publish again to re-activate the live form.

Test the display on your site, and then come back to the tinyEmail Form builder to tweak the appearance and content.