Webhooks on SiteCliq are intended only for services to which you need to send information from SiteCliq.

Note: Using webhooks, data is sent in JSON format via the POST method.

3. Then, open the editor and go to the Integrations tab in the contact form settings to enable the integration:

Done! To see how it works, try submitting the form to ensure you receive data to your third-party app.

In turn, each field object has 3 keys with corresponding values — keys "title", "value", and "type":

1. "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 ("");
2. "value" is what the visitor of your site specified when filling out the form;
3. "type" is the field type you selected in the editor when adding this field to the contact form.
   

1. Short text — a text (string) specified by your site visitor when filling out the form;
   
2. Long text — a text specified by your site visitor when filling out the form (up to 2000 characters). The \n character indicates line breaks;
3. Email — a text specified by your site visitor when filling out the form;
4. Phone — a text specified by your site visitor when filling out the form;
5. Dropdown — a text of only the option chosen by the client when filling out the form;
6. Date — a date selected by the client as a string, for example "22/12/2022, 17:45"
7. 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;
8. 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);
9. 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;
10. 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.

1. Short text — "text"
   
2. Long text — "textArea"
3. Email — "email"
4. Phone — "phone"
5. Dropdown — "dropDown"
6. Date — "date"
7. Radio button — "radioButton"
8. Check box — "checkbox"
9. Attach file — "file"
10. 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.

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:

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: 01/10/2023