Embedded forms

Summary

In this article, you’ll learn how to create and customize the forms to embed in your website.

We’ll cover the following topics:

  • Creating a new embedded form
  • Working with elements
  • General settings
  • Success step
  • Display settings
  • Save and Publish
  • Manage embedded form
  • Reports

Creating a new embedded form

1. From the left sidebar, click on Popups and Forms

2. Click on New Popup / Form button

3. From the new page that opens, click on Start From Scratch button in the top right corner.

4. Choose the Embedded Form option

Adding a new element

1. Click on the plus icon located in the content area.

2. From the menu that opens, choose an element and click on it to add it to the page.

Editing an element

Select the element you want to edit to reveal its options on the left panel. Use these options to change the appearance of the selected element or modify its functions.

Duplicating an element 

To make a copy of an element, select it first. Then from the box that appears to the right of the element, click on duplicate icon.

Removing an element

Select the element you want to remove and click on the trash icon that appears to the right of the selected element.

Re-ordering elements

You can change the order of elements by selecting an element. While the element is selected press and hold down the mouse button and drag the element up or down. Release the mouse button when you are happy.

Text

Use the text element to add text to your embedded form. Once you inserted the text element, you can change its formatting and typography from the left side panel. You can also make your text more personalized using the dynamic keywords feature. To access this feature, select a text in your email and click on Dynamic keywords button. From the menu that opens, choose among a variety of keywords to insert as part of the text. Note that the dynamic keyword you have selected will be inserted into where your text cursor or caret is located.

Button

Use button element to add call-to-action buttons to your embedded form. There is an extensive set of options to customize the appearance of buttons.

Coupon

Use coupon element to generate and add a discount coupon to your embedded form. ConvesioConvert allows you to create unique coupons that are generated for each recipient as well as universal coupons which are same for everyone. This powerful element is capable of generating highly targeted and advanced coupons suitable for different scenarios and marketing campaigns.

Form

Use form element to insert a form on your embedded form. By default, there is one email input but you can add more fields by clicking on New Field button. You can then map each field to an attribute using Map to option. You can even map any field to custom attributes.

Image

Use an image element to insert an image into your embedded form. You can either upload an image to your media library or select a free stock image provided by the Unsplash website.

General settings

In addition to individual elements, you can change the general appearance of embedded forms as well. To change the general settings, click on an empty area in the page. It could be anywhere outside the embedded form box. The panel containing general settings will appear on the left side of the screen. Here are the options available in general settings:

Width

Define the width of the embedded form relative to its container (represented with a dotted rectangle).

Height

Define the height of the form that appears on your website.

Alignment

Adjust the form to be aligned to the left, right, or center. This option is useful when you set a width smaller than 100%.

Background color and image

Change the form background color or set a background image.

Border color and width

Set a border around the form

Corner radius

In case you want a embedded form with rounded corners you can adjust this setting.

Change the color of any hyperlinked texts included in embedded form content.

Enable or disable the underline formatting of any hyperlinked texts included in embedded form content.

Success step

The success step is content that is displayed after the successful form submission. It usually conveys a message informing the visitor that the form has been submitted successfully. You can customize the content and appearance of the success step from the upper tab in the embedded form editor.

Please note that the success tab is disabled until you add a form element to your embedded form. In other words, the success step is always associated with the form element.

Once you selected the success tab, you will see the default success message shown in the embedded form. You can change the content or add new elements to this step. However, you can not add the form element to this step as there can be only one success message associated with a form in any given embedded form.

Save and Publish

Publishing an embedded form to your website requires two steps:

1. Click on Publish button in the top right corner. This will open a window that contains a code. Copy this code using the Copy code button below.

2. Choose a page from your website where you want the embedded code to appear. Edit the page and paste the code you copied in the previous step to your desired area.

After you publish the embedded form you can always reveal the code again by clicking on the Options menu on the top right and selecting Embedded Code.

Save as draft: To save your embedded form as a draft click on Save and Close button on the top bar.

Manage embedded forms

To view all embedded forms you have created in one place go to embedded forms and Forms from the main navigation on the left. In this page, you can manage your forms using the option menu button on the right side of each embedded form. Using the option menu, you can edit, disable, duplicate, view sign-ups, and remove a form.

Disable an embedded form

To disable an embedded form click on the option menu icon on the right and click on Disable. Once you disable a form, it will be unpublished and saved as a draft. Disabled embedded forms won’t be displayed to your website visitors until you publish them again.

View sign-up

Using this option you can view the complete list of people who have successfully submitted the form embedded in your website. To view sign-ups, click on the option menu icon and select View Sign-ups.

Reports

To view the analytics and performance data associated with an embedded form, click on the report button next to the options button.

On this page, you can find the following useful information associated with an embedded form:

Views: The total number of times the embedded form is displayed to the website audience, indicating the reach and visibility of the embedded form.

Sign-up rate: The sign-up rate represents the percentage of website visitors who interact with the embedded form by providing their information, indicating the effectiveness of the embedded form in converting visitors into potential leads or customers.

Sign-ups: The total number of people who submitted the embedded form.

Updated on October 23, 2024

Was this article helpful?

Related Articles

Need Support?
Can’t find the answer you’re looking for? we’re here to help!
Contact Support