Create and Add Embedded Forms to Your WooCommerce Store

Unlike pop-ups or floating bars, embedded forms stay fixed within your page layout, offering a non-intrusive way to collect leads or display promotional content. Use them when you want the form to remain constantly visible in a specific section of your storefront. With the WebToffee Marketing Automation app, you can design and fully customize embedded forms using beautiful templates, then seamlessly add them to your storefront.

Follow this article to design, customize, and publish your embedded forms.

Sample embedded forms created using the app.

1. From the Marketing Dashboard, navigate to Web Campaigns in the sidebar.
2. Click Create new campaign to get started.

1. In the campaign type selector, go to the Embed forms tab. You’ll find a variety of pre-designed templates—like welcome discounts, sign-up offers, and sale alerts.
2. Click on the template you want to use and proceed to customize it.

After selecting a template, you’ll enter the customization screen with two main sections:

• Left Panel: Form settings
• Right Panel: Real-time form preview and template editor

The settings in the left panel help you control when, where, and to whom the form is shown, ensuring it appears at the right time to the right audience.

Control how often the form should appear to each visitor. This helps prevent overexposure and enhances the user experience.

• Always – Best for ongoing offers or newsletter opt-ins shown site-wide.
• Once per visitor – Ideal for one-time welcome offers like “Get 10% Off Your First Order” so customers aren’t shown the same form repeatedly.
• Once per day – Useful for highlighting daily deals or restock notifications.
• Once per week – Great for recurring promotions or weekly newsletters without annoying repeat visitors.

Audience

Target forms to specific audience segments or contexts to improve relevance and conversions.

• All visitors – Show the form universally. Ideal for general offers, such as newsletter sign-ups or site-wide discounts.
• New visitors – Perfect for first-time visitors. For example, display a “Welcome! Get 10% off your first purchase” form to quickly convert them.
• Existing visitors – Use this for returning users. For instance, offer a “Welcome back! Here’s a 5% loyalty discount” form.

UTM Parameters

Set the form to appear only if specific UTM values are present in the URL.

• Source – e.g., “facebook”, “newsletter”
• Medium – e.g., “email”, “social”
• Campaign – e.g., “summer sale”
• Content, Term, ID

Page URLs

Control form visibility by specifying where on your store it should appear.

• You can choose to:
  • Include or exclude specific URLs
  • Use exact matches or partial matches with “Contains”

Product Category

Target forms based on the WooCommerce product categories your visitors are exploring.

• Include categories – Display forms when users view products from a specific category.
• Exclude categories – Prevent the form from appearing on irrelevant sections.

• Control which devices display the form: desktop, mobile, or all devices.

• Click Edit template to launch the visual editor. You can customize two sections:

This is the user-facing form where shoppers enter their email.

• Click any block (text, email input, image, button) to edit it.
• On selecting a block, properties like font size, alignment, colors, padding, and actions appear in the right panel.

• You can:
  • Edit text by double-clicking
  • Modify input fields (e.g., placeholder, error message)
  • Upload/replace images
  • Change CTA button styles and actions (e.g., submit or link)
• Drag and drop new blocks (e.g., phone number, name, countdown, coupons) from the left sidebar to enrich your form.

This appears after the user submits the form.

• Click the coupon block to either select an existing coupon or create a new one.
• Style the thank-you message, adjust layout, and configure coupon display (copy button, styling, etc.)
• Once you’re satisfied, click Finish editing.

After saving, the system will generate a unique embed code for your form. This code is shown in the following format.

After finishing the form design:

1. Add a name for the form.
2. Click Save.
3. Then, click Publish.

A pop-up will appear with instructions to embed the widget into your store theme.

Once your form is designed and published, you can embed it into your WooCommerce store using either of the following methods:

Use this method to place the form in your site’s widget areas, such as the footer or sidebar.

Steps:

1. Go to Appearance > Customize in your WordPress dashboard.
2. Click Widgets and choose the widget area (e.g., Footer Column 1, Sidebar).
3. Click the ➕ plus icon to add a block.
4. Select Custom HTML from the block options.

5. Paste the embed code you copied from the WebToffee Marketing app (e.g., <div id='ema-embedded-v2-df83a375903f17c74f749d6f'></div>).
6. Click Publish to save your changes.

Your form will now appear on every page that includes the selected widget area.

Use this method when you want the form to appear only on specific pages, such as the Home, About, or Thank You pages.

Steps:

1. From the WordPress dashboard, navigate to Pages and open the page where you want to place the form.
2. Click Edit to enter the editor.
3. Click the ➕ plus icon where you want the form to appear.
4. Add a Custom HTML block.
5. Paste the embed code from the app.
6. Click Save to update the changes.

The form will now display only on that specific page.