Customize and Install a Form

Go Live and Start List Building

Now it’s time to take things further. This guide walks you through customizing your form, adding components, configuring properties, and installing it on your site so you can start growing your list like a pro.

Here’s what you’ll learn:

• Customize layout orientation
• Add or remove components
  
• Configure component properties (e.g., field labels, font color, cell alignment)
  
• Get the code to Install the form on your website
  

Adjusting layout

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

Look for the arrow in the top-left corner of each container — it shows the current orientation.

To customize the layout:

1. Click the Content tab.
   

2. Drag a horizontal or vertical container onto the canvas.
   

3. Drag form components (like a button or email 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
   
   

Note: When building a form, the only must-have components are:

• Email Address

• Submit Button

All other components are optional and can be added based on your needs.

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
• 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 form on both desktop and mobile displays.
Once your form is complete, click the Next button to proceed to the installation stage, referred to as Code.

Installing a form

On the Code page, complete three steps as mentioned below 

1. Adding Your Domain

First, enter the domain of the site(s) where your live form will be hosted, then click the plus (+) icon. Yes, it may seem like an extra step, but it’s a necessary security feature that helps prevent unwanted spam submissions.

Note:

• Be sure to paste your domain with the https:// prefix.

• Remove any trailing slash at the end of the domain. (\)

• Include www if your site uses it (e.g., https://www.example.com).

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.

Testing Your Form Submission

• The form displays the success message after submission

• If a Redirection URL is configured (if required), the user is redirected correctly
  

• If Double Opt-in is enabled, the user receives the confirmation email and can complete the subscription by clicking the link
  

Verify Test Subscriptions