SharpSpring enables you to create a form that you can easily embed on your site without ever having to repost the code. SharpSpring can track three different types of forms - SharpSpring, Native and 3rd Party. The focus of this support article is on creating SharpSpring forms.
Note: If you're looking to find out how to map a native or 3rd party form, click here.
The following video will show you how to create a SharpSpring form. However, if you prefer, a written step-by-step guide is available below the video for your convenience.
Step-by-Step Guide to Create Custom Forms
Step 1: Click on the green "New" button located in the top right corner of SharpSpring.
Step 2: Select "Form" in the drop down menu.
Step 3: In the pop up menu, choose a name for your form.
Step 4: Select the type of form you want to create. SharpSpring allows you to use three types of forms: SharpSpring, native or 3rd-party. A more in-depth tutorial for each of these types of forms can be found here and here.
Step 5: 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.
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 “Form URLs” section, you can enter the “Thank You” page URL if desired. This thanks a person for filling out the form by sending them to a custom “Thank You” page.
NOTE: If the “Thank You” URL field is left blank, by default, SharpSpring will automatically display a generic “Thank You” page for anyone who fills out the form.
Step 4: Enter a Postback URL if you have a 3rd-party service you want SharpSpring to post the form data to.
Step 5: In the “Form Data” section, you can choose if you’d like the form data to be sent to your “Thank You” page. You can also choose if you’d like the “Thank You” page to show within an iFrame.
Step 6: In the drop down box, choose how you want the website visitors who submit information on the form grouped. You can choose "Open / Unassigned," "Unqualified Lead", "Qualified Lead," or "Contact".
Step 1: Navigating away from the "General" tab, click on the "Fields" tab.
Step 2: Click the green “Fields” button.
Step 3: Select the Fields you want in your form.
- It's common practice to have 4-5 fields. Seven or more fields is usually too much.
- An email address is required for SharpSpring to be able to gather form data.
- If you’d like more information on modifying your form, clicking on the “Modifying a Form” text 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” text 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 referral information, clicking on the gray “Referral Fields” button allows you to add referral fields to your form.
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 for gathering referral information.
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".
Step 1: If you have a stylesheet that is already associated with your site and want the form to have the same look and feel, you can paste the 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.
- To use the SharpSpring default button, click the “Presets” tab.
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. More information on creating a custom form button, can be found here.