The native way to build a contact form in Elementor is to place Elementor Pro’s Form widget on a page, define the fields, choose what happens after submission, configure notification email, add spam protection, and test the visitor experience before publishing. You can do all of this in the Elementor editor without writing form code.
Antihost offers managed WordPress hosting with free migration, one-click staging and a 14-day free trial.
What you need before creating the form
Elementor’s documented native contact-form workflow uses the Form widget in Elementor Pro. Open the page where the form should appear and edit it with Elementor. If you cannot find the Form widget, check which Elementor edition is active and whether the expected Elementor plugins are enabled before designing the page around another form system.
As an Amazon Associate I earn from qualifying purchases.
Free tools Windows power users keep installed
One-click scans. No signup required.
Decide what the form is meant to accomplish first. A simple “contact us” form may need only a name, email address, and message. A quote request, support intake, or booking enquiry may also need a telephone number, a category selector, an attachment, or a hidden value identifying the page from which the visitor submitted.
- Choose the mailbox or team that should receive notifications.
- Decide whether entries must be retained in the site as well as emailed.
- Choose a spam-control method appropriate to your traffic and privacy requirements.
- Prepare a concise success message or a thank-you-page destination.
- Identify any privacy notice or retention rule that applies to the information you collect.
Add the Form widget
- Open the target page in the Elementor editor.
- Search the widget panel for Form.
- Drag the widget into the section or container where visitors should see it.
- Use the widget’s content controls to configure fields and submission actions before spending time on visual styling.
The widget is the working form, not merely a visual block: it defines the controls visitors complete, validates their input, and passes the submission to the actions you select. Build and test the functional flow first so that styling work does not hide a configuration problem.
#1 Best Overall
Choose the minimum useful fields
Start with the smallest set of information that lets you answer the visitor. For many contact pages, that means Name, Email, and Message. Mark a field as required only when the submission cannot be processed without it. Fewer mandatory fields generally create less friction and reduce the amount of personal information you must manage.
Built-in field types
Elementor’s form fields cover common contact inputs and more specialised controls:
| Field | Useful for | Configuration guidance |
|---|---|---|
| Text | Names, company names, subjects, or short answers | Use a clear label and keep the expected answer obvious. |
| An address for follow-up | Use the email field type so the control checks for email-shaped input. | |
| Textarea | Questions, project details, or support descriptions | Give the visitor enough room to write and explain what information helps. |
| Telephone | Callback numbers | Request it only when a call is genuinely part of the workflow. |
| Select | A category, service, or preferred option | Use concise choices and include a useful default or prompt. |
| Radio | One choice from a small visible set | Keep choices mutually exclusive and label them plainly. |
| Checkbox | Multiple selectable options | Do not use a checkbox when the visitor must choose exactly one item. |
| Acceptance | Required agreement or acknowledgement | Explain what the visitor is accepting instead of using an unexplained tick box. |
| File Upload | Briefs, screenshots, or other supporting files | Tell visitors what they should attach and apply a retention policy to uploaded data. |
| Hidden | Values visitors should not edit, such as an internal label | Do not treat hidden values as trustworthy proof of a visitor’s identity or intent. |
| Step | Longer forms divided into pages | Group related questions and make the next action clear. |
| reCAPTCHA | Interactive bot screening | Configure the required credentials and then add the field to the form. |
| reCAPTCHA v3 | Risk-based bot screening without the same visible challenge | Configure its credentials and verify that legitimate submissions still pass. |
| Honeypot | Invisible trap for automated submissions | Keep the decoy field invisible to normal visitors and reject submissions that fill it. |
Labels, placeholders, and required status
Use short, human labels such as “Your name”, “Email address”, and “How can we help?”. A placeholder can show the expected format, but it should not be the only label: placeholders disappear as soon as a visitor starts typing. Check that every required field is visibly identified and that the error message explains how to correct it.
Do not request sensitive information simply because a field is available. If a message, email address, and one business-specific detail are enough to respond, avoid collecting unrelated identity, financial, or confidential data. For a longer intake, use the Step field to divide the process into logical pages rather than presenting one intimidating block of controls.
Set Actions after Submit
Open Actions after Submit in the Form widget and select the outcomes the site needs. Multiple actions can be used together.
| Action | What it does | When to use it |
|---|---|---|
| Collect Submissions | Retains the entry in the site’s Elementor submission workflow. | Use it when staff need a record in the site rather than relying only on an inbox. |
| Sends a notification containing the submitted information. | Use it for an immediate alert to the person or team handling enquiries. | |
| Email 2 | Provides a second email action. | Use it when a separate recipient or message is required. |
| Redirect | Sends the visitor to another URL after a successful submission. | Use a dedicated thank-you page or the next step in a process. |
| Webhook | Passes submission data to another system. | Use it when an external workflow needs the form payload. |
| Marketing integrations | MailChimp, Drip, ActiveCampaign, GetResponse, ConvertKit, and MailerLite actions pass data to the selected marketing service. | Use only when the visitor has given the consent required for that communication. |
| Messaging integrations | Slack and Discord actions can notify a team channel. | Useful for internal triage, provided the channel is controlled and appropriate for the data. |
| Popup | Triggers an Elementor popup after submission. | Use it for a confirmation panel or a carefully chosen next step. |
Collecting a submission and emailing a notification are different outcomes. Collection creates a site-side record; Email sends a message. If losing an inbox message would be unacceptable, enable collection as a second record rather than assuming that an email alone is an archive.
Configure the Email action safely
Select Email under Actions after Submit and complete the email settings. Every value should be checked with a real test submission.
Recipient and subject
- To: enter the mailbox that should receive the notification. Use a monitored address rather than an abandoned personal inbox.
- Subject: identify the site and form, for example “New website enquiry”. A recognisable subject makes filtering and triage easier.
- Message: include the submitted values with Elementor’s field shortcodes. The documented
[all-fields]pattern includes the form fields; individual field shortcodes let you control the order and wording.
Sender identity and replies
Set From Email and From Name to the site’s sender identity where possible. Do not place an untrusted visitor address in the From field. Instead, put the visitor’s email field in Reply-To so a reply goes to the person who contacted you while the message still originates from an address your site is allowed to send.
Cc and Bcc are optional recipients. Use them sparingly: every additional recipient increases the number of places where personal information may be stored. Choose Send As HTML or plain text according to the receiving workflow. HTML can preserve formatting; plain text is often easier to process in simple ticket or archival systems.
Metadata
The Email action can include metadata such as the submission date, page URL, browser, IP address, and Elementor-credit information. Include only what the recipient needs. If an IP address or browser detail is not useful for handling the enquiry, leaving it out reduces unnecessary personal-data exposure.
Quick wins for a faster PC:
Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →Clear out junk files and repair common Windows errorsFree Scan →Scan for outdated or missing drivers - takes under a minuteDriver Scan →Add spam protection
Elementor documents four relevant approaches: honeypot, reCAPTCHA, reCAPTCHA v3, and Akismet integration. They solve the same broad problem in different ways.
Honeypot
A honeypot adds an invisible decoy field that ordinary visitors never fill. Automated scripts that populate every available control can trigger the trap, allowing the submission to be rejected without presenting a challenge to genuine users. It is a low-friction first layer, but it may not stop every sophisticated bot.
reCAPTCHA and reCAPTCHA v3
reCAPTCHA can ask visitors to complete Google’s bot screening, while reCAPTCHA v3 evaluates risk without the same visible challenge. Elementor’s documented setup requires the relevant credentials before you insert the field. Test both successful and rejected cases, and consider the accessibility and privacy implications of sending visitors through an external screening service.
Akismet
Elementor also documents Akismet integration for screening spam messages. It can be appropriate when the form receives message-based spam that is difficult to separate with a simple hidden field. Review how flagged submissions are handled so a legitimate enquiry is not silently lost.
Recommended Free Tools
Use the least intrusive combination that controls the actual spam volume. A honeypot may be enough for a low-volume brochure site; a busier form may justify layered screening. Whichever method you choose, monitor false positives and provide another contact route when a legitimate visitor cannot submit.
Style the form for completion and accessibility
Elementor separates styling controls for the Form, Field, Button, and Messages. Work through each area rather than styling only the input borders.
- Make labels and supporting text readable against the background.
- Keep focus indicators visible for keyboard users; do not remove the outline without providing an equally clear replacement.
- Give error messages enough contrast and place them near the field that needs correction.
- Make the submit button’s purpose specific, such as “Send message” or “Request a quote”, instead of an ambiguous “Submit”.
- Use a success message that tells the visitor what happened and what to expect next.
- Check the form at narrow mobile widths and ensure fields do not require horizontal scrolling.
- For multi-step forms, make the current step and the next action obvious, and ensure keyboard users can reach every control.
Keep the visual design subordinate to the interaction. A heavily branded form that hides labels, focus states, or validation feedback will generate more failed submissions than a simpler, clearer layout.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Test before publishing
Run the complete flow as a visitor, not only from inside the editor. Use a real test address that you can monitor and record the result of each check.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
- Load the published or preview page in a normal browser window.
- Submit an empty form and confirm that each required field identifies the missing information.
- Enter an invalid email address and verify that the email field rejects it clearly.
- Submit valid data and confirm the success message or redirect.
- Check that the entry appears under Collect Submissions when that action is enabled.
- Confirm that the notification reaches the intended mailbox, including the expected subject, fields, sender identity, and Reply-To behavior.
- Test the selected spam control without blocking an ordinary, valid submission.
- Repeat the test with keyboard navigation and at a narrow mobile viewport.
- Review the privacy notice and retention practice against every field, upload, and metadata value collected.
Fix Elementor forms that show success but send no email
A success message means the form accepted the submission; it does not prove that the notification reached the inbox. Troubleshoot in this order.
1. Recheck the Email action
Open the form’s Email action and verify To, From Email, Reply-To, and Message. A misspelled recipient, an empty message, or a sender address the server refuses can produce an apparently successful submission with no useful notification.
2. Check spam and filtering
Look in the recipient’s spam or junk folder and inspect mailbox rules. A message can be delivered successfully but hidden by an aggressive filter. Search for the exact subject configured in the Email action.
3. Check server mail configuration
Elementor identifies server or sender configuration as a common cause of delivery problems. If the host’s mail function is unreliable, ask the hosting provider whether outbound mail is working and whether the configured sender is permitted.
Crashes, No Sound, or Screen Glitches?
Random freezes, missing sound and display glitches usually trace back to one bad driver. Find and replace yours safely.Free scan · under a minuteWindows Errors? Fix Them Before They Spread
Repair common Windows errors and clear accumulated junk for a smoother, more stable PC - no reinstall needed.Free scan · no reinstall4. Route mail through an external service
Elementor recommends using a dedicated external mail service such as Site Mailer when notifications are unreliable or repeatedly enter spam. An external service can provide a more dependable authenticated sending path than an unconfigured server mail function. After changing the mail route, submit the form again and verify both delivery and Reply-To behavior.
5. Preserve a site-side record
If delivery is intermittent, enable Collect Submissions so an accepted entry remains available in the site workflow while the email issue is investigated. This does not repair delivery, but it prevents an inbox problem from being the only copy of a visitor’s message.
Compare the native workflow with another form system
The Form widget is a sensible choice when the site already uses Elementor Pro and needs a form that can be built and styled in the same editor. If you are evaluating a different plugin or an external form service, compare the actual requirements rather than choosing by appearance alone.
Quick Recap
| Decision area | Questions to answer |
|---|---|
| Availability | Is the form feature included in the current Elementor edition and active plugin setup? |
| Fields and validation | Does it support the controls, required rules, uploads, multi-step flow, and email validation the process needs? |
| Storage and export | Are submissions retained, searchable, exportable, and governed by an appropriate retention practice? |
| Post-submit actions | Can it email the right people, redirect visitors, call a webhook, notify a team, or connect to the required marketing system? |
| Deliverability | Can sender identity, Reply-To, authentication, and an external mail route be configured? |
| Spam protection | Are honeypot, reCAPTCHA, reCAPTCHA v3, or message screening available without unacceptable friction? |
| Accessibility and mobile behavior | Can labels, focus states, errors, buttons, and multi-step controls be made usable on keyboard and small screens? |
| Privacy and retention | Where do submissions, uploads, metadata, and third-party screening data go, and how long are they kept? |
| Total cost | Include the Elementor edition, any mail service, integrations, and recurring service charges required for the complete workflow. |
Common design mistakes to avoid
- Too many required fields: make only processing-critical information mandatory.
- Visitor address in From: use the site’s sender identity and place the visitor address in Reply-To.
- Email-only record keeping: enable collection when the enquiry must remain available if mail delivery fails.
- Unclear success state: tell visitors whether their message was received and what happens next.
- Invisible errors: provide readable, field-specific validation and preserve keyboard focus.
- Unexamined metadata: include date, URL, browser, or IP details only when they serve a clear operational purpose.
- Unmanaged uploads: explain what may be attached and apply a retention practice to files.
- Overaggressive spam controls: monitor false positives and offer an alternative contact path.
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
Do these 3 things before closing this tab:
1Repair Windows errors before they cause bigger problems2Fix the driver behind crashes, sound loss and screen glitches3Clear out junk files and repair common Windows errors
