Overview

This article provides a complete, step-by-step guide to help you successfully create, customize, and publish a new website Webforms. These Webforms are essential tools for capturing new leads from your website. By following these steps, you will learn how to configure the Webform's basic settings, select and order the lead fields, customize the visual appearance, and finally, generate the necessary code to integrate the form onto your web pages.

Permissions Needed

Step by Step Instructions

Step 1: In the Navigation Menu, go to Template Manager, and then you will see the "Manage Website Widget" page.

Step 2: You are now on the listing of the widgets that are created on the account. To create a new webform, click on "New Widget" in the top right corner.

Step 3: The configuration page will open for Step 1. Fill in the basic details, including: Form Interested In, Widget Name (which must be unique), and Follow Registration Communication Flow (select "No" to enable selection of custom Email/SMS templates, which must be configured for Webforms in Manage Communication Templates). You can also configure the Lead Source.

Step 4: Click on "Save & Next" to complete Step 1 of the webform setup and go to Step 2 of the webform set up.

Step 5: On Step 2, you will see all the lead fields configured on your account. To show a field in the webform, you must check the box next to it.

Step 6: Define the positions of the fields that you want to show to the applicant as per your preference using a numeric value (e.g., to set a field at the first place fill this as 1).

Step 7: You can also set up whether the field is mandatory or not.

Step 8: As per your requirement some configurations can also be done here such as setting up the placeholder text and the validation error message. Crucially, for the Dropdown field, you can choose the particular values that you want to show in the Webform from the selected master data list.

Step 9: Click on "Save & Next" to move to Step 3 of the webform set up where configuration for the visual setup is done.

Step 10: On Step 3, you can make visual changes to your widget using the available options like Theme Selection, Dimensions & Spacings, Background & Styling, Label Properties & Fonts, Heading Customizations, Thank You & URL Redirect and Form Mapping. You can configure the post-submission action, choosing either to display the Thank You Page or to redirect to any other specified URL.

Step 11: Use the Preview Section (with its multiple screen options) to preview how your customized widget will look on different screen sizes.

Step 12: Click on "Save" to save your customizable widget.

Step 13: To get the code and publish the widget you can click on the Publish & Get Code. This provides the HTML div and script codes which you can paste onto your web page to make the widget available and start getting the data.

Points to Keep in Mind

To ensure a smooth process and avoid common errors, please note the following:

• Unique Widget Name: The Widget Name entered must be unique across all existing widgets in the account.

• Communication Flow Dependency: If you select "No" for Follow Registration Communication Flow, ensure that the custom Email or SMS templates you intend to use have already been explicitly configured as being applicable for Widgets in the Manage Communication Templates section.

• Field Visibility: Only fields that are checked will be visible in the final webform.

• Code Implementation: After clicking Publish & Get Code, you must paste both the provided HTML div and the script codes onto your web page for the widget to load correctly and start capturing data.

Related Articles

• How to Delete a Webform (Widget)

• Webform (Widget) Limits & Restrictions

Conclusion

Creating and publishing a new Webform (Widget) is a straightforward process that grants you immediate lead capture capabilities. By following the steps in this guide and keeping the key dependencies and permissions in mind, you can ensure your webform is properly configured, visually aligned with your brand, and successfully deployed to start gathering data efficiently.