Embedded Signup Form

Learn how to create embedded forms in Omnisend

Ira avatar
Written by Ira
Updated over a week ago

Embedded forms appear consistently on particular pages of your website, which makes subscriber collection easy and seamless. By embedding a form on any page of your website, you can expand your reach, build your contact list, and get new subscribers added directly to your Omnisend Audience.

In this article, you'll learn how to add an embedded form to your site and how to use it to boost your email marketing strategy.

If you wish to learn more about how we sync contacts automatically on selected platforms, go to this article:
​

Contents

Before you begin

  • An embedded form is a way to display your signup form as part of your website.

  • You will need to copy a short HTML code and add it to your website theme code.

  • If you already have a footer form on your website, you don't need to create another embedded form in Omnisend. Contacts that come through your theme form will automatically sync to your Omnisend Audience.

  • For the embedded form to work, you need to finish front-end integration first (it's done automatically for Shopify, Bigcommerce, and Woocommerce once the Omnisend app is installed).

Setup process

The process of creating an embedded form is straightforward. To create an embedded form, navigate to Forms and click Create form.

In the Forms Library, select Embedded Style forms β†’ Select one of the forms templates β†’ click Use template.

You will be redirected to the Form Builder, where you can edit your form and add any additional items you'd like.

By using a simple drag&drop method, you can customize your embedded form up to your liking: collect not only the email of your customers but any other customer-related information such as birth date, phone number, or custom with Input and Dropdown Items. Add text, images, and multiple buttons to your form as well. You can even add a gamified Wheel of Fortune to your form to provide an incentive for the subscription.

On the right-side menu, you will find the Behavior and Theme settings tabs:

Under Behaviour Settings, you can manage Audience and Targeting settings.

Audience management allows you to assign a tag to all contacts who submit the form, which can help further segmentation. You can add an existing tag to the form or create a new one directly in the form builder to segment your contacts afterward. You can read more about contact tags here.

You can also turn on double opt-in here; If enabled, at first, your potential subscriber fills out the signup form, and as a second step, a follow-up email is sent to their inbox for subscription confirmation.

For Page Targeting settings, you get to decide where to show this form to a visitor. You can make the form appear on out-of-stock product pages or not.

Under Theme settings, you can manage the Form layout, Colors, Buttons, and Fields.

Form Layout allows you to change the type of form to a landing page, popup, or embedded form.

Here you can also adjust the width of your form to up to 1000px.

Form color allows you to change Form background and link colors:

If you want to select other colors, click on the + sign under My colors and choose the colors you need from a palette.

πŸ’‘Tip! You can erase the color to have the form fully transparent.

Under Buttons settings, you can manage your button styles for further usage in your form.

For Fields, you can define the style of your input fields, their style, font, size, colors, etc.

Lastly, you can set up Messages that will be shown after successful signup and to customers who are already in your Audience.

That's it! Your form is ready to be embedded; you can read further to learn how to put it on your website.

Note! Embedded forms work for stores on all the platforms, but you need to finish front-end integration first (for stores on custom platforms).

Embedding the form

Once you have customized your form, you need to enable it to get the code for an embed.

You will also find this code under Behaviour Settings:

Once you copy the code, you need to open your theme HTML file and paste the code to the part of the page you want your form to be displayed.

πŸ’‘ Embedded form code snippets cannot be added inside other HTML form elements because our forms use HTML form elements as well, and browsers don't allow having nested form tags inside the page πŸ’‘

Integrating with Shopify

1. Navigate to your Shopify admin β†’ click Online Store β†’ Themes β†’ Customize.

2. Click Add Section β†’ Custom Liquid.

3. Paste the embed code β†’ Click Save, then see the changes. Your form is live now.

Quick tip! Experiment with section placement until you put it where you like πŸ’‘

Integrating with Bigcommerce

This guide works with all themes that are built by BigCommerce standards. If your theme has been imported and not built in Bigcommerce, you'll need to check how to embed the code with your theme developer.

  1. Navigate to your Bigcommerce admin β†’ click Storefront β†’ Themes β†’ Customize:

  2. Drag & drop the HTML block where you want the embedded form to be located:

  3. Paste the embed code β†’ Click Save HTML:

  4. Publish changes. Your form is live now.

Note! The form will only appear when the changes are published.

Working with subscribers

Each customer that uses your embedded form will be immediately added with subscribed status to your Audience.

All contacts that used the embedded form will also get a tag assigned to them. You can check tags while setting up the form. Please note that tags are default and cannot be changed.

As a result of the subscription, your customers will get two tags, one default tag assigned to the embedded form and one default tag associated with sign up - source: sign up form.

Those tags can be used for segmentation in case you want to send a campaign or automation to a specific segment of customers.

Note! πŸš€ Your default welcome automation will be triggered for customers that use the embedded form automatically. You don't need to set up separate welcome automation for them.

If you have any more questions or need help, feel free to contact us at [email protected].

Did this answer your question?