Applicable plans
Sprout Blossom Garden EstateForest


When it comes to lead generation, web forms is a helpful tool for businesses to capture website visitors and convert them into leads. With Freshsales, users can set up and modify the UI of their web forms with relative ease.


But the customization of Web forms goes beyond mere UI changes. By obtaining access to web form events, users can gain better control over the functioning of the web forms and use the same to implement functionality such as:

  • Pre-filling fields

  • Validating fields

  • Capturing UTM parameters

  • Triggering webhooks such as FreshChat pop-ups

  • Sending data to Google Tags, etc.


If you are a developer, here’s how you can carry out the same (Scroll down further if you are looking for a working example).


TOTAL STEPS: 3


MINIMUM TIME REQUIRED: 20 Min



DETAILED STEPS:

Note:
To execute the following steps, you need a web form installed on your website. If you haven’t created a web form already, learn to create one before you proceed further.



1. On your WordPress account, head to the dashboard where you had embedded your web forms link. If you had embedded it in the footer
of your site, then your path should be:

My Site > Themes > Customize > Widgets > Footer > Custom HTML > Save


Here’s how it appears:
 
2. Find the existing code that already exists and incorporate the following piece of code before the web form script:
    

<script>

var WebFormEvent =
{

afterInstall: function()

{
console.log("After installation hook triggered.");        
}

,

beforeSubmit: function()

{

console.log("Before submit hook triggered.");        
}

,

afterSubmit: function(event, data, error)

{          
console.log("After submit hook triggered.");          
console.log("Data => ",data);
if(error)\{ console.log("Error => ",error); }

}

}
</script>


Here’s how your new code will appear:

This script gives developers to access to three events-

  • After Install: This event is triggered right after the form gets generated on the website.  
    This is how the code will look like:

    This is how the output will appear on your console:

  • Before Submit: This event is triggered right after the submit button is pressed and before the data is sent to the server.
    This is how the code will look like:

    This is how the output will appear on your console:

  • After Submit: This event is triggered after a record is created on the server. A copy of this data can be sent to a place of the user’s choice by using this event.
    This is how the code will look like:

    This is how the output will appear on your console:


                                                                        __________________________________


WORKING EXAMPLE:


Let’s explore an example for each of the event. Here’s how the entire code will appear:


Individual events:
1. After Install: Let us assume that you wish to create a form that has a prefilled field which cannot be edited. With ‘After Install’ functionality, a code for such a set up can be created and  would appear as follows:

afterInstall: function()

{

console.log("After installation hook triggered.");        

WebForm.$('input[name="lead[first_name]"]').val('James').attr('disabled','disabled')

}


Output:

2. Before Submit: Let us assume that you wish to inject a value such as UTM parameter into your form right before it is sent to the server. The ‘Before submit’ functionality allows you to inject this value automatically right after the submit button is clicked. A code for such a set up would appear as follows:


beforeSubmit: function()

{

console.log("Before submit hook triggered.");        


WebForm.$('<input>').attr({

           type: 'hidden',

           name: 'lead[custom_field][cf_utm_param]',

           value: getQueryVariable('utm_param')

         }).appendTo('.fs-webform-container form');

}


Output:

3. After Submit: Let us consider a scenario where you wish to integrate Freshchat with your forms and would want the chat to pop up with a personalized  <first name> as soon as the form is submitted. In such a case, the ‘After Submit’ event will send a copy of the submitted data from the server to a place of your choice. In this case, the webhook can be Freshchat. The code for the same would appear as follows:

<script src="https://wchat.freshchat.com/js/widget.js"></script> 

<script>

.

.

.

.

.

.

.

afterSubmit: function(event, data, error)

{          

console.log("After submit hook triggered.");

//data injected as string, should be converted to json

data = JSON.parse(data);

window.fcWidget.init({

token: "b38c7925-5edb-4bcc-bf4c-e4a3a2a711e3",

host: "https://wchat.freshchat.com"

});

var lastName = findData(data, 'lead[first_name]')+" "+findData(data, 'lead[last_name]');

window.fcWidget.user.setFirstName(lastName);

var email = findData(data, 'lead[email]');

window.fcWidget.user.setEmail(email);          

console.log("Data => ",data);

if(error){ console.log("Error => ",error); }

}

</script>


Output:



By executing this code, you can now get more autonomy over how your Web forms works. This can help you customize the working of your forms according your choice.