Overture allows you to post information from a form on your website to create contacts and bookings.<\/p>\n
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.<\/p>\n
Inside your Overture account, as an admin user, head over to your settings and in the sidebar look for the \u2018Custom Web Form\u2019 option. To begin the process, you will need to generate a web form key, click on the \u2018Generate Key\u2019 button.<\/p>\n
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.<\/p>\n
Example form first steps \u2013 Adding the key and setting the form action<\/p>\n
\n<form method="post" action="https:\/\/overturehq.com\/formapi\/webform\/submit.json">\n <label>Name:<\/label>\n<input type="text" name="personName">\n<label>Email Address:<\/label>\n<input type="text" name="personEmailWork">\n<label>Phone Number:<\/label>\n<input type="text" name="personPhoneWork">\n<label>Event Date:<\/label>\n<input type="text" name="Date">\n<label>What would you like to discuss with us?<\/label>\n<textarea name="personNote"><\/textarea>\n<input type="submit" value="Send Enquiry">\n<input type="hidden" name="key" value="Mzk4MzkwMTQxNjM=">\n<\/form><\/pre>\nIn the example form please note the Overture URL added as the action the form must post to.<\/p>\n
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 \u2018Add Field\u2019 button and enter the URL of where the form will be sending the information from.<\/p>\n
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.<\/p>\n
Fields available<\/strong><\/p>\n
Contacts<\/strong><\/p>\n
\n'personName'\n'personFirstName'\n'personLastName'\n'personEmailWork'\n'personEmailPersonal'\n'personPhoneWork'\n'personPhonePersonal'\n'personWebsiteWork'\n'personWebsitePersonal'\n'personAddressLine1'\n'personAddressLine2'\n'personAddressLine3'\n'personAddressCity'\n'personAddressState'\n'personAddressZip'\n'personAddressCountry'\n'personNote'\n'companyName'\n'companyEmailWork'\n'companyPhoneWork'\n'companyWebsiteWork'\n'companyAddressLine1'\n'companyAddressLine2'\n'companyAddressLine3'\n'companyAddressCity'\n'companyAddressState'\n'companyAddressZip'\n'companyAddressCountry'\n<\/pre>\nBookings<\/strong><\/p>\n
\n'booking1Date'\n'booking1Name'\n'booking1Note'\n'booking1ArtisteName'\n'booking1VenueName'\n'booking1VenueAddressLine1'\n'booking1VenueAddressLine2'\n'booking1VenueAddressLine3'\n'booking1VenueAddressCity'\n'booking1VenueAddressState'\n'booking1VenueAddressZip'\n'booking1VenueAddressCountry'\n<\/pre>\nKey<\/strong><\/p>\n
\n'key' - Required in the value attribute of a hidden input field\n<\/pre>\nYou can also target Overture\u2019s 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.<\/p>\n
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 \u2018Guests\u2019 and \u2018Budget\u2019.<\/p>\n
It\u2019s best to keep these field names short since they will form part of the name attribute in the HTML.<\/p>\n
Once setup inside Overture head over to your webform and add a label with a \u2018for\u2019 attribute of<\/p>\n
\nbooking1Info-Name_Of_Field\n<\/pre>\nAnd a related form field with a matching name<\/p>\n
For example\u2026<\/p>\n
\n<fieldset class="event-further-information">\n <label for="booking1Info-Budget">Rough idea of budget?<\/label>\n<input type="text" id="budget" name="booking1Info-Budget"><\/fieldset>\n<\/pre>\nYou can add as many of these fields as required as long as they have a related field inside the Overture Bookings Settings.<\/p>\n
Sending data to booking further information fields allows you to send data that doesn\u2019t 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.<\/p>\n
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..<\/p>\n
\n\/\/ Form to submit via ajax.\n$("form").ajaxForm({\n"clearForm": false,\n"resetForm": true,\n"beforeSubmit": function() {\n},\n"success": function(json) {\nif (json.success == true)\n{\n\/\/ Form has submitted successfully.\nalert("Thank you for getting in touch.");\n} else {\nfor (name in json.errors) {\n$("form").find("[name$='" + json.errors[name] + "']").css("border-color", "red");\n};\n};\n},\n"error": function() {}\n});\n<\/pre>\nSquarespace and WordPress<\/strong><\/p>\n
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.<\/p>\n