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).
For Shopify users: The Omnisend App Embed must be enabled in your theme for embedded forms to work. Learn more about Shopify App Embed.
Setup Process
Step 1. Navigate to Forms and click Create Form.
Step 2. In the Forms Library, select Embedded forms → Select one of the forms templates → Click Use template.
Step 3. You will be redirected to the Form Builder, where you can edit your form and add any additional items you'd like.
You can easily customize your embedded form using a simple drag-and-drop editor.
In addition to collecting email addresses, you can use input and dropdown fields to gather other customer information, such as birth date, phone number, or custom properties.
You can also enhance your form with text, images, multiple buttons, or even a Wheel of Fortune to gamify the experience and incentivize subscriptions.
Step 4. Review and adjust your Form Settings.
On the right-side menu, you will find the Behavior and Theme settings tabs:
Behavior Settings
Audience management: Assign a tag to contacts who submit the form for easier segmentation. You can add an existing tag to the form or create a new one directly in the form builder. Read more about contact tags here.
You can also enable double opt-in or reCAPTCHA to ensure that your form collects only valid subscribers. Learn more about double opt-in and reCAPTCHA.
Targeting settings: Decide whether the form should appear on out-of-stock product pages.
Theme Settings
Form Layout: Choose the form type (pop-up, flyout, embedded, or landing page) and adjust the width (up to 1000px).
Form styles: Customize corner radius, border width, style, and color.
💡If you want to use custom colors, click on the + sign under My colors and choose the colors you need from a palette.
Buttons: Style the form buttons to match your branding.
Fields: Customize input fields, including font, size, colors, and more.
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 embed.
Note: Embedded forms work on all platforms, but if you're using a custom platform, you’ll need to complete front-end integration first.
Embedding Code
Once you’ve customized your form, you need to enable it to generate the embed code.
Click Enable in the top menu. You’ll see the Options to choose how to embed your form:
Shopify – If your ecommerce platform is Shopify, you’ll see dedicated steps and automatic redirects to help you embed the form.
Manual – If you use a different ecommerce platform (e.g., WooCommerce, BigCommerce, etc.), you’ll receive an embed code that must be added to your store’s admin panel.
You can also find the embed code later by clicking Behavior Settings → Show setup instructions → Choose how to embed your form → Select Shopify or Manual.
Note: Embedding forms isn’t a one-size-fits-all solution, as it often requires adjustments based on your store’s theme. For detailed, platform-specific guidance, refer to the documentation below for your ecommerce platform: Shopify, BigCommerce, or WordPress/WooCommerce.
Embedding the Form in Shopify
Step 1. In Omnisend, click Enable → Select Shopify as your embedding method → Copy the Form ID → Click Open Shopify settings.
You’ll be redirected to your Shopify admin.
Note: If the Omnisend Embedded Form app embed is not enabled, you’ll first be redirected to App embeds to enable it. Once enabled, return to the theme editor to continue. Learn more about Shopify App Embeds.
Step 2. In Shopify, locate the newly added Omnisend Embedded Form section (usually at the bottom of the theme layout) → Click the section → Paste the Form ID.
Step 3. Drag and move the Omnisend Embedded Form section to your preferred location within the theme layout.
💡 Tip: Experiment with different placements to position your form in a visible and engaging area for your website visitors.
Step 4. Click Save in the top-right corner of the Shopify theme editor.
Your form will now be visible on your storefront.
Manual Embedding in Shopify:
If needed, you can always embed the form manually using the embedding code.
In Shopify admin, go to Online Store → Themes → Edit theme.
Click Add section → Select Custom Liquid.
Paste your embedded code → Save your changes.
Embedding the Form in BigCommerce
The following steps work 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. In Omnisend, click Enable → Select Manual → Copy the Form embedding code.
Step 2. Navigate to your Bigcommerce admin → click Storefront → Themes → Customize.
Step 3. Drag & drop the HTML block where you want the embedded form to be located.
Step 4. Paste the embed code → Click Save HTML.
Step 5. Publish changes. Your form is live now.
Note: The form will only appear when the changes are published.
Embedding the Form in WordPress/WooCommerce
Step 1. In Omnisend, click Enable → Select Manual → Copy the Form embedding code.
Step 2. 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 3. 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 4. To add the Custom HTML block, click the + Block Inserter icon and search for 'HTML.'
Step 5. 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 a 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 the sign-up form. 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.
FAQ
Can I use the same embedded form on multiple pages?
Yes. Copy the embed code from Behavior Settings → Add code to your website and paste it on as many pages as you like.
If you have any more questions or need help, please contact us at [email protected] or in the app.