How To Use The Webhook Form Widget By Atomic Addons

The Webhook Form widget by Atomic Addons builds a form from fields you choose and sends each submission to a webhook: a URL given to you by an automation tool, a CRM or your own app. The submission goes from your server, so the URL and any keys you add are never shown on the page. This guide covers adding the widget, connecting the webhook and building the fields.

Enable the Webhook Form Widget

Webhook Form is a Pro widget and needs Atomic Addons Pro. Switch it on from the plugin dashboard:

1. 1

   Go to WordPress Dashboard → Atomic Addons.

2. 2

   Click the Widgets tab.

3. 3

   Search for Webhook Form. You can also open the Forms / User category.

4. 4

   Turn the Webhook Form widget on.

5. 5

   Click Save Settings.

Add the Webhook Form Widget

1. 1

   Open the page in Elementor (Edit with Elementor).

2. 2

   In the widget panel, search for Webhook Form. The widget sits in the Atomic Addons Pro category.

3. 3

   Drag it into the page and set it up with the controls below.

4. 4

   Click Publish (or Update).

Connection Settings

Open the widget and go to Content → Connection Settings. Paste the address the receiving service gave you into Webhook URL. Until a URL is set, the widget shows a reminder in the editor and nothing to visitors.

Each submission is sent to that URL as a POST request with the form's fields as ordinary form data: each field's Field Name is the key and the visitor's answer the value. Ticked checkboxes are sent as one value, separated by commas.

Security Fields

Many services ask for a key or token with every request. Add it in Content → Security Fields: click Add Item for each value. The list is empty by default.

1. 1

   Field Name: The name the service expects, such as X-Auth-Token.

2. 2

   Value: The key or token itself.

3. 3

   Data Position: Body (the default) sends it with the form data. Header sends it as a request header.

Security fields stay on your server; visitors cannot see them in the page.

Form Fields

Content → Form Fields builds the form. It starts with two required fields, Full Name (a text field named full_name) and Your Email (an email field named email). Click a field to edit it or Add Item for a new one. Each field has a Content tab:

1. 1

   Type: Text, Number (the default for a new field), Email, Textarea, Hidden, Disabled, Select, Radio, Checkbox or Date.

2. 2

   Label: The text shown above the field.

3. 3

   Field Name: The key the value is sent under. Make it unique and use only lowercase letters, numbers and underscores, matching what the receiving service expects.

4. 4

   Placeholder: For text, number and email fields: hint text inside the field.

5. 5

   Options: For select, radio and checkbox fields: one option per line. Write Label|value to show one text and send another, such as First Name|f_name; a plain line is both. In a select, a line with an empty value, such as Choose one|, becomes a placeholder that cannot be sent.

6. 6

   Inline List: For radio and checkbox fields: puts the options side by side instead of one per line.

7. 7

   Column Width: How much of the row the field takes, from 20% to 100% (the default). Fields narrower than 100% sit side by side. Use the device icon to set it per screen size.

8. 8

   Rows: For textarea fields: its height in lines, 4 by default.

The Advanced tab has Default Value, a value the field starts with (for text, email, textarea, number, hidden and disabled fields), and Required, which stops the form from being sent while the field is empty. Required fields get a red asterisk; a required checkbox group needs at least one box ticked.

• Hidden — not shown; always sends its Default Value, for example to tell the service which page the form is on.
• Disabled — shows its Default Value greyed out. Browsers do not send disabled fields, so use it for display only.

Above the list, reCAPTCHA Enable (on by default) protects the form with Google's invisible reCAPTCHA, and Hide reCAPTCHA Bagde hides the reCAPTCHA badge. reCAPTCHA needs keys, set once for the site:

1. 1

   Create an invisible reCAPTCHA (v2) key pair for your domain in the reCAPTCHA admin console.

2. 2

   Go to WordPress Dashboard → Atomic Addons → Settings.

3. 3

   In Contact Form, paste them into reCAPTCHA Site Key and reCAPTCHA Secret Key.

4. 4

   Click Save Settings.

Without both keys the form is sent without a reCAPTCHA check. If you hide the badge, Google asks you to mention reCAPTCHA in the form's text instead.

Form Layout and Submit Button

Content → Form Layout sets how the fields look:

1. 1

   Label: Shows the field labels. On by default; when off, they stay in the page for screen readers.

2. 2

   Input Size: Default, Small or Large fields.

3. 3

   Text Align: Left (the default), center or right for the labels and the text in the fields.

4. 4

   Success Message: The message shown after a successful submission. Empty, it reads “Your data has been sent successfully.”

Content → Submit Button sets the button's Text (“Submit” by default), its Size (Default, Small, Large or Full Width) and its Alignment (left, center, right or justified).

What Happens on Submit

The button is disabled and “Sending…” appears while your server passes the data on. If the request goes through, the form shows the success message and clears its fields. If the service cannot be reached, visitors see a general error. If the service answers with JSON containing "success": false, the form shows its data.message text as the error.

Style the Webhook Form

Everything below is on the Style tab:

• Form Style — Field Space between rows and Column Space between fields side by side.
• Label — spacing, text color, the required asterisk's color and typography.
• Fields — text, placeholder and background colors, border, radius, padding, typography and the gap between radio and checkbox options, with Hover and Focus states.
• Submit Button — colors, border, radius, padding and typography in Normal and Hover states, and a hover Animation.
• Result — the result message's color, typography, background, border, radius, padding and the success and error accent colors.