How to use the Lead Generation element
The main purpose of the "Lead Generation" element is to provide a means through which website visitors can sign up to your newsletter/webinar, or sign up to become users on your WordPress website.
In order to achieve this, you will need to add a “Lead Generation” element on your website and connect it to one of the mailing/marketing services that you are using, through an API connection.
Here is how you can do that:
First you have to click on the plus sign from the right sidebar to open the list of elements. Look for the “Lead Generation” element. When you find it, drag & drop it to the desired place on your page:
You will see that the "Lead Generation" element is a simple form that you can further adjust to suit your needs. The options of the element will appear in the left sidebar. You can use these options to set up and customize the element.
As mentioned above, for the “Lead Generation” to work properly, you will need to connect it to a service. This may be an email delivery service, a marketing tool or even WordPress, depending on the goal you want to achieve with this element.
You will see that by default, the “API” option is selected in the “Connection” section of the “Main Options” in the left sidebar:
This is the option that needs to be selected in order to connect the “Lead Generation” element to a service.
Send leads to
Below the “Connection” section you will see the “Send leads to” section. Click on the “Add Connection” button from here:
This will open a window with two options. If you have not set up any API connections for your website yet, then click on the “Go to the API dashboard” option, to set up the API connection you want to connect the “Lead Generation” element with:
If you have already set up the API connection you want to use, click on the “Choose connection” section to open its drop down:
In the drop down, you will see a list with the connections that are available. This list is based on the connections that you have already set-up in the Thrive Dashboard of your WordPress website:
Look for the API connection you want to use from the drop down and when you have found it, click on it to go on.
Note: Here, besides connecting the "Lead Generation" element to a service through an API connection, you also have the possibility to add an "Email Connection" to the element.
With this "Email Connection" you can receive direct email notifications, whenever someone will sign up/complete the form that you create with the "Lead Generation" element. You can find a step-by-step tutorial about how to set up an "Email Connection" here.
Set Connection Details
Please keep in mind, that this step can vary, depending on the service that you are using.
In this article we will take MailChimp as an example. This is how the window will look like after you choose the MailChimp connection:
Since this service provider lets you create separate mailing lists (to divide users in certain categories), you can choose which mailing list to use, by clicking on the field under the “Choose your mailing list” option:
The same thing goes for groups too. Groups inside mailing lists are meant to divide the users even more. Thus, if you have previously set up groups in your mailing lists, in the “Choose your grouping” section you have the option of choosing a group for your "Lead Generation" element:
Furthermore, you can also choose whether you want your element to contain a "Single opt-in" or a "Double opt-in":
If you choose the "Single optin", then, the users will be automatically added to your mailing list, right after they sign up; whereas, if you choose the "Double opt-in", your users will have to confirm their email address before being added to your list.
You can find more information on the difference between the "Single-" and "Double opt-in" here.
In the “Tags” section from the same window you can enter tags for this “Lead Generation” element:
This “Tag” section is visible only for tag-based email service providers and it is used for better segmentation of the visitors who sign up on your website.
The tags that you add here will be displayed in the list you have on the email service provider's platform (in our case MailChimp), along with the information about the new contact who signed up.
Set Form Fields
After you have connected the “Lead Generation” element to an API connection, you can set up the fields that will appear in it.
You can do this using the options from the “Form Fields” section:
By default, the “Name” and the “Email” field are already added to the element. The "Email" field is naturally set as mandatory, because this is needed to sign the person up, but setting the rest of the fields is up to you.
You can edit any of the fields by clicking on the “Edit” option (pencil icon) next to it. This will open a drop down with the options you have for editing the field. Let's take the "Name" field for example:
You can set the "Name" field to be required as well, by checking the “Required” checkbox, or you can change its placeholder by deleting the current placeholder and replacing it with the one you want displayed.
The placeholder is the name of the field, that is displayed inside the field. If you want, you can also replace this with a description. For e.g. instead of "Name", you could write "Please write down your name in this field".
Furthermore, if you want the field to have "Autofill Settings", you can click on the "Autofill Settings" section. Then also "Activate Smart Complete" and define the settings in the drop-down that opens, just as described in this article.
After you finish with editing the field, all you have left to do is to click on the “Apply” button to apply the changes.
Add the Phone field
You can also add a new field, the "Phone" field, if you wish, by clicking on the “Add new” button and entering the necessary details (enter a placeholder, choose whether or not you want the field to be required) in the drop down that opens:
Note: Please take into account that not all services/API connections support the phone number field!
Add a Custom Field
Besides having the three basic fields (Email, Name and Phone) you can also add a custom field to your "Lead Generation" element.
Note: Please keep in mind that not all autoresponder services/API connections support adding custom fields. You can find out more about these here.
Since MailChimp is one of the services that the custom field integration has been created for, in this case, you can add a custom field to the form.
To do that, first click on the on the “Add new” button, as described above, in the case of adding the "Phone" field. Then click on the field from the "Field Type" section of the drop down to open it:
You will see the "Text", the "URL" and the "Hidden" custom field options appear:
In order to add either of these, simply click on one of them and then set up the custom field.
If you select the custom "Text" field, first you will have to add a placeholder for the field (this should represent the info you want users to complete in this field) and then choose whether you want the field to be required or not:
Once you have done that, you will have to select which field in MailChimp should the information from this "Text" field be added to. To do that, click on the "Select field" section and choose the field from the drop-down that opens:
After you have also selected the MailChimp field, all you have left to do it to click on the "Apply" button (as shown in the image above) and the custom field will be added to your element.
The URL field:
If you choose to add a custom "URL" field to the element, you will have to set up the field similarly as the custom "Text" field.
You will have to define a placeholder for the field, choose to make it required or not, and select a MailChimp field where the information that will be completed in this custom "URL" field will be added:
The difference between the custom "Text" and the "URL" field is that the latter should be used with the specific purpose of requesting a URL, a link from the people who will complete the form.
After you have set up the "URL" field, you can click on the "Apply" button and the new custom field will be added to your element.
If you select this custom field type, you can add a hidden field to your element. This means that the respective field will not be displayed for the visitors of your website, but it can still contain and transfer information to your MailChimp account.
In order to achieve this, add a label to the field (something that represents the information that will be in this field) and use the "Select field" drop-down to choose the corresponding MailChimp field:
Once this is done, you will have to use the "Autofill Setings" to set up what information should this hidden field be automatically completed with. First, open the "Autofill Settings" by clicking on this section:
Then, from the drop down that opens, activate the "Smart Complete" feature and use it to set up the information that should automatically be completed:
If you need detailed step-by-step information about how to use the "Smart Complete" feature, please read this article.
After you have set up everything related to the custom "Hidden" field, click on "Apply" to add the field to the element.
Note: The "Autofill Settings" → "Smart Complete" feature is available whenever you add a new field (regardless if it is a basic or a custom field) to your element. As mentioned above, we have a separate article about how to use this feature. So if you want to find out more about it, please check out the article here.
Moreover, if later on you decide that you do not need the “Name” or the “Phone” fields anymore, you also have the possibility to delete them by clicking on the little trash icon next to them:
After Successful Submission
The next step is to choose what happens after someone uses the “Lead Generation” element to sign up. You can do this with the help of the “After Successful Submission” section.
You have two possible options here: you can either redirect the users to a custom URL or show a success notification.
By default, the “Redirect to Custom URL” option is selected. If you click in the field where this appears, a drop down will open with the other option as well:
Choose one of the two options here and then click on the “Apply” button. Once you do that, you will have to do the following:
Redirect to Custom URL
In the case of the “Redirect to Custom URL” option you will have to add the URL. In the “Target URL” field that is displayed, you can enter the custom URL, the link to the page where you want to redirect the users to, after they sign up:
You can also start typing the name of one of the pages from your website that you want to redirect users to. The system will search through the pages of your website and show you a list with results that match your search. You can simply select the page you want from the list and it will be added as the “Target URL”.
Autofill form inputs on target URL
There is one more thing you can do if you have chosen the “Redirect to Custom URL” option. You can activate the “Autofill form inputs on target URL” option, that is under the “Target URL” field, by checking the box next to it:
This option is useful if you have chosen the “Target URL” to be a page from your website that also has a “Lead Generation” element on it. If you activate the “Autofill form inputs on target URL” option, whenever someone signs up and they will be redirected to the other page, they will not have to enter their details again.
The other “Lead Generation” element, from the second page, will be filled in automatically with their details: Name, Email address and/or Phone number, depending on your setup.
Show success notification
In the case of the “Show success notification” option, a field will appear where you can enter the success notification that you want display after someone signs up. By default the text “Success!” is entered here, but you can easily delete it and replace it with your own text:
Once you have also set up what happens after a successful submission, the “Lead Generation” will be customized and connected to the service of your choice.
Besides connecting the “Lead Generation” element to a service through an API connection, you also have the option of doing an HTML integration instead. This means that you can set up your connection by inserting an HTML code.
The difference between these two ways is that the HTML integration gives you the possibility of adding extra fields with the help of an HTML Autoresponder Code.
In order to do this, simply click on the “HTML Code” option from the “Connection” section of the “Main Options”:
This will open a field where you can insert your HMTL code and then, you will have to click on the “Generate Form” button in order to apply the HTML code to the “Lead Generation” element:
When you click on the “Generate Form” button, you will see the changes directly in the editor, applied to the “Lead Generation” element. The customized fields will be added to the element.
After you generate the form, you will be able to edit the "Form Fields" using the "Form Fields" section below the "Generate Form" button:
In order to edit one of the fields click on the "Edit" option (pencil icon) next to them. Then, you can edit the field exactly like you would edit the field added for an API connection, as shown above.
Moreover, you can also delete the fields that are not mandatory, by clicking on the little trash icon next to them.
Besides the "Form Fields" you can also use the "Hidden Fields" section, in case the form you have generated contains hidden fields:
If you click on the "Edit" option (pencil icon) next to one of the hidden fields from this section, you will be able to use the "Autofill Settings" → "Smart Complete" feature for it, as described above.
After setting up the fields of the "Lead Generation" element, you can also set up the "Advanced" options for it.
Note: The only "Advanced" option that is available when you add an HTML Code to generate your form, will be the "Edit error messages" option. The rest of the "Advanced" options are available in the case of an "API Connection" setup of the element.
First, click on the “Advanced” section of the “Main Options”:
This wil display the “Advanced Options” of the “Lead Generation” element. They are as follows:
Enable Checkbox for explicit consent
If you activate this option, a checkbox will appear on your form with a default message, that you will have to replace with information about the checkbox:
In order to edit the default message you will have to use the "Edit Form Elements" option, the first one from the “Main Options”. If you want to find out more about how to use this checkbox, take a look at this article.
Add Captcha to prevent spam signups
If you wish to get ahead of spam signups, you can add a captcha system to your “Lead Generation” element. In order to do this, you must first have an API connection set up with Google ReCaptcha. If you need help with this, please check out this tutorial.
After you activate the "Add Captcha to prevent spam signups" option, you can select the theme, the type and the size for your captcha:
Edit error messages
After clicking on this option you will see a pop-up window open with various types of error messages that you can customize. You can replace the default messages by typing in the messages that you want your users to see, if they do not fill out the respective fields correctly:
You also have the option of adding an additional error message called “Signup failed”. If you activate this option you will be able to set one more error message for the rare cases when the sign up will fail. Just type in the message you want to show in these cases in the field that appeared with the default “Error” text:
After you have finished setting up the error messages, click on the “Save” button to change them and apply them to the element.
Edit Form Elements
This is the first option of the “Main Options” that appears in the left sidebar. After you have set up the element, you can use this “Edit Form Elements” option to edit the design/the way various parts of the “Lead Generation” element (such as the fields or the sign-up button) look like.
Click on the "Edit Form Elements" button to open the editing mode of the “Lead Generation” element:
Note: Please bare in mind that while editing the elements of the form, you will not be able to edit other elements on the page.
You can edit the form elements, meaning the different parts of the “Lead Generation” element, by clicking on each of them separately and then, using their sidebar options.
For example, the fields inside the element are called “Lead Generation Input”. If you click on one of them, you will see the options of the “Lead Generation Input” appear in the sidebar:
You can use these options to customize the field and when you are done, you can go on with clicking on another form element that you want to customize.
You also have the possibility to drag & drop the components inside the "Lead Generation" element, to change their position. For instance, you can drag the "Name" field next to the "Email field".
When you have finished editing the elements, you will need to click on the "Done" button from the lower middle part of the page to exit the editing mode of the element:
Last but not least, you also have the option of customizing the "Lead Generation" element even further, using the more general options. For example, you can adjust its positioning on the page, using the “Layout & Position” options, or add a background color to it using the “Background Style”option.
These general options can also be found in the left sidebar, below the “Main Options” of the "Lead Generation" element.
Since these options are available for almost every Thrive Architect element, we have separate tutorials about each of them in our knowledge base.
If you want to find out more about the general options or other Thrive Architect elements, please take a look at the tutorials here.
After you have finished setting up every aspect of the "Lead Generation" element, you can save the page and preview it to see how the element will look like for the visitors of your website.
While previewing, you can also try to use element to see how it will work for people who want to sign up through it.
Hopefully, this article was useful for you. If so, please reward our efforts with a smile below :)