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.


Limits/PlanPlan
FreeGrowthProEnterprise
Edition
Freshsales 
0102550
Freshmarketer1
102550
Freshsales Suite1102550


Follow these steps to set up Web forms on your website:



DETAILED STEPS:


There are two major steps to set up Web forms  successfully:

  • Creating and customizing the form and obtaining the link

  • Integrating the form link on your website


Setting up Web forms:


  1. Login as an Admin on your web application. (Note: Only Admins and Account Admins have access to edit and set up Web forms)

  1. Go to Admin Settings .

  2. On the Admin settings page, scroll down to Marketplace and Integrations and find Web forms under Website Tracking and Marketplace Apps.

  3. 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

  4. Click on Create and view form button under Classic form. This opens the page dedicated to Classic Forms. You can view all forms created previously and also create new forms.
     

  5. Click the button. This takes you to the Add form page where you configure your Web form.

  6. Create and customize your web form on this page. Read the table below to understand the different form fields.



S.No

Form fields

What they mean?

1.

Form name

This field requires you to give a name to your form. To ease identification, maintain a naming convention that helps you identify the form as this is only for internal purposes and will not be visible on the form.

Example: Sign up form, Request a demo or Submit your queries,etc.

2. 

Email address to notify when the form is submitted and record is created

Feed the email address to which all notifications will be sent. Whenever a form is submitted, a Contact will be created and the notification will be sent to this email.

3. Include Opt-in Checkbox Include an opt-in checkbox that allows visitors to opt for promotional emails from your company.

 

4.

After form is submitted

After the form is submitted, you can either:

- display a success message

- direct them to another webpage

Based on your preference, add the exact message or the web page’s link here.



4.

Create an associated deal

Checking this option allows the creation of a deal associated with the contact. As soon as the form is submitted, the platform creates a contact and a deal associated with it. 

5.

Title

Enter what the heading of your form should read in this field. This will appear on the top of the form.

6.

Choose a field to add to the form

This option allows you to add new fields to your form.

Click on the “” button. This brings opens a drop down list from which you can choose a variety of contact fields to add to your form.

7.

Contact Fields

Your form comprises Contact fields that allow you ask relevant questions to your customers and get back responses for the same. For any Contact field, there are two options that are available. 

  • Required: Checking this box makes it a mandatory field for your Contact to fill. Until all required fields are filled the form cannot be submitted.

      

  • Hidden: Hidden fields are invisible to the customer and can be prefilled with default values when new contacts are created upon submission of the form.
    For example, you can add a Campaign field to the form but mark it hidden to your prospect. This makes it easy for internal reference and segregation.

8.

Header text

Enter a brief message that you want to convey to your web visitors before they fill the form.

9.

Customize the look and feel your form


Note: When you choose “Inherit” on any of your options, the form automatically inherits the properties that are present on your web page.

10.

Preview

Clicking on the Preview button allows you to check how your form might appear and use the same to refine its appearance to your specifications.

11.

Link

Clicking on the Link button saves your form and creates the code snippet and a custom URL for your form.

  • If you wish to embed the form on your website, you can use the code snippet and add it to the body of your website’s HTML.

  • If you want to share it via emails or social media, use the URL instead. The URL works universally and can be shared across medium.


  1. Click the  button after configuring your webform. This makes the changes live and takes you back to the Web form list view.

    Alternatively, clicking on the Link button after making changes autosaves your form.

Your form is now ready and can be integrated on your website. Here's how the code will appear like:


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.

  

  1. 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.


  2. On the sidebar, scroll down to the Personalize section and click on the button. This opens the Theme customizer.


  3. 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.


  1. Click the Widget area that you wish to customize. This opens a bar that allows you to add a Widget of your choice.  


  2. Click the dropdown and select the option.


  3. 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.


  4. 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:


  1. Whenever a website visitor fills your form, He/She will have to fill all the fields provided in order to make a submission. Here's how a completely filled form appears:

  2. Clicking on the Submit button creates a Contact depending on how you have configured your form to be.

  3. 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.

  4. Under Source, choose Web forms. This brings up all contacts that were created through web forms.


FAQs:


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.