Creating an Embedded Form

Goals and Outcomes

Embedded forms are static forms placed directly on your website, allowing you to collect either SMS or email subscribers quickly and seamlessly. They offer a simple yet effective way to grow your contact list and engage customers through targeted marketing campaigns.

In this article, you’ll learn how to create and customize an embedded form in Yotpo SMS & Email.

Embedded Form Overview

Each embedded form has two steps: the first where customers enter their phone number or email address, and the second which is the success message that thanks them for subscribing. With the form editor, you can customize every aspect of your embedded form, including the layout, field appearance, and compliance text language. For maximum flexibility, you can add custom CSS to further style the form.

Once you finish customizing your form, the system will generate an HTML code snippet that you need to copy and then paste into the theme files or page editor of your website. Where you paste the code will depend on the platform you used to build your store. You’ll find instructions for different platforms such as Shopify and Privy in a dedicated modal before publishing your form.

Important:

By default, each new embedded form triggers the creation of a welcome flow. This means that after a customer subscribes, they will receive a welcome message containing a discount offer. To edit the content of the message and configure or remove the discount, open the flow builder after creating the form.

Accessing the Embedded Form Editor

To access the embedded form editor, from the Yotpo SMS & Email main menu go to Audience > Subscriber Collection Tools and click Set it up in the Embedded form card.

Creating an Embedded Form

After opening the editor, in the Preview area, you’ll see the default template. You can customize each element, such as text fields and buttons, to ensure the form matches your brand’s needs.

Step 1: Choose a Form Name

To set up your embedded form, start by giving it a name. It won't be visible to customers, so put something short and simple that will help you distinguish this form from others. Click the edit (pencil) icon in the header to enter the name you’ve chosen. It will be saved automatically.

Step 2:  Customize the Form’s Layout

When you start customizing the form's layout, you can select a device (desktop, tablet, mobile) from the top of the left sidebar to preview how the form will appear in each format. You can switch between formats at any time to ensure all elements are displayed properly.

Note:

Any changes you make in the form editor will be applied to all formats. The device selection is solely for preview purposes and does not allow modifications specific to each format.

Under the Layout section in the editor, click Form to customize the form’s background color, adjust the roundness of the corners, and select how the elements will be arranged. You can choose between block and inline.

By default, each embedded form includes two text elements: header text and description text. To customize them, click Text in the sidebar or hover each element and click to edit it. The editor includes all standard text editing options, allowing you to adjust font, size, boldness, letter spacing, text color, and more.

If you want to remove a text element, select it and click Disable Element at the top of the text editor.

Step: 3 Customize the Form’s Input Fields

In the Fields section, you can manage the appearance of the form’s input fields and the submission button:

• Country field: A drop-down menu for customers to select their country

• Phone field: A text field for customers to enter their phone number

• Email field: A text field for customers to enter their email address

• Button field: The button customers click to confirm their subscription to your marketing program

The input fields can be made mandatory, requiring customers to fill them out if they wish to subscribe. To do that, select a field in the sidebar and mark the Mandatory checkbox.

Important:

Due to compliance regulations, it is not advisable to collect SMS and email consent in the same step. Since the embedded form supports only one step, we strongly recommend adding a single field for either SMS or email consent.

The input fields can be removed from the form in the same way as text elements—by selecting the field and clicking Disable Element.

The button is the only element in this section that cannot be removed. Click Button Field in the sidebar to view the available customization options such as changing its color, font size, and more.

Tip:

The editor lets you add an icon before the text on the button. Select Icon from the Button Style drop-down menu and then click Browse to choose an icon from the gallery.

You can also add emojis to your text by copying them from an external source, such as an emoji library, and pasting them directly into the Button Text field.

Step 4: Customize the Form’s Regulation Fields

Every embedded form contains the so-called regulation fields. They are required to ensure compliance with TCPA and CTIA regulations, which govern how businesses can communicate with consumers via calls and text messages. To learn more, see Complying with SMS Marketing Regulations in the US.

In the Regulations section, you can manage the appearance of the following fields:

