How To Use The Contact Form Widget By Atomic Addons

The Contact Form widget by Atomic Addons adds a ready-made contact form to any page, with no form plugin needed. Visitors enter their name, email, subject and message, and the form emails it to you without leaving the page. You can add a phone field, change the layout and wording, protect the form with reCAPTCHA and send visitors to a thank-you page. This guide covers adding the widget, where the messages go and its settings.

Enable the Contact Form Widget

Contact Form is a Free widget and works with the free Atomic Addons plugin. 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 Contact Form. You can also open the Forms / User category.

4. 4

   Turn the Contact Form widget on.

5. 5

   Click Save Settings.

Add the Contact Form Widget

1. 1

   Open the page in Elementor (Edit with Elementor).

2. 2

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

3. 3

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

4. 4

   Click Publish (or Update).

Where Messages Go

Messages are emailed to your site's admin email address (Settings → General → Administration Email Address). To use another address, and to set up reCAPTCHA and a blocklist:

1. 1

   Go to WordPress Dashboard → Atomic Addons → Settings.

2. 2

   In Contact Form, enter the address in Send Submissions To.

3. 3

   For reCAPTCHA, paste an invisible reCAPTCHA (v2) key pair into reCAPTCHA Site Key and reCAPTCHA Secret Key.

4. 4

   In Blocked Email Addresses, list addresses that may not send the form, separated by commas.

5. 5

   Click Save Settings.

Each email has the subject “[Your Site Name]” followed by the visitor's subject, and holds the message, the visitor's name, email, phone number if given, and IP address. Replying to it answers the visitor. Visitors cannot send the form with the site's admin address or the Send Submissions To address.

Forms Layout

Open the widget and go to Content → Forms Layout:

1. 1

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

2. 2

   Contact Number Field: Adds a phone number field. Off by default. Contact Number Required, on by default, makes it required.

3. 3

   Subject Field: A required subject field. On by default.

4. 4

   Message Field: A required message box. On by default.

5. 5

   Input Size: Default, Small or Large fields.

6. 6

   Two Columns: On screens 768px and wider: name, email, phone and subject on the left, the message and button on the right.

7. 7

   Name/Email Field Inline: Without two columns: puts the name and email fields side by side on screens 768px and wider.

8. 8

   All Field Inline: Without two columns: puts every field and the button in one row with the labels beside the fields, for a short form such as a call-back request. Alignment then places the row left, center or right.

9. 9

   Text Align: Start (the default), Center or End for the labels and the text in the fields.

The Name and Email fields are always there and required.

Submit Button

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

Additional Options

Content → Additional Options:

1. 1

   Custom Text: Turn it on to change the Label and Placeholder of each field: Name (“Name*”, “Your Name”), Contact Number, Subject, Email and Message. A field left empty uses the built-in wording.

2. 2

   Additional Bottom Message: A note under the fields. Message is its text; it may use bold, italic and links.

3. 3

   reCAPTCHA Enable: On by default: protects the form with the invisible reCAPTCHA keys from the settings. If you have not added keys, turn it off. Hide reCAPTCHA Bagde hides the reCAPTCHA badge; Google then asks you to mention reCAPTCHA in the form's text.

4. 4

   Message Rows: The height of the message box, 1 to 10 lines; 5 by default.

5. 5

   Redirect After Submit: Turn it on and enter a URL, such as a thank-you page, to open it a moment after the success message appears.

6. 6

   Reset After Submit: Clears the fields after a successful send.

7. 7

   Custom Success Message: Replaces the default “Hi, [name]. We got your e-mail…” with your own text, up to 255 characters. Write [name] and [email] to insert what the visitor typed.

Messages appear above the button: the success message, or a reason the form was not sent, such as a missing field or an invalid email.

Style the Contact Form

Everything below is on the Style tab. Sections for features you turned off are hidden.

• Form Style — the space between fields.
• Label — spacing, color and typography.
• Fields — text, placeholder and background colors, border, radius, padding and typography, with hover and focus states.
• Submit Button — colors, border, radius, padding and typography in Normal and Hover states, and a hover animation.
• Additional Message, Success Message and Error Message — the text color, typography and look of each message.