If you have a contact form on your website you can integrate LiveCall with it so that anytime someone fills in the form and provides their phone number, LiveCall will automatically dispatch a call connecting you with this user. There are two ways you can do that:

Method 1:  Using CSS selector

This is the easiest way to integrate contact form with LiveCall, however if the contact form is using Javascript there is a high chance that it will not work. Then you have to use method 3 below.

Passing phone number

Go to Widgets’ Design end edit the widget. Scroll down to section Behavior and tick Automatically integrate with forms.

Now you need to input the CSS selector for the phone number.

To do it go to your website, right click the phone number input field and select Inspect hover the selected element right click and Copy >> Copy selector

Then paste it to Phone number input CSS selector field and save.

Passing Custom Fields

If passing a phone number works using this method, so will passing custom fields.

The only thing you need to do is copy the selector of the custom field following the same steps and paste it to the Input CSS selector for automatic form integration field.

‍

Method 2: HTML Attribute

Passing phone number

When you add the following attribute to the phone input element in your form: data-livecall-role="callback-phone-number-input" we will observe the form's submit event and automatically submit the callback to our servers.

The resulting input should look similarly to this:

<input type="tel" name="phone-number" data-livecall-role="callback-phone-number-input" />

However this solution might not always be ideal. If your form is handled by some JavaScript code, or if you have validation and don't want to submit the callback before you're sure that the data in the form is valid, you should consider the JavaScript method (Method 3).

‍

Passing Custom Fields

If apart from the phone number you want to pass additional information like first name or email you can also do it by adding following attribute to the given field data-livecall-custom-field

example: <input name="name" data-livecall-custom-field="firstname" />

where „firstname” is the name of the custom field and can be checked in the Console with the following command: livecallClient.settings.widgets[0].customFields

‍

Method 3: JavaScript

Passing phone number

If your form is handled by JavaScript or it needs to be validated before submitting the callback, you should integrate the form using JavaScript. To do that, when you're ready to submit the form, call the livecallClient.submitCallback() method. Like this:

livecallClient.submitCallback($("input[name=phone-number]").val());

Replace the $("input[name=phone-number]").val() part with an appropriate code for retrieving the phone number from your form.

Passing Custom Fields

If apart from the phone number you want to pass additional information like first name or email you can also do by submitting the given values.

Example of WP7 integration:.

<script type="text/javascript">

  jQuery(function() {

jQuery(".wpcf7-form").on("submit", function() {

   livecallClient.submitCallback(jQuery("[name=tel-195]").val(), {

     customFields: {

       firstName: jQuery("input[name=text-556]").val(),

       amount: jQuery("input[name=number-74]").val(),

       email: jQuery("input[name=email-736]").val()

     }

   });

});

  });

</script>

‍

Where text-556, number-74, email-736 are names of input fields in your contact form,

And firstName, amount, email are names of the custom field and can be checked in the Console with the following command: livecallClient.settings.widgets[0].customFields

‍