Note: We’ve introduced CRM Tracking code to track all website events, marketing, and sales interactions in one place. Install the unified tracking code to connect existing forms with your web application, and start tracking leads automatically.
By integrating smart forms on your website, you can track form submissions and push contacts to your web application. In this support article, we will explain how to integrate smart forms on a WordPress account. If you use a different website builder, please follow the logic given below and embed your smart forms code on the source code of your website's footer.
DETAILED STEPS:
On the web application:
Login as an Administrator.
Note: Only Admins and Account Admins have access to edit and set up Web formsClick on Admin Settings and scroll down to Marketplace and Integrations and find Web forms under Website Tracking and Marketplace Apps.
Click on Web forms. This opens up the Web forms page and presents you with an option to choose between two types of forms
i) Classic Forms
ii) Smart forms
If you haven’t created a form and are looking to create a form from scratch, follow these instructions.
Click on Integrate with existing website form button under Smart form. This allows you to embed Smart forms into an existing website form. Click the button opens up the Smart forms page.
On the smart forms page, find the code snippet that helps your website track activities and Select the code. This copies the code to your clipboard and allows you to paste it at a place of your choice.
Open your website's front-end codebase and paste the HTML head tag on the header or footer section of your website. This ensures the HTML tag works every time the website loads and, therefore, captures visitor information.
If your website is built on WordPress, follow the instructions given below.
On WordPress.com:
Note: To integrate Web forms and smart forms on WordPress, you require a Business Plan. Please ensure that your current WordPress plan is upgraded to the Business plan before you proceed with the integration.
When it comes to setting up smart forms, it is important to understand that the script is embedded in the codebase of your website’s frontend. Hence, all edits should be carried out on the website’s themes for it to work effectively.
Find the My Site button on your WordPress.com account and click it. This opens the Site Customizer and gives you access to a dashboard where you can find a host of tools that allow you to carry out customizations on your website.
Scroll down to the Themes section and click on the Customize button associated with the same. The Customize section opens a toolbar that allows you to carry out modifications to your website’s theme and add widgets.
Scroll down to Widgets and click on the same. This opens up a dedicated page where you can find your website’s footers.
Clicking on the footers allows you to modify them according to your choice. Click on the button. This opens up a toolbar that allows you add a variety of Widgets such as such as images, videos, forms, HTML code, buttons, etc.
Click on the “+ Custom HTML” widget. This allows you to add arbitrary HTML code to your footer.
Paste your smart forms code snippet in the contents section of this widget and click on “Done.” This embeds the smart form's code in your website and sends the data back to your web application.
How to find out if my website is receiving data?
Test to find out if your website is sending data back to your account. Here’s how you can do it.
On the smart forms page, find the section titled “Test your website integration.”
Paste the URL of your website in the text field and click button.
If your smart form integration is successful, you will receive a success message on top of the text field. This will allow your account to track visitor engagement on your website.
How do smart forms update contact fields?
Every field in your web form is mapped automatically to your Contact fields, Default and Custom fields.
To update custom fields, create one with the same label name used in your web form. Data entered by your contact in the form is updated to the custom field.
If one or more of your form's fields did not match with the existing contact property, a note stating so is added to the contact page, so that you don't lose any of your form's data. Later you can create a custom field with the name of the form's field.
Start tracking events for your contacts. When you start tracking events you will be able to view your contact's interactions on your website.
Use the javascript library to track specific forms manually. Your developer can refer this tutorial for details.