When a lead fills out a form on your website, you know they are interested and it's time to reach out to them. Lead generation relies on forms, and with so many forms out there, it's important that your forms stand out. Build, customize and reorder fields effortlessly with SharpSpring's drag-and-drop form editor. In this tutorial, you will learn how to create a SharpSpring form.
Note: If you're looking to find out how to map a native or 3rd party form, click here.
The following users can create and manage SharpSpring Forms:
- Marketing Managers
Creating the form
Follow these steps to create a SharpSpring form.
Step One: On the top right toolbar, click the +New button, then on the drop-down, select Form.
Step Two: In the pop up menu, type in the name of your form.
Step Three: Select SharpSpring Form and choose how what lead status to assign to leads that fill out this form. SharpSpring also allows you to use two other types of forms: native or 3rd-party. A more in-depth tutorial for each of these types of forms can be found here and here.
Step Four: Click on the blue Continue button.
You should see a page with three tabs: General, Fields and Styles. Let's take a look at each of these tabs in more detail.
Overview of the Fields Tab
Follows these steps to add fields to your SharpSpring form.
Step 2: Click the green Fields button.
Step 3: Select the Fields you want in your form.
- An email address is required for SharpSpring to be able to gather form data.
- It's common practice to have 4-5 fields. Seven or more fields is usually too much. You can choose for some fields to Always Show or only show if a lead hasn't filled out that field before. Learn more about Adding Progressive Fields by checking out this help article.
- Check the Autofill Data toggle to have these fields auto-populate with a visitor's information if they have already filled out that field.
- If you’d like more information on modifying your form, clicking on the Modifying a Form link under the Fields text summary will open up a video within the app.
- If you would like to create Custom Fields to add to your form, you can click on the Create Custom Fields link located under the Modifying a Form text. You can find more information on creating custom fields here.
NOTE: Hovering over a Field will display three icons: Two perpendicular arrows, an “X”, and a “V”. The arrows are there to signify that at any time, you can drag and drop items to reorder the form to your liking. Clicking on the “X” will remove the item from the form. Clicking on the “V” will open up additional options, allowing you to specify if the field should be hidden or not, declaring a default value for the field, and showing the field’s lead type.
Step 4: Click the green Elements button.
Step 5: Select the Elements you want in your form. These include headers, text fields, and horizontal rules.
Step 6: If you’re interested in collecting a referral from this lead, clicking on the gray Referral Fields drop-down allows you to add referral fields to your form. These fields do not establish tracking, but do create a second contact record for that referral. We recommend sending an email to that referral stating that they were referred, encouraging them to visit your website and/or fill out a form to establish tracking.
NOTE: In the upper right corner of the Fields tab is a checkbox titled Ask "How Did You Hear About Us" at the end. Toggling this option will add a field at the end of the form where your visitor can add themselves to a campaign in SharpSpring, just in case one of your campaigns didn't catch them.
Step 7: When you're finished, click on the green Save Changes button in the bottom right corner. Then click on the "Styles" tab.
NOTE: You must have at least one Field before you can save a form. The first time you save a form, an embed code pop-up will appear. To continue editing the form, simply click Close.
Tip!: You can integrate SharpSpring forms with both WebEx and GoToWebinar. This allows you to add Events or Webinars as form fields, so when visitors fill out your form they are also registered in Webex or GoToWebinar.
Overview of the General Tab
Step 1: Click on the General tab.
Step 2: In the Form Information section, you can change the Form Name if desired.
Step 3: In the Thank You Page section, you can adjust the following settings:
Thank You Page URL: Insert any URL that you wish for the form to redirect to upon submission. This page is typically hosted on your website or a landing page and usually says "Thanks for filling out our form" and redirects the user to your website. If the Thank You Page URL field is left blank, by default, SharpSpring will automatically display a generic Thank You page for anyone who fills out the form.
Submit Data to my "Thank You" Page: This setting will generate a POST to the thank you page designated for the form. This POST will allow for a developer with code knowledge to implement code that can utilize the form data from the POST accordingly.
Show "Thank You" Page within iFrame: You can choose for this default thank you page to open in a new page or in an iFrame on the same webpage.
Use Custom "Thank You" page: You can click the pencil icon to modify the HTML for the default thank you page. This allows you to still utilize our basic thank you page, and modify it to your liking if you choose to not insert a 'Thank you page URL'.
Step 4: In the Form Data section, you can choose to give each visitors who fills out this form a lead status of "Open / Unassigned," "Unqualified Lead", "Qualified Lead," or "Contact". The double opt-in feature can be enabled by checking the box that will send a confirmation email to those who fill out this form, allowing them to explicitly opt-in to receiving emails. You can also Enter a Postback URL if you have a 3rd-party service you want SharpSpring to post the form data to. Check out our Using Postback URLs in SharpSpring article for more information.
Step 5: In the Invisible reCAPTCHA section, you can add security protection to your form by turning the switch from on/off. Google's invisible reCAPTCHA tool protects your forms from spam and other types of automated abuse. This happens behind the scenes without requiring a user to click a checkbox. Only the most suspicious traffic will be prompted to solve a captcha.
Step 6: In Settings, choose your Form Language from one of the following options:
Overview of the Styles Tab
Step 1: If you have a stylesheet (.css link) that is already associated with your site and want the form to have the same look and feel, you can paste that CSS URL in the External CSS URL section.
Step 2: You can also create and edit stylesheets in the “Current Stylesheets” section. Clicking on the blue “Add Stylesheet” button opens up a text editor screen. You can name and edit the stylesheet here. Click the blue “Save Stylesheet” button in the bottom right hand corner when you are finished. This will create a radio button for the stylesheet you created. Selecting it will apply your stylesheet to the form.
NOTE: You can edit an existing stylesheet by mousing over the stylesheet and clicking on the pencil icon. You can also delete the stylesheet by clicking on the “X” icon. This will prompt a pop up asking to you to confirm. Clicking the “Delete Stylesheet” button will delete the stylesheet.
Step 3: You can create a custom Submit button. You can change the size, color and text of the button.
Step 4: Click on create Create New Button and change the settings in the popup menu to fit your needs.
- The Advanced tab allows you to go beyond the basic editing including, Top Gradient Colors, Bottom Gradient Colors, Hover Text Color, etc.
- The Forms tab shows you what forms are currently using this button
Step 5: Click the blue Save button
Step 6: Enter the Submit Button text and click the green Save Changes button.
Step 7: Copy and paste the embed code anywhere on your site where you want the button to appear or put this form on a landing page. More information on creating a custom form button, can be found here.