Connecting webhooks to a contact form
A webhook is a method that allows you to send information (an array of data about an event) from one site to another to process it there. For example, you need to connect a third-party service to Weblium, with which we do not have a native integration, but this service supports receiving webhooks. In this case, you can get the webhook URL (the link to which the data will be sent) from this service and connect this link to your contact forms. This way, when your customer send you a request through the contact form, this request will also be sent to the service you connected with the webhook.
Webhooks on Weblium are intended only for services to which you need to send information from Weblium.
Note: Using webhooks, data is sent in JSON format via the POST method.
Important: This option is only available for sites with Pro subscription.
Tip: You can learn about connecting a webhook to your online store in this guide.
Follow the instructions below to connect your webhook to a contact form:
To connect a webhook to your site, enter the site Settings, navigate the Form management tab, and open the Integrations:
Press on the Add Webhook URL and paste your Webhook URL in the field that appears to receive data from the forms to the entered URL:
Tip: Click on the "plus" icon to add multiple Webhooks.
Then, open the editor and go to the Integrations tab in the contact form settings to enable the integration:
Don't forget to publish your site for the changes to appear live.
Done! To see how it works, try submitting the form to ensure you receive data to your third-party app.
Note: You can learn more about the structure of the webhook code below.
A webhook received from a form in JSON format consists of a "fields" object, which contains objects for each of the contact form fields from which this webhook came (examples below). At the same time, automatically generated form field identifiers act as keys in the "fields" object.
In turn, each field object has 3 keys with corresponding values — keys "title", "value", and "type":
"title" is the field's name that was specified in your contact form's settings in the editor. If the name is not specified, the placeholder value inside the field is used. If both the field name and the placeholder are missing, the value of the "title" field will be empty ("");
"value" is what the visitor of your site specified when filling out the form;
"type" is the field type you selected in the editor when adding this field to the contact form.
Short text — a text (string) specified by your site visitor when filling out the form;
Long text — a text specified by your site visitor when filling out the form (up to 2000 characters). The \n character indicates line breaks;
Email — a text specified by your site visitor when filling out the form;
Phone — a text specified by your site visitor when filling out the form;
Dropdown — a text of only the option chosen by the client when filling out the form;
Date — a date selected by the client as a string, for example "22/12/2022, 17:45"
Radio button (round switch for choosing 1 option among several) — a text of only the option chosen by the client when filling out the form;
Check box (square checkboxes for selecting multiple options) — the value of the "value" key is an object that displays all options selected by a client (all checkboxes activated by them). This object's keys are generated automatically, and their values are the text of the corresponding selected checkbox (that is, the text you entered in the editor for each checkbox);
Attach file — an object with 2 keys: "url" and "fileName". In the "url" key, the value is a string with a link to download the file from the storage.googleapis.com service. The "fileName" key displays the name of the downloaded file as a string;
I accept (a checkbox with only 1 option) — it can only have the value "Yes", which is indicated if a site visitor has activated the checkbox. If this field is not specified as required for selection and a site visitor does not activate it, then this field is not be sent.
Short text — "text"
Long text — "textArea"
Email — "email"
Phone — "phone"
Dropdown — "dropDown"
Date — "date"
Radio button — "radioButton"
Check box — "checkbox"
Attach file — "file"
I accept — "accept"
Below is an example of a received webhook with each of the 10 possible fields:
Note: The key's name for each form field is generated automatically (e.g., "contactForm_email" or "1bda072e-3229-4e53-80a9-276f583bb868" above) and currently, there is no way to edit those names.
If you want to see how the webhook will look from your contact form, you can check it with the help of third-party services, for example, webhook.site or ngrok.com. Let's do it by using the webhook.site service as an example:
Open webhook.site and click the Copy to clipboard button to the right of the Your unique URL field:
Connect this link in your site settings and in the settings of the contact form you want to test. You can use the first section of this article for it:
Open your site, fill in and submit the form to which you connected the webhook. Example of a filled-in form:
Go back to webhook.site where you will find the received webhook with all the values you filled in on your site as a site visitor:
The webhook from the example:
Webhooks on Weblium are intended only for services to which you need to send information from Weblium.
Note: Using webhooks, data is sent in JSON format via the POST method.
Important: This option is only available for sites with Pro subscription.
Tip: You can learn about connecting a webhook to your online store in this guide.
Connecting Webhooks to a contact form
Follow the instructions below to connect your webhook to a contact form:
To connect a webhook to your site, enter the site Settings, navigate the Form management tab, and open the Integrations:
Press on the Add Webhook URL and paste your Webhook URL in the field that appears to receive data from the forms to the entered URL:
Tip: Click on the "plus" icon to add multiple Webhooks.
Then, open the editor and go to the Integrations tab in the contact form settings to enable the integration:
Don't forget to publish your site for the changes to appear live.
Done! To see how it works, try submitting the form to ensure you receive data to your third-party app.
Note: You can learn more about the structure of the webhook code below.
Structure of webhooks from contact forms
A webhook received from a form in JSON format consists of a "fields" object, which contains objects for each of the contact form fields from which this webhook came (examples below). At the same time, automatically generated form field identifiers act as keys in the "fields" object.
In turn, each field object has 3 keys with corresponding values — keys "title", "value", and "type":
"title" is the field's name that was specified in your contact form's settings in the editor. If the name is not specified, the placeholder value inside the field is used. If both the field name and the placeholder are missing, the value of the "title" field will be empty ("");
"value" is what the visitor of your site specified when filling out the form;
"type" is the field type you selected in the editor when adding this field to the contact form.
Values of the "value" key:
Short text — a text (string) specified by your site visitor when filling out the form;
Long text — a text specified by your site visitor when filling out the form (up to 2000 characters). The \n character indicates line breaks;
Email — a text specified by your site visitor when filling out the form;
Phone — a text specified by your site visitor when filling out the form;
Dropdown — a text of only the option chosen by the client when filling out the form;
Date — a date selected by the client as a string, for example "22/12/2022, 17:45"
Radio button (round switch for choosing 1 option among several) — a text of only the option chosen by the client when filling out the form;
Check box (square checkboxes for selecting multiple options) — the value of the "value" key is an object that displays all options selected by a client (all checkboxes activated by them). This object's keys are generated automatically, and their values are the text of the corresponding selected checkbox (that is, the text you entered in the editor for each checkbox);
Attach file — an object with 2 keys: "url" and "fileName". In the "url" key, the value is a string with a link to download the file from the storage.googleapis.com service. The "fileName" key displays the name of the downloaded file as a string;
I accept (a checkbox with only 1 option) — it can only have the value "Yes", which is indicated if a site visitor has activated the checkbox. If this field is not specified as required for selection and a site visitor does not activate it, then this field is not be sent.
Values of the "type" key for each field type:
Short text — "text"
Long text — "textArea"
Email — "email"
Phone — "phone"
Dropdown — "dropDown"
Date — "date"
Radio button — "radioButton"
Check box — "checkbox"
Attach file — "file"
I accept — "accept"
Below is an example of a received webhook with each of the 10 possible fields:
{
"fields": {
"short_text": {
"title": "Short text",
"value": "An example of a short text",
"type": "text"
},
"867b7a8a-e9f4-460d-a7f7-2e15fd6fa07c": {
"title": "Long text",
"value": "Old cherry garden near the house\nAnd beetles buzzing in green leaves,\nThe plowers carrying their plows,\nAnd mothers cooking supper meals.",
"type": "textArea"
},
"contactForm_email": {
"title": "Email",
"value": "example@gmail.com",
"type": "email"
},
"contactForm_phoneNumber": {
"title": "Phone number",
"value": "380441234567",
"type": "phone"
},
"66107134-153a-4289-ae9b-332afb0fdd09": {
"title": "Dropdown",
"value": "Текст вибраного варіанту",
"type": "dropDown"
},
"cbae3dd6-c4f2-4873-9aa3-49b50e2e3d83": {
"title": "Date",
"value": "21/12/2022, 00:00",
"type": "date"
},
"7d56d144-2895-4ada-9bcd-e807699cbc31": {
"title": "Radio button",
"value": "Option 2",
"type": "radioButton"
},
"1bda072e-3229-4e53-80a9-276f583bb868": {
"title": "Checkbox",
"value": {
"25c4fe25-e867-4609-b6dc-46bd532f2f8f": "Option 2",
"439c67f1-3de9-48e2-a5c7-62f7e99ad995": "Option 1"
},
"type": "checkbox"
},
"47b71927-1a38-4b50-8b09-b01ec847207f": {
"title": "Attach file",
"value": {
"url": "//storage.googleapis.com/contact-forms-storage/contact-forms/63036758c37a64000d97f1eb/0c7daa2f-661c-4956-89ec-a6cabcb86a5c",
"fileName": "kitten-510651.jpg"
},
"type": "file"
},
"df355ffe-fa85-4610-bafe-e3bafe45936c": {
"title": "I accept",
"value": "Yes",
"type": "accept"
}
}
}
Note: The key's name for each form field is generated automatically (e.g., "contactForm_email" or "1bda072e-3229-4e53-80a9-276f583bb868" above) and currently, there is no way to edit those names.
Checking webhooks from your contact forms
If you want to see how the webhook will look from your contact form, you can check it with the help of third-party services, for example, webhook.site or ngrok.com. Let's do it by using the webhook.site service as an example:
Open webhook.site and click the Copy to clipboard button to the right of the Your unique URL field:
Connect this link in your site settings and in the settings of the contact form you want to test. You can use the first section of this article for it:
Open your site, fill in and submit the form to which you connected the webhook. Example of a filled-in form:
Go back to webhook.site where you will find the received webhook with all the values you filled in on your site as a site visitor:
The webhook from the example:
{
"fields": {
"short_text": {
"title": "Short text",
"value": "Short text example",
"type": "text"
},
"contactForm_phoneNumber": {
"title": "Phone number",
"value": "+3801234578",
"type": "phone"
},
"contactForm_email": {
"title": "Email",
"value": "test@gmail.com",
"type": "email"
}
}
}
Updated on: 12/07/2023
Thank you!