SudoWorkspace Web to Lead feature allows you to build a web form based on lead fields and custom fields to place it on your website, landing page, etc, as an iframe.
The visitors can then enter their names, email addresses, upload attachments, and other basic information to create a lead directly in SudoWorkspace.
To create new web to lead form, from the main admin menu, navigate to Setup -> Leads -> Web To Lead
Click on the button on the top left side New Form
NOTE : You will be able to build the form after you first create the initial form, including all the settings.
When you save the initial form settings, you will be automatically pointed on the Form Builder tab and on the left side, you will be able to see all the available form fields taken from the lead profile. Note that if you have custom fields for leads, you will be able to include your custom fields inside the form easy with drag and drop.
There is only 1 exception where the custom fields of type Hyperlink do not have support to be included in the web to lead form.
To add a field to the form just drag the field to the right side of the form area.
After you drag the field, you will be able to see on the left side that the dragging ability to this field will be disabled. You can only add the field in the form once to prevent confusion with the form data.
If the fields don’t fit exactly for your needs, you can customize the labels, add help text, placeholders and make them required. When you drag the field in the form area, just hover over the field on the top right side, and you will be able to see 2 buttons (edit and remove)
After you customize the form, click on the bottom left button Save, and click on the tab Integration Code to get the code you need to add to your website . The code will be placed as an iframe, and you can adjust the width and height directly to the code snippet provided by SudoWorkspace.
If you need to style the color of the input fields to fit with your website, you can create custom.css file in assets/css and apply the necessary styles.
custom.cssassets/cssExample changing input border color:
body.web-to-lead input {
border-color:red;
}body.web-to-lead input {
border-color:red;
}body.web-to-lead input {
border-color:red;
}Example changing submit button background color:
body.web-to-lead #form_submit {
background:red;
}
body.web-to-lead #form_submit:hover,
body.web-to-lead #form_submit:active {
background:green;
}
body.web-to-lead #form_submit {
background:red;
}
body.web-to-lead #form_submit:hover,
body.web-to-lead #form_submit:active {
background:green;
}
body.web-to-lead #form_submit {
background:red;
}
body.web-to-lead #form_submit:hover,
body.web-to-lead #form_submit:active {
background:green;
}
Via FTP/cPanel, go to application/helpers/ and create (if it doesn’t exist) file my_functions_helper.php and add the following code snippet:
application/helpers/my_functions_helper.phphooks()->add_action('web_to_lead_form_submitted','my_web_to_lead_form_submitted_redirect_to_custom_url');
function my_web_to_lead_form_submitted_redirect_to_custom_url($data){
echo json_encode(array(
'success'=>true,
'redirect_url'=>'http://yourcustomurl.com'
));
die;
}
hooks()->add_action('web_to_lead_form_submitted','my_web_to_lead_form_submitted_redirect_to_custom_url');
function my_web_to_lead_form_submitted_redirect_to_custom_url($data){
echo json_encode(array(
'success'=>true,
'redirect_url'=>'http://yourcustomurl.com'
));
die;
}
hooks()->add_action('web_to_lead_form_submitted','my_web_to_lead_form_submitted_redirect_to_custom_url');
function my_web_to_lead_form_submitted_redirect_to_custom_url($data){
echo json_encode(array(
'success'=>true,
'redirect_url'=>'http://yourcustomurl.com'
));
die;
}
Don’t forget to include the <?php opening tag at the top of the file if it’s not already added.
<?phpTo include your company logo in the form, you can either share or embed the URL with a query string parameter as shown below:
https://your-perfexcrm-installation.com/forms/wtl/715d3e13cea500fc168faa4e3dcb8e24?with_logo=1The forms can be shared directly to your customers without actually embedding the form on your website. This feature is useful, for example, if you want to include a link in emails, SMS, etc…
In order for SudoWorkspace can know that the form link is shared directly and not embedded into an iframe, you need to specify the URL query string. In this case, SudoWorkspace will provide better styling to the form.
https://your-perfexcrm-installation.com/forms/wtl/715d3e13cea500fc168faa4e3dcb8e24?with_logo=1&styled=1https://your-perfexcrm-installation.com/forms/wtl/715d3e13cea500fc168faa4e3dcb8e24?with_logo=1&styled=1By default, the form fields will be added in a single column full width of the document if you want to customize the form and have the fields displayed in multiple columns we have added the ability to achieve this with custom classes applied to the field, you can add up to 12 columns in 1 row.
In the following example, we will create 2 fields in 2 columns and 1 row.
Keep in mind that the columns won’t be applied in the form builder, only when the form is viewed by accessing the integration link or is in an iframe.
Here is a quick example:
Final result:
Assume that in your form builder you have 4 fields, as in order Name, Email Address, Company, Address.
For the first 2 fields, click on the EDIT button on the top right side of the field wrapper to slide down the edit area. In the class input, add a class for both fields form-col-6 as shown in the image below.
form-col-6Save the form by clicking on the Save button, and preview the form from the integration link to see the final result.
As mentioned before, you can add up to 12 columns. In this case, form-col-6 + form-col-6 = 12 , If you want to add 3 columns, apply the class form-col-4 on 3 fields (form-col-4*3 fields will be 12 and the fields will fit the document) that are one by one in order.
form-col-6form-col-6form-col-4