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.

Deleting a form

To permanently remove a form, go to the Forms page, check the box next to the form name, and click Delete.

When you delete a form, two things happen:

• The form is gone forever. There is no Undo button.
• The form stops working on your site, however, the code remains. You need to go back to your site and remove the code manually. 

Contact information for any subscribers you collected with this form remains intact. Audience information does not change if you delete a form.

Test the form integration

Now that the form is live on a site, let's run a test and see what happens in the backend.

Confirmation message

First, go to your site, fill in the fields, enter a test email, and click Submit. In the example below, the test subscription looks correct because the form displays our success message.

Subscribers

Come back to tinyEmail and click Audience on the side menu, locate the audience attached to the form, and verify the test subscription.

The screenshot below shows the number of subscriptions. In our example, one is the perfect number because this is a new list, and we ran one test.

To verify subscriber information, click the name of the audience (in this case, Coffee Lover List) to display the subscriber list and the information collected in the form fields.

Form status

Finally, click Forms on the side menu and confirm the form's status. The page shows one of three status options:

• Inactive  A published form was unpublished. The code remains unchanged, but the form is not visible on the website and cannot accept new subscribers. Click the Publish button to change the status to Active.
• Active  The form is live and can accept subscribers.
• Draft  The form is a work in progress. It is not live or published.

That's it!

Happy list building with tinyEmail.