Integrating Web Forms With Overture API

Overture allows you to post information from a form on your website to create contacts and bookings.

This article shows you how to setup Overture to allow access to the API, setting up an example form and including a list of all the fields available for you to send data to.

Generate Unique Key

Inside your Overture account, as an admin user, head over to your settings and in the sidebar look for the ‘Custom Web Form’ option. To begin the process, you will need to generate a web form key, click on the ‘Generate Key’ button.

This key will need to be included somewhere in your form inside the name attribute of a hidden input field as the example shows below.

Example form first steps – Adding the key and setting the form action

<form method="post" action="https://overturehq.com/formapi/webform/submit.json">
  <label>Name:</label>
<input type="text" name="personName">
<label>Email Address:</label>
<input type="text" name="personEmailWork">
<label>Phone Number:</label>
<input type="text" name="personPhoneWork">
<label>Event Date:</label>
<input type="text" name="Date">
<label>What would you like to discuss with us?</label>
<textarea name="personNote"></textarea>
<input type="submit" value="Send Enquiry">
<input type="hidden" name="key" value="Mzk4MzkwMTQxNjM=">
</form>

In the example form please note the Overture URL added as the action the form must post to.

Adding Referrer

You will also need to setup a referrer inside Overture to tell Overture where you will be posting the data from. To do this head back to your Overture settings and click on the ‘Add Field’ button and enter the URL of where the form will be sending the information from.

You can now go ahead and build out the rest of your form from the fields listed below as the name attribute inside the form inputs.

Fields available

Contacts

'personName'
'personFirstName'
'personLastName'
'personEmailWork'
'personEmailPersonal'
'personPhoneWork'
'personPhonePersonal'
'personWebsiteWork'
'personWebsitePersonal'
'personAddressLine1'
'personAddressLine2'
'personAddressLine3'
'personAddressCity'
'personAddressState'
'personAddressZip'
'personAddressCountry'
'personNote'
'companyName'
'companyEmailWork'
'companyPhoneWork'
'companyWebsiteWork'
'companyAddressLine1'
'companyAddressLine2'
'companyAddressLine3'
'companyAddressCity'
'companyAddressState'
'companyAddressZip'
'companyAddressCountry'

Bookings

'booking1Date'
'booking1Name'
'booking1Note'
'booking1ArtisteName'
'booking1VenueName'
'booking1VenueAddressLine1'
'booking1VenueAddressLine2'
'booking1VenueAddressLine3'
'booking1VenueAddressCity'
'booking1VenueAddressState'
'booking1VenueAddressZip'
'booking1VenueAddressCountry'

Key

'key' - Required in the value attribute of a hidden input field

You can also target Overture’s further information fields on a booking. To do this, you first need to make sure that those fields are available by setting them up in a default further information block in your Overture booking settings.

Further Information Fields

In the example here I have setup a new block called Enquiry and added a few example fields from the form I have created, in this instance ‘Guests’ and ‘Budget’.

It’s best to keep these field names short since they will form part of the name attribute in the HTML.

Once setup inside Overture head over to your webform and add a label with a ‘for’ attribute of

booking1Info-Name_Of_Field

And a related form field with a matching name

For example…

<fieldset class="event-further-information">
  <label for="booking1Info-Budget">Rough idea of budget?</label>
<input type="text" id="budget" name="booking1Info-Budget"></fieldset>

You can add as many of these fields as required as long as they have a related field inside the Overture Bookings Settings.

Sending data to booking further information fields allows you to send data that doesn’t fit the standard Overture fields if you have information that is related to the contact name of the person submitting the form we recommend that you use person note to submit that data.

Submitting the data

The endpoint will respond with JSON encoded data. We recommend that the form is submitted asynchronously, below is an example of how that might be done using jQuery and the jQuery form plugin..

// Form to submit via ajax.
$("form").ajaxForm({
"clearForm": false,
"resetForm": true,
"beforeSubmit": function() {
},
"success": function(json) {
if (json.success == true)
{
// Form has submitted successfully.
alert("Thank you for getting in touch.");
} else {
for (name in json.errors) {
$("form").find("[name$='" + json.errors[name] + "']").css("border-color", "red");
};
};
},
"error": function() {}
});

Squarespace and WordPress

If you are designing a website for a client in Squarespace and are unsure how to use the Overture webform API here is an example file that has all the necessary HTML, JS and CSS to get a form up and running. You only need to change the fields where required to match the form your client would like.

Download example HTML.

You can copy and paste this code directly into the ‘add code’ to a page section on a Squarespace template.

For WordPress there are many form plugins that allow you to directly edit the form HTML adding the name attributes where required. For example, the Advanced Forms plugin should allow all the required integration requirements to be met