Create a Web Form

This article applies to:

A web form is an external form posted to collect information from potential customers who may visit your site. It is great for capturing a lead's contact information! Keap's web forms are mobile responsive, so your form looks professional whether your lead is visiting from a computer, tablet, or mobile device!

Pro-Tip!

Whenever you make changes to a web form (or any other item) in a published automation, you need to re-publish the automation for your changes to go into effect. Web forms are responsive. This means that the web form will automatically scale to fit both desktop and mobile devices.

Note: Web forms published prior to February 26, 2020 are not responsive. They would need to be replaced with a new web form to become responsive (this is called the Advanced Automation Builder.)

Web forms embedded via HTML need to be republished in the Advanced Automation Builder and the embed code on your site needs to be updated. Web forms embedded via Javascript simply need to be republished in the Advanced Automation Builder and will update automatically.

  1. Click and drag a Web Form Submitted goal onto the canvas.

  2. Double-click the name under the goal to change it to something more meaningful to you.
  3. Now, double-click the goal to configure the web form (or single click and select View and edit)
  4. To access all of the available fields for a form, click the Field Snippets tab. Field Snippets contain:
    1. Name: Captures the Contact Name field
    2. Email: Captures either Email, Email 2, Email 3, or Create a Custom Field
    3. Other: Captures all other fields including Custom Fields or you can create a Custom Field
    4. Radio: Create a list of options that will be stored in the contact record under Forms Note: This is not captured in a field. 
    5. Phone: Capture phone number in Phone Type 1-5 & Fax 1-2
    6. Checkbox: Create a single selection box to a multiple choice and captures in the contact record under Forms Note: This is not captured in a field.
    7. Address - Capture Shipping, Billing Address, or Optional
    8. Hidden - Add fields that will not display on the Web Form but will capture information based on setup
    9. Partner - Capture information to create a Referral Partner Record
    10. Social - Capture information about the contact's social handles which will save to the Contact Record

    11. To delete a field, hover of Field Snippet and click the trash can icon.
  5. The Snippets tab is where you can drag and drop elements, such as:
    1. Paragraph - Text box
    2. Title - Text box with large font and bold
    3. Spotlight - Image aligned left  with Text box on the right
    4. Image - Place image before or after other snippets and then select or upload an image  
    5. YouTube - Link to a YouTube video
    6. Social - Add Social Media Links
    7. Spacer - Add space between other snippets
    8. Divider - Adds bar between other snippets
    9. HTML - Add custom coding
    10. Logo - Automatically adds your logo that is saved under Admin > Branding Center > Logo
    11. Configure your field snippet and click Save.
    12. To delete either type of snippets, hover over the item and click the trash can.
  6. The Format tab to access all of the text formatting tools
    1. Fonts - Format, Family, Font size, etc
    2. Unordered and Numbered Lists 
    3. Alignment
    4. Quote
    5. Remove formatting
    6. Table
    7. Link
    8. Paste text
    9. Find & Find/Replace
    10. Layout & Style
       
    11. Insert tab allows you to insert the following elements into either the Paragraph or Title Snippets
      1. Image  
      2. Table 
      3. Divider
      4. Merge Fields - A placeholder used to insert personalized content For example, ~Contact.FirstName~ is a merge field that inserts the value stored in the First Name field of the contact record.
        Click to view larger
      5. Special Characters

    12. Click on the Layout & Style button to configure the look of your web form.
  7. When you are finished designing your web form, click the Thank-You page tab and configure your Thank-You page.
     

  8. To test your form, just click the Test button and select a person.
     

  9. Once you've tested your form and are happy with it, change it from Draft to Ready.
     

  10. Click to go back to the automation and Publish your changes.


     
  11. To grab the URL of the web form, or grab the code to place on your site, go back into the web form goal and click on the Code tab.


Important! Every time a web form is changed, the javascript and hosted version will automatically update. If the HTML or HTML unstyled code is used, then the web form code must be manually updated on your website in order for the changes to take effect.

Did this article answer your question?
Thank you for your feedback!