So many people have asked us how to add custom callBacks, I know it took us little long time to make it live,

But - all your waitings are over, Keep reading

To add custom callBacks you need to have little bit knowledge about javascript.

Adding Custom CallBacks

The very first thing is we need to add a new script tag underneath the loadforms-script.js script tag

your code should look something like this

<script type="text/javascript" src="https://loadforms.com/client/v1/loadforms-script.js" ></script>
<script type="text/javascript"> 
	     /* Adding custom callBacks */
</script>

Create a new variable name it whatever you want. In this example, we will name it as ldCustomCallBack

we will create a new instance of the already existing class ldForms() this way we can have access the methods and properties of that class.
Assign this to the recently created variable as shown below:

var ldCustomCallBack = new ldForms();

By this, our variable ldCustomCallBack will have access to all the methods and properties so that we can call few of the in-built methods.

Before that, we need to write onSubmit event on our HTML form tag

document.getElementById('contactform').onsubmit = function(e) {
	e.preventDefault();
	
}

In the above code as you can see we wrote a submit event on form tag which has the id contactform.
Here you really need to have the understanding of javascript events.

All the codes till now are pretty much explainable

e.preventDefault(); is used to stop all the default actions, as this will prevent the form from submitting.

Now, we need to call the in-built functionality we are going to call in-built methods by using our variable ldCustomCallBack which we have already created.


var ldCustomCallBack = new ldForms();

document.getElementById('contactform').onsubmit = function(e) {
	e.preventDefault();
    
    /*Calling AJAX */
	ldCustomCallBack.callLoadForms(e, function(response) {
		console.log(response); /* console log to see response data */
        
        /* Call In built ThankYou popup */
		ldCustomCallBack.globalCallBack(response);
	});
}

In the above codes ldCustomCallBack.callLoadForms method is responsible for calling the ajax functionality.
This function is responsible for making ajax request.

Note: All the rules for creating HTML form need to be followed exactly in same way as mentioned in the getting started docs.

ldCustomCallBack.callLoadForms has two parameters one is the event and other is the response callback, If you get a response this call back function will be executed.

This call back function has a response parameter which contains the responses data try consoling this parameter to know more about the response data.

Inside this call back function, we wrote
ldCustomCallBack.globalCallBack( response ); this function will call the in-build Thank-you popup.

You can do whatever you want to do in place of this method

- OR -

You can write your own code and then call this method to display the thankyou popup.

- OR -

Even you can redirect the page to /thank-you without calling the
ldCustomCallBack.globalCallBack( response ); method.

Complete code shown below:

<script type="text/javascript" src="https://loadforms.com/client/v1/loadforms-script.js" ></script>
<script type="text/javascript"> 
	
	var ldCustomCallBack = new ldForms();

	document.getElementById('contactform').onsubmit = function(e) {
		e.preventDefault();
	    
	    /*Calling AJAX */
		ldCustomCallBack.callLoadForms(e, function(response) {
			console.log(response); /* console log to see response data */
	        
	        /* Call In built ThankYou popup */
			ldCustomCallBack.globalCallBack(response);
		});
	}
	
</script>

Hope, You loved the article

If you really feel you have more control over HTML forms using loadforms.com, So please do share this article and spread the word.

If you got any of the suggestion or any of the feature functionality please let us know about it.