• Checkbox: A checkbox that allows customers to confirm if they agree with your Privacy Policy and Terms of Service. You can require customers to check it in order to subscribe by marking the Mandatory checkbox in the settings.

  Note:

  The Checkbox field is optional: you can remove it from the form by clicking Diasble Element in the settings.

  
  

• Compliance: A text box under the button that contains the TCPA disclaimer. You can change the country which will automatically update the language. You can also add links to your Privacy Policy and Terms of Service. The compliance field is a compulsory element and cannot be removed.

• Additional Fields (for mobiles only):

  • Quick subscribe: When turned on, customers viewing the form on mobile devices will be able to subscribe with a single tap

    Note:

    This option is available only for customers in the US, Canada, UK, Australia, France, and Spain.

  • Ask for an email after the quick subscribe: If Quick subscribe is turned on, you can send customers a text message after they subscribe, inviting them to join your mailing list. The settings allow you to edit the content of both the invitation SMS and the confirmation SMS customers receive if they join.
    

Step 5: Customizing the Success Message

After you complete the customization of the form's first step, proceed to the second step: the success message. You can access it by clicking the Success button in the header or by selecting Next Form 1/2  in the sidebar.

The editor allows you to change the background color of the step, adjust the roundness of the corners, and customize the two text elements.

Step 6: Add Custom CSS

If you'd like to further customize the design of your form, you can add custom CSS to each step by clicking the 3-dot menu at the top of the page and selecting Add Custom CSS. A popup will appear, allowing you to paste your CSS code (as shown below). Once you're done, click Save.

Updating a Background Image

Using the custom CSS allows you to add images to your embedded forms. You can easily update an image in an existing form by modifying the CSS code.

Note:

If you built your store on Shopify, you first need to upload the new file you wish to use in Shopify Content > Files, and then copy its URL.

To change the image:

1. On the Subscriber Collection Tools page, find the form you want to edit and open it.

2. Click the 3-dot menu in the step you want to update and select Add Custom CSS.

3. In the text field, press Ctrl + F on your keyboard to activate the search function and look for “https” to find the URL of the currently uploaded image.

4. Highlight the old URL and paste the URL of the new image.

5. Click Save.

Step 7: Publish Your Form

After you have finished customizing your form, click the Publish button in the top right corner. The system will generate a code snippet that you need to add to your website. In the modal that appears, you’ll find instructions specific to the platforms you may have used to build your store.

Important:

The embedded form you just created will be visible on your website only after you add the generated code to it.

Tip:

To optimize conversion rates, we recommend placing your embedded form on a dedicated landing page to encourage visitors to sign up.

Shopify Theme 2.0

If you’re using Shopify’s Online Store 2.0, click the link in the tab to open the theme customization page in Shopify. In the sidebar, choose where to place the form, click Add section, and select the embedded form you just created.

Shopify Theme

If you’re using the older version of Shopify’s Online Store, copy the code in this tab. To learn more, see Shopify’s Help Center.

Note:

Make sure to paste the code within the <body> tag of the HTML code. Placing the embedded form code in the <body> tag allows Shopify to adjust the HTML, ensuring the form displays properly and takes 100% of the width of the parent container.

Pages

If you need the embedded form code (including both functionality and formatting), copy the code from this tab and paste it into the page editor of the platform you used to build your store.

Privy

If you have an integration with Privy, copy the code in this tab. To learn more, see Privy’s Help Center.

Generic code

If you need only the form logic (the underlying functionality without the visual formatting), copy the code in this tab.

Once ready, close the modal with the instructions. A new modal will open, prompting you to view the welcome flow which is automatically created in the system when you create an embedded form. To customize it, click See flow. In the flow builder, you can edit the content of the message that customers will receive after subscribing and configure the discount. To learn more about discounts in flows, see Adding Discounts to Yotpo SMS & Email Flows.

Track your form’s performance

To track your embedded form’s results, go to Audience > Subscriber Collection Tools, identify your form in the list, and click Tool analytics. You can look into metrics such as SMS and email opt-int.