Skip to main content
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, making 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 add new subscribers 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.

Before You Begin

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

  • You must copy and add a short HTML code 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 must finish front-end integration first (it's done automatically for Shopify, Bigcommerce, and Woocommerce once the Omnisend app is installed).

Setup Process

Creating an embedded form is straightforward. To do so, 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.

Using a simple drag-and-drop method, you can customize your embedded form to your liking.

With input and dropdown items, you can collect not only your customers' email addresses but also any other customer-related information such as birth date, phone number, or custom.

You can add text, images, and multiple buttons to your form. 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 can decide where to show this form to a visitor. For example, 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, flyout, or embedded form.

Here, you can adjust your form's width to up to 1000px.

Form color allows you to change the 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, including 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 must finish front-end integration first (for stores on custom platforms).

Embedding the Form

Once you have customized your form, you must enable it to get the code for an embed. We will show you the exact code to copy.

You will also find this code under Behaviour Settings under 'Add code to your website' β†’ Copy.

Once you copy the code, you need to open your theme HTML file and paste it into the part of the page where 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

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

Step 2. Click Add Section β†’ Custom Liquid.

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

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

Integrating with Bigcommerce

This guide works with all themes built according to BigCommerce standards. If your theme has been imported but not built in BigCommerce, you must check with your theme developer to learn how to embed the code.

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

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

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

Step 4. Publish changes. Your form is live now.

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

Integrating with WordPress/WooCommerce

Step 1. Go to your WordPress site and log in to your WordPress dashboard. Here, you can manage all aspects of your store, including adding new form elements.

Step 2. Depending on where you want to embed the form, navigate to 'Pages' or 'Posts' from the dashboard and then select 'Add New' or choose to 'Edit' an existing page/post.


​Step 3. To add the Custom HTML block, click the + Block Inserter icon and search for 'HTML.'

Step 3. Once you’ve added the block, you can paste your code in the provided box, edit it, and preview it within the editor.

In a few clicks, the HTML turns into an embedded form in your WordPress/WooCommerce store.

Working with Subscribers

Customers who use your embedded form will be immediately added with subscribed status to your Audience.

All contacts that use 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 if you want to send a campaign or automation to a specific segment of customers.

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

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

Did this answer your question?