Author: Fernanda Zettel-Shannon

This support guide explains the functionality and how to use the Website Forms section of the Leads Management module.

Step by Step Guide

To access this section, click on the Leads header in the left hand navigational menu. This will then expand the module and display all the sections available to you. Click on “Website Forms” and this will expand to display the options available to you.

Click on “Add New Form” and you will be presented with the screen below.

Template Name

The first thing you will need to do is to name the template so it can be assigned to Companies to use on their sites.

This is done in the “Info” area at the top of the screen. The Template Name field is the only field situated in the middle of the screen. Enter the name you wish to identify this form. The name would usually reference the company you are going to associate it with, to make it easier to search for and find in the dropdown list.

Form

This area displays all the fields that this form will capture for the company it is assigned to. There are three types of fields and they each have an icon so you can easily recognise them.

• Non-Removable – These are always on the form by default and cannot be removed
• Default Non-Editable – These are standard Pre-Defined fields who’s usage and names cannot be altered
• Custom Editable Fields – These are fields created by you and can be edited and renamed according to yours or the companies changing requirements

The legend is also on the title bar of the area for reference.

Edit Field Settings

Each field has four settings that are configurable, regardless of their type. These are used to determine if the fields are visible to the clients, editable by the clients, included in the lead email that is forwarded and if it is included in the embedded form that appears on the site.

All except one work independently of each other and can be toggled on/off by clicking on the circular button. When the button has a green area showing to the left of the button, the setting is Enabled. When the button has a white area showing to the right of the button, the setting is Disabled.

The “Visible to Clients” setting is the only one that can affect another automatically. If you disable this, and the “Allow Client Editing” is enabled, the it will automatically disable the “Allow Client Editing” as well. This is because it is a logical step to do so. However, it will not enable the client editing when doing the reverse as this is not necessarily a logical step.

Adding Pre-Defined Fields

Pre-defined fields, or system generated fields, are standard for all forms, for example Name or Phone. To ensure the stability and consistency of the system they are also non-editable. They cover your basic information as well as data from Google Maps, which are automatically filled.

You will see a list of the Pre-defined fields on the right hand side of the screen.

To add a pre-defined field you need to click the green circled + sign. This will add it to the bottom of the current list of fields in the Form area. The + will be altered to a grey circled

When a pre-defined field is added, you will see it listed under the Form area and in the Pre-Defined Fields listing you will see a circled tick. This indicates it is now listed on the Form.

Adding Google Maps Group

The group of Google Maps Auto Fill fields have the ability to be added all by the click of a single button. On the group title bar there is an “Add Group” button on the far right.

Adding Custom Fields

Custom Fields allows you the opportunity to create and add niche specific fields to capture data in. The list of these can be found underneath the Pre-Defined Fields on the right hand side of the screen.

When you create your first form, your list of Custom Fields will be blank. Once you’ve added new custom fields, they will be available for you to use across all future forms.

To create a new custom field, you will first need to click on the “Add New” button. This is located at the far right of the Custom Fields header bar.

The Create Field pop-up window will display the options you have to choose from.

Choosing a new Text Field as an example, you are then presented with the configurable attributes related to that field type. For a text field you have the following:

• Required – Checkbox to enable/disable if this field should be mandatory
• Label – The title or name given to the field e.g. “Phone”
• Help Text – Information to the customer to help them add the correct information that sits underneath the field
• Placeholder – This is the instruction text that will sit in the field but disappear as soon as the customer begins typing
• Value – Optional default value
• Sub Type – What type of Text field is it. Standard Text, Email, Password etc

Once you have set all of the attributes, click on Save and the new Custom Field will be added to your list on the right hand side of the screen. If you already have some then the new one will be added to the bottom of the existing list.

To add the new custom field you simply click on the green circled + as per the Pre-Defined Fields. It will be added to the bottom of the Form list and then have a grey circled tick next to it in the list.

With the form now completed as required, click the Save button. This will save the form and redirect you to the All Forms list under Website Forms menu module.

This guide is an overview of the embed form option. The process is pretty simple, first, you build and customize a form within LeadSnap. Next, you copy a small piece of code and it onto your website. Wherever you paste the code that is where your form will appear. This creates a direct connection to LeadSnap. As users fill out the form on your website their submissions will be available immediately within our system.

Video Overview

Benefits of the Embed Form Option

• Can work with any type of website
• Quick and easy to set up
• No software conflicts with Google Ads
• Allows country-level IP address filtering
• Form submissions instantly available within LeadSnap

Website Forms

Before we dive into the embed form option, it is necessary to have a good understanding of website forms. We will cover it briefly here but it is recommended that you read through the website forms documentation to gain a solid understanding of the role they play within the lead management module and how they relate to embedded forms.

Every company has an associated website form. When you first created your company you were given a choice of which form to use. You can create, edit, or change the website form at any time. Your website form is composed of fields, these fields align with the fields on your website. For each new field that you create on a website form, it creates a column, similar to a column on a spreadsheet to store values from your website. These columns are able to searched, filtered, sorted, and used in reports throughout the lead management module. It is recommended to reuse the same fields in different forms whenever possible.

The website form associated with your company is the starting point of your embedded form. From the edit form page, you can customize the visibility of the fields as well as the types of fields and their options. The integrations page will allow you to further control the behavior of the embedded form and styling through the use of custom HTML or CSS.

Step by Step Guide

Creating an Embed Code

You will first need to go to the Integrations module in the left-hand navigational menu. Click on Settings, this will expand and provide you further options. Then click on Integrations and you will see a screen similar to the one below.

Click on the EMBED FORM button on the Embed box. This will take you to the Create Embed Code screen

You need to first select the Company you wish to create an embed code key for. Click on the dropdown arrow at the far right hand side of the Company field.

This will present you with a list of all the companies you have setup. Scroll down to the one you want and select it.

With the company selected you will now need to click the Submit button to create a new embed code key.

A dialog box will pop up offering you three options. This is where you choose how the site should respond to the customer once they have completed and submitted your form.

The Redirect URL allows you to the page you would like to send users to have they submit a form, such as a thank you page.

For something more simple, the Success Message will simply display the text you enter here in place of the form when they have submitted it.

You only can add ONE of these options. You must not only complete the field but click on the option you want to use so that you have a blue circle next to it.

If you do not select any of the options, or you skip this part, the system will provide you with a generic “Thank you for Submitting” message.

For the purposes of this support guide, we will use the Success Message.

Finally, for those code gurus out there, you have the option of adding some HTML and CSS to further customize the style of the form.

When you click on the Save button you will then be presented with a Create Embed Code pop up screen. This will have your newly created embed code key and instructions on how to use it.

Click on the Copy Script button will put the script into your system clipboard. It will also display a “Script copied Successfully!” message underneath the script window.

Embedding Code in Site

Now you have created the form and the embed script, you need to add it to your site.

Weebly

Scroll down the tools in the left hand side until you find the “</> Embed Code” widget. Drag this onto your page. Clicking on it will bring up the Custom HTML options. Select “Edit Custom HTML”, this will enable you to add the embed code you created earlier.

Paste the embed script from your form into the script area and click outside of the box. This will save the editing and connect to the LeadSnap system and fetch the form you created.

Don’t forget to publish your changes so you don’t lose them.

WordPress

Click on Pages and select the page you want to embed the form on.

Select the “Text” tab and paste the embed form code into the text field.

Finally Click on the “Save Draft”, “Save as Pending” or “Update” button, depending what state your current page is in development, to make sure you don’t lose the changes.

Click on Preview and you will now be presented with your page displaying the new embedded form.

This support guide explains the how to assign a Company to the Website Forms of the Leads Management module.

Step by Step Guide

If you have not done so already, you will need to first Add New Form by following the relevant support guide. You will also need to have a Company setup to assign the website form to. If you have not already done so, you will to follow the Add A New Company support guide.

Overview

You need to assign a website form to a company to be able to generate the script that will be used to embed the form onto your website.

Edit Company

First you need to get to the edit company screen. To do this you need to select Settings on the left hand navigational menu. This will then expand to provide further options.

From these options, click on Companies. This will further expand to provide company specific options. Click on All Companies and you will be presented with a screen like the one below.

Scroll down and find the company you wish to assign the website form to. You will need to click on the Edit button at the far right hand side of company’s row.

You will now need to click the dropdown arrow on the Website Form field. This will present you with the list of forms you have created.

Select the form you wish to assign to the company. To save this you will have to click the Update button towards the bottom of the screen.

Returning to the All Forms listing, via Settings on the left hand navigational menu, you will now see the form has the company associated.