How to create a Web to Contact or Web to Lead webform

With Web to Contact or Web to Lead, you can build a webform to place on your website and have your visitors submit their information.

 

How do they work?

Web to Lead and Web to Contact forms generate an HTML form to collect information from your website visitors and automatically create Leads and Contacts in Insightly containing the information they submitted on the form.

During setup, users will create HTML code, copy it, then paste it onto their web page. When a visitor submits the form, Insightly will create a Contact or Lead with the data they have entered and tag the record with the Web Contact or Web Lead tag.

After setup, Insightly can:

  • Create Contacts or Leads for you automatically
  • Tag the new records as Web Contact or Web Lead so they’re easy to find
  • Send notifications about the new entries

 

How to create a webform

  1. Go to System Settings. Select Web to Contact or Web to Lead.
  2. Tick the box for Enable Web to Contact or Enable Web to Lead.
  3. From the User Responsible list, select the Insightly user who will be listed as the person who created the Contact or Lead record.
  4. For a Web to Lead form, choose a Lead source. If you have Lead assignment rules enabled for Web to Lead forms, this setting will not apply.
  5. Choose a visibility setting.
  6. To prevent SPAM from coming through your webforms, you can add Google's reCAPTCHA to your page. To do this, register your website at the reCAPTCHA site. Insightly only supports reCAPTCHA v2. 
  7. After registering for reCAPTCHA, you'll receive a public key and secret key. Paste those values into the fields at the bottom of the page in Insightly. If you're creating both a Web to Lead and Web to Contact form, you'll only need to do this once.
  8. Click Save at the bottom of the page.
  9. Scroll up and click the Create HTML for your website link to open the form builder window. As you make your selections, Insightly will create basic HTML code for you.
  10. Select the fields for your HTML form from the list. For Contacts, First Name is the only required field.

    For Leads, Last Name, Lead Status, and Lead Source are required. You can remove other fields by clicking the trash can icon to the right of the field name.

    If you've created a custom "Opt-In field" to get permission from visitors to send them information, be sure to include it here.
  11. Drag the handle icon to the left of the field names to reorder them.
  12. Copy the HTML code and paste it on your website. You can customize the generated HTML code to your liking. For example, you can make a field required.
  13. If you use Google Sites you will need to add line breaks between the textarea and /textarea tags in the generated HTML when entering it into the Google Sites Editor.

    We have more detailed instructions here.
  14. Close the form builder window by clicking the X in the top right. Your changes will be saved.
  15. From the Form Submission Behavior section, select a page to direct your visitors to after they submit their information on your site.

    You can enter your own custom Web page or choose the default Insightly thank you page. (The Insightly page cannot be customized.)
  16. Choose an email notification option. Insightly will send a notification email to the people you select each time a new Contact is created via the form.
  17. Click Save again.

 

Hiding fields

If needed, you can create multiple webforms with different fields for visitors to enter. To do this, you will need to directly edit the HTML generated to hide those fields.

  1. Go to System Settings > Web to Contact or Web to Lead.
  2. Click Create HTML For Your Website to open the form builder window.
  3. Before you copy the HTML code to paste on your website, you will need to go through each line of code and find the field you want to make hidden.
  4. Once you have found the field, you will replace the field's original code to appear like this:

    <input type=“hidden” id=“insightly_firstName” name=“First Name” type="text" />

    In the example above, we are making the First Name field hidden.
  5. Once you have finished editing, you can copy and paste this code onto your website.
Was this article helpful?