Web forms enable you to convert website visitors into contacts. With web forms, you can enable website visitors to submit their contact information and immediately capture them as contacts on your web application.
In this support article, we will explain how to integrate classic web forms on a WordPress.com account. If you use a different website builder, please follow the logic given below and embed your smart form code on the source code of your website's footer.
Configure Web Forms
Follow these steps to set up Web forms on your website:
Log in as an Admin on your web application. (Note: Only Admins and Account Admins have access to edit and set up Web forms)
Go to Admin Settings .
On the Admin settings page, click on Leads, Contacts & Accounts and find Web forms.
Click on Web forms. Click on Create a web form button. You can also view all forms created previously here.
Create and customize your web form on this page. Provide a suitable name for your form.
Next, Add fields to your form. You can create contacts and associate them with specific record types in your CRM account. You can also choose to create a deal along with the contact.
If you do not have record types enabled in your account, you will be able to view the below screen:
You can also create accounts and associate them with the specific record types in your CRM account. When you choose to create accounts, the required account fields(mandatory) are automatically displayed.
While adding account fields, ensure that there is at least one unique field for the contact association to happen.
Note: For accounts that have the same unique field value, the contacts are associated with the last updated account.
Note: If an account’s unique field is marked as nonunique or is deleted, and if that field is used as a "Match by" field in any of the Webforms, you will encounter the below error.
If an auto-number field is marked as unique field for Accounts, the CRM associates contacts and accounts based on Account Name.
Next, choose and add the relevant contact fields to your form. You can select the fields that must be displayed on the form or hide them based on your preference.
While adding contact fields, ensure that you have included at least one unique field in the form.
Note: You can add as many unique fields to the form. However, at least one unique field should be marked as required in the form.
Adding files to Web Forms
You also have the option to set up forms that allow users to attach files upon submission. To do this, select the "Add field for file attachment" button.
Enter the label for your file upload. Check the “Required” box if this is a mandatory step.
Select whether you'd prefer to allow multiple file uploads. The CRM supports uploading up to 5 files in a single field, with a limit of 30 MB per file. Additionally, you can incorporate up to 5 file field components.
Note: Your leads can upload up to a total of 150 MB worth of files per webform submission. To prevent abuse of your storage space, there is a limit of 500 MB on the total file size that a contact can upload via multiple updates to a single webform
You can select the file formats that your users can upload
By default, the files are associated with Contacts. You can also choose to associate them with Accounts and Deals.
You can also add tags to the uploaded files directly from the UI. You can then easily locate files uploaded via the webform by filtering this tag under Contact details → Files →Filter by this tag
This is how the form would appear on your website.
Next, Customize text and colors to your form. Provide a suitable title to the form, and add your description. Then customize the Submit button, Fonts, and Colors based on your preferences.
Then, configure the Settings of your form. When you choose to create accounts, select the one you want the CRM to check for matching accounts if there are two unique account fields. This will help eliminate duplicate accounts.
You can include an opt-in box checkbox to obtain consent from your prospects and customers. We strongly recommend including this in your forms to abide by privacy laws.
Click Insert link to add hyperlinks to the opt-in text.
To access additional options for the added text, simply click on the text itself. This will reveal floating buttons that provide various editing capabilities such as modifying the text, opening the associated link, or removing the link altogether using the unlink option.
Finally, choose what happens after the form is submitted. You can either display a message or redirect to a different URL.
Click the button after configuring your web form. Your form is now ready and can be integrated into your website. You can preview the form that you have just created.
Next, copy the code snippet and place it on your web page to make this form live
Web forms Integration on WordPress.com:
Note: To integrate Web forms on WordPress.com, you require a Business Plan. Please ensure that your current WordPress.com plan is upgraded to the Business plan for you to embed Web forms on your site.
On your WordPress.com site, head to the button and click the same. This opens a sidebar that allows you to customize your WordPress.com site.
On the sidebar, scroll down to the Personalize section and click on the button. This opens the Theme customizer.
On the Theme customizer bar, scroll down to Widgets and click the same. This opens the Widget customizer bar.
Note: The default sidebar is an entity inherent to this specific theme. The availability of customizable widget areas differs from theme to theme.
Click the Widget area that you wish to customize. This opens a bar that allows you to add a Widget of your choice.
Click the dropdown and select the option.
Paste the code snippet in the content section of the Widget and click on Done. This will run the code and web forms will be embedded on your WordPress.com website.
Proceed to hit the button on top of your WordPress.com page to save the changes. This is how your Web form will look like:
Accessing Contacts generated through Web forms:
Whenever a website visitor fills your form, they will have to fill in all the fields provided to make a submission. Here's how a completely filled form appears:
Clicking on the Submit button creates a Contact depending on how you have configured your form to be.
When you have contacts that are from several sources, you can filter the Contacts from your web forms by simply going to filters and applying the filter for Source.
Under Source, choose Web forms. This brings up all contacts that were created through web forms.
Q: Can I delete my form?
A: Yes. You can use the delete icon to delete a form. The existing Contacts from the form will still have the source and other fields with the values mapped from the form submission. But, no more new Contacts will be created from the submission.
Note: Make sure to remove the code snippet from your website before you delete the form.
Q: Can I share the form with my team?
A: All forms are visible to every Admin of an account.
Q: Can I clone or duplicate a form?
A: No. You can’t clone a form. You can edit an existing one or create one from scratch.