Create Embedded Forms

Create Embedded Forms

Are you growing a list of subscribers or leads with a form on a website? 

If yes, I've got great news. You can build an embedded form with tinyEmail and paste the code on your website. That means you can add subscribers directly to your tinyEmail audience. With our handy dandy integrated forms tool, there's no need to export lists from another service and import subscribers into your tinyEmail list. 


tinyEmail embed forms


Other forms

This article shows you how to build and deploy an embedded form. If you're looking for something less static and more dynamic, check out these form options:
Oh, BTW, we also have a growing library of prebuilt forms. Click to learn more about these templates.

To build a flyout form, add an audience and create the structure. After that, quickly customize the design and install the code into your website.

Starting a form

The first step is to launch the workflow and assign an audience. The audience database is where you build your subscriber list. 

  1. Log into your account and click Forms on the top menu.
  2. Click the Create form button.
  3. In the pop-up window, enter a unique form name.
  4. Select an existing audience. 
  5. Select an audience where your customers will be added. Optionally, you can create a new audience (see below).
  6. Click the Save & Continue button to open the Form builder.

Creating a new audience

If you don't want to connect the form to an existing list, create a new audience. 

  1. Click the subscriber field.
  2. Enter a unique name for the new audience (i.e. list).
  3. Click the plus (+) icon and Save & Continue

add form list


The first step is now complete! 

Creating the Embedded form

When the Form builder opens, you'll see four menu tabs at the top of the screen. Each tab opens a different set of controls and customization options.

  • Appearance  Customize the form's shape and design (see below).
  • Content  Add or remove form fields and configure component properties (we show you how in a different article).
  • Editor  The form builder canvas.
  • Preview  Quickly see what the form looks like.

The Form builder page doesn't have an auto-save function. That's because the changes you make to a published form automatically appear in the live form (e.g. on your website). If you're working on a draft or unpublished form, be sure to click Save at the top of the Code page.

Appearance

Form type

Under the Form type heading, you'll find three options. Select Embedded.

choose form type

Selecting a trigger

Unlike the other form options (popup and flyout), the embedded form is static (but responsive). It's not possible to set a trigger for this form.

Form details

Scroll down to the Form details heading. This is where you can customize the size of the forms. Adjust the width and height so that the form looks good on your site.  

  • Pro tip  I suggest leaving the Width and Height fields blank. This best practice allows the form to adjust automatically to the UI environment (e.g. footer, sidebar widget, etc.) and produce the optimal display. 

choose for trigger


Customize the background color or leave it blank (neutral). Use the color picker to select an option. Open the font selector and choose a specific typeface or leave the default Inherit option enabled. If you select Inherit, the form's code picks up the default font on your website, a time-saving feature that helps maintain a consistent look on your site.

  • FYI  Any changes you make to a published form appear almost instantly on your site's live form. If you can't see the changes, refresh the website page.  

Form success message
Add a short message that lets subscribers know they were added to the list.

add form message

Add a Redirection URL
You may also specify a redirect URL. Once the success message is displayed, users will be automatically redirected to the provided URL.

Enable double opt

When double opt-in is enabled, users will receive a confirmation email. They must click the link in the email to become a subscriber.



Final steps

Now that the embeded form structure is ready to go, click here and 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. Copy the form code to install on your site.


    • Related Articles

    • Create Flyout Forms

      Need a signup form that doesn't hinder the user experience? Take a look at the tinyEmail flyout form. Customizable, mobile responsive, and sticky, the flyout option appears in the bottom right corner of every page and has a minimal impact on site ...

    • Create Popup Forms

      Need a signup form with some pop? Then you should try the tinyEmail popup form. Our Popup option hovers a sticky form on every web page. It's designed to be a call to action (CTA) that, well, isn't easy to ignore. Other forms Looking for a different ...

    • Create and Send Email Campaigns

      How to Create and Send an Email Campaign in TinyEmail This guide walks you through the steps to create, design, and send an email campaign using TinyEmail. Follow the instructions below to launch your first campaign quickly and confidently. Overview ...

    • Create a New Email Template

      Create a New Email Template Build beautiful templates in 3 minutes Fun fact about time allocation. Before tinyEmail, we were spending about 75% of our email marketing time playing around with email design tools and 25% of the time crafting meaningful ...

    • How to Create Anchor Links

      How to Create Anchor Links Help readers jump to content Anchor links are a reader-friendly feature that should be part of your email design toolkit. They improve readability and the user experience. Readers can skip the fluff and jump to the content ...