Quick wins for a faster PC:
Clear out junk files and repair common Windows errorsFree Scan →Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →Repair Windows errors before they cause bigger problemsFix Now →You can build a complete contact form in Elementor without writing code by using the Form widget included with Elementor Pro. Add the fields visitors need, configure what happens after submission, set a properly authenticated sender, add spam protection, style the interaction, and test delivery before publishing.
Antihost offers managed WordPress hosting with free migration, one-click staging and a 14-day free trial.
What you need before building the form
Elementor’s documented native workflow uses the Form widget in Elementor Pro. Open the page you want to edit in the Elementor editor, then search the widget panel for “Form.” If it is missing, verify that Elementor Pro is installed, activated, and compatible with the active Elementor plugin before choosing 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.
The Form widget is designed to collect visitor information directly on a page. It can retain submissions, send email notifications, redirect visitors, call webhooks, pass data to marketing or messaging services, and trigger popups. The exact options available in your editor can depend on the integrations installed and enabled on the site.
Plan the form before adding fields
A useful contact form asks for enough information to begin a conversation, but not so much that visitors abandon it. For a general enquiry, start with three fields:
#1 Best Overall
- Name, so the reply can be addressed correctly.
- Email, configured as an email field so the browser and Elementor can validate its format.
- Message, using a textarea for a detailed request.
Make only genuinely necessary fields required. If a visitor can submit a useful enquiry without a phone number, company name, address, or budget, leave those fields optional or omit them. Do not ask for passwords, payment details, identity documents, or other sensitive information unless the site has a documented reason, suitable security controls, and a retention policy for that data.
Use short labels that make sense when read without surrounding design. A placeholder can show an example, but it should not replace the label. Examples such as “[email protected]” or “Tell us what you need help with” clarify the expected input without making visitors guess.
Do these 3 things before closing this tab:
1Scan for outdated or missing drivers - takes under a minute2Repair Windows errors before they cause bigger problems3Fix the driver behind crashes, sound loss and screen glitchesAdd the Form widget and configure fields
- Open the target page and select Edit with Elementor.
- Drag the Form widget onto the section or container where the form should appear.
- In the widget’s field list, edit the default fields or add new ones with Add Item.
- For each field, set its label, field type, ID, placeholder, and required status.
- Save or update the page after the initial configuration so you have a recoverable version.
Each field has an ID used by Elementor’s email shortcodes and other actions. Keep IDs simple and stable, such as name, email, and message. If you change an ID after creating an email message, review the shortcodes in that message so the submitted value is still included.
Field types available in the Form widget
Elementor documents these built-in field categories:
| Field type | Typical use | Important setup point |
|---|---|---|
| Text | Name, company, order or reference number | Use a clear label and decide whether it is required. |
| Visitor’s reply address | Use the email type rather than a generic text field. | |
| Textarea | Questions, project details, support descriptions | Provide a useful placeholder and enough visible space. |
| Tel | Phone number | Collect it only when a call or text response is actually needed. |
| Select | Category, service, department, preferred option | Offer concise choices and include a neutral first option when appropriate. |
| Checkbox | Multiple selections or an explicit consent choice | Explain what agreeing to the checkbox means. |
| Radio | One choice from a short list | Keep all options visible and mutually understandable. |
| Acceptance | Agreement to terms or a privacy notice | Link or clearly identify the text the visitor is accepting. |
| File upload | Briefs, screenshots, documents or other requested files | State acceptable file types, size limits and how uploads are handled. |
| Hidden | Context such as a campaign, page or internal routing value | Never treat a hidden value as proof supplied by the visitor. |
| Step | Breaking a long intake process into multiple screens | Group related questions and label the navigation controls clearly. |
| reCAPTCHA or reCAPTCHA v3 | Google bot screening | Configure the required credentials before expecting the field to work. |
| Honeypot | Invisible trap for many automated submissions | Keep the decoy field hidden from normal keyboard and screen-reader use. |
Long forms are easier to complete when related questions are grouped. Use a Step field for a genuine multi-stage intake, such as contact details first, project details second, and attachments or consent last. Do not split a three-field enquiry into multiple screens; every extra click adds friction.
Choose what happens after submission
Open the form’s Actions after Submit control and add the actions required by the site’s workflow. Actions are independent: collecting a record does not automatically send an email, and sending an email does not necessarily create a convenient record inside Elementor.
| Action | What it does | When to use it |
|---|---|---|
| Collect Submissions | Retains the entry in the site’s Elementor submission workflow. | Use when staff need an on-site record, later review or export. |
| Sends a notification containing the submitted values. | Use for the normal mailbox notification. | |
| Email 2 | Sends a second configured email. | Use for a separate internal recipient or a carefully designed visitor confirmation. |
| Redirect | Sends the visitor to another URL after a successful submission. | Use for a thank-you page, next step or campaign measurement. |
| Webhook | Passes form data to another system through a webhook. | Use when a custom service or automation receives the entry. |
| Marketing integrations | Can pass data to services such as MailChimp, Drip, ActiveCampaign, GetResponse, ConvertKit or MailerLite. | Use only when the field mapping, consent and list-retention rules are understood. |
| Messaging integrations | Can notify channels in services such as Slack or Discord. | Use for operational alerts, not as the only durable record. |
| Popup | Triggers an Elementor popup action. | Use for a contextual confirmation or follow-up interface. |
A practical owner-notification setup normally combines Collect Submissions and Email. The collection gives the site a record to check if an inbox message is lost, while the email provides an immediate alert. Set a retention period and restrict administrative access to stored entries.
Configure the Email action safely
Select Email under Actions after Submit and complete every field that the recipient needs. Use a mailbox controlled by the site owner for the recipient and sender identity.
- To: enter the mailbox that should receive the notification. Confirm spelling and include additional recipients only when necessary.
- Subject: identify the site and form, for example “Website enquiry — [form name].” A recognizable subject makes filtering and triage easier.
- Message: include the submitted values with Elementor’s documented field shortcodes. The
[all-fields]pattern can include the complete submission; individual field shortcodes let you control order and omit unnecessary data. - From Email: use an address on the site’s own domain, preferably one configured for authenticated sending. Do not put the visitor’s untrusted address here.
- From Name: use the site, organization or department name that recipients will recognize.
- Reply-To: use the visitor’s email field when staff should be able to reply directly. This keeps the authenticated site address in From while making replies convenient.
- Cc and Bcc: add only the people or systems that genuinely need the submission. Bcc can protect recipient addresses from being exposed to one another.
- Metadata: optionally include date, page URL, browser, IP address and Elementor-credit information. Consider whether each item is necessary for support, security or compliance.
- Send As: choose HTML when formatted content is useful and plain text when the receiving workflow or archive requires it.
Never use a visitor-controlled value as the From address. That pattern can fail domain authentication, increase spam classification, and make spoofing controls less effective. Keep the site’s authenticated sender in From and place the visitor’s address in Reply-To.
Add spam protection
Elementor supports several approaches. The right choice depends on submission volume, the amount of friction acceptable to visitors, and the site’s privacy requirements.
Honeypot
A honeypot adds an invisible decoy field. Normal visitors leave it empty; many simple bots fill every available input, allowing the submission to be rejected. It usually adds no visible interaction and is a useful baseline for low-volume forms. Check that the hidden control is not exposed to keyboard users or assistive technology.
reCAPTCHA and reCAPTCHA v3
reCAPTCHA adds Google’s bot screening. The visible version may ask a visitor to complete an interaction, while reCAPTCHA v3 evaluates activity without the same checkbox flow. Elementor documents credential setup and insertion as part of the form configuration. Add the appropriate credentials, insert the field, and test both a normal submission and a deliberately suspicious one. Review the service’s privacy and data-processing terms before enabling it.
Akismet integration
Elementor also documents Akismet integration for screening spam messages. Treat it as an additional filtering option rather than a guarantee that every unwanted entry will be removed. Decide how suspected spam is logged, reviewed and deleted.
Layering a honeypot with one additional screening method can reduce automated abuse without forcing every visitor through multiple challenges. Monitor false positives after launch; an aggressive rule that blocks legitimate enquiries is a delivery problem of its own.
The Tool Desk
Outbyte PC Repair FREEClear out junk files and repair common Windows errorsFree Scan →Outbyte Driver Updater FREEScan for outdated or missing drivers - takes under a minuteDriver Scan →Style the form for completion and accessibility
Use the widget’s Form, Fields, Button and Messages style controls. Make labels readable, keep sufficient contrast between text and backgrounds, and show a clear focus state when a visitor tabs through the form. Do not communicate validity through color alone; pair color with text or another visible indicator.
- Give the submit button a specific label such as “Send message” or “Request a quote,” rather than an ambiguous “Submit.”
- Keep labels associated with their inputs and avoid placing instructions only in placeholders.
- Make validation errors identify the field and explain how to fix it.
- Keep success and error messages visible long enough to read, especially on mobile.
- Check the form at narrow viewport widths and with enlarged text.
- Tab through every control and verify that the order follows the visual order.
- Ensure the button cannot be mistaken for a reset or navigation control.
For a multi-step form, give each step a meaningful heading, show progress when useful, and provide obvious Previous and Next controls. Preserve entered values when moving between steps so visitors do not have to retype information.
Understand successful submission states
A visitor should receive an immediate, unambiguous result. The success message confirms that Elementor accepted the submission; it does not by itself prove that an email reached an inbox. Configure the success message to explain what happens next, such as an expected response channel or timeframe, without promising a response that the organization cannot provide.
Keep the error message actionable. If a required field is empty or an email is malformed, identify the problem near the relevant control and retain the other values. If a server-side failure occurs, provide a way to contact the organization through another channel while the owner investigates.
Recommended Free Tools
Fix Elementor forms that show success but send no email
When the browser displays a success message but no notification appears, troubleshoot in this order:
- Open the Email action and verify To, From Email, Reply-To and Message. A typo, empty message or incorrect shortcode can make a valid submission appear to disappear.
- Check the recipient’s spam, junk and quarantine folders. Search for the configured subject and sender, not only the visitor’s address.
- Confirm that the sender domain is configured for authenticated mail and that the host allows the site to send mail.
- Submit a test while monitoring the site’s submission collection, if enabled. If the entry is stored but no email is delivered, the form logic works and the mail path is the likely failure point.
- Ask the hosting provider whether server mail is enabled, blocked, rate-limited or returning an error. Elementor’s troubleshooting guidance recommends contacting the host when server mail is not functioning.
- Route site mail through a dedicated external mail service such as Site Mailer when ordinary server mail is unreliable or messages repeatedly enter spam. Re-test with the authenticated sender after configuration.
Do not “fix” delivery by placing the visitor’s address in From. That can worsen authentication and reputation problems. Keep the site address as the sender and use Reply-To for conversation.
Test the complete workflow before publishing
Run the form as an ordinary visitor, not only in the editor preview. Complete the following checks:
- Submit a normal entry and confirm the success message appears.
- Verify that the entry is present in the configured collection, if Collect Submissions is enabled.
- Confirm that the notification arrives at the intended mailbox and that Reply-To opens the visitor’s address.
- Leave each required field empty and confirm that the corresponding validation message is clear.
- Enter an invalid email format and verify that it is rejected before sending.
- Upload an allowed and a disallowed file, when file upload is enabled, and confirm that the limits and messages are understandable.
- Test the selected spam control without blocking a legitimate submission.
- Tab through the form, use it with a screen reader when available, and check visible focus states.
- Repeat the test at a narrow mobile width and on a slower connection.
- Confirm that the privacy notice, consent wording and retention practice match the information collected.
Record the test date, recipient mailbox and expected result so a later administrator can distinguish a configuration change from a delivery incident.
When another form system may be more suitable
The native Elementor route is a strong fit when the site already uses Elementor Pro and needs a form that matches the page builder. Before replacing it with another plugin or an external service, compare the actual requirements rather than choosing by appearance.
| Decision area | Questions to answer |
|---|---|
| Availability | Is Elementor Pro active on every site where the form must be edited? |
| Fields and validation | Are uploads, conditional questions, multi-step controls and the required validation rules available? |
| Storage and export | Where are entries retained, who can access them, and can they be exported or deleted? |
| Post-submit integrations | Are the required email, webhook, marketing, messaging or redirect actions supported? |
| Deliverability | Can the system use an authenticated sender, reliable transport and useful failure logs? |
| Spam controls | Does it offer a honeypot, reCAPTCHA, Akismet or another suitable filter without excessive friction? |
| Accessibility and mobile behavior | Can labels, errors, focus states and multi-step navigation be made usable on every target device? |
| Privacy and retention | What personal data is stored, for how long, and in which third-party systems? |
| Total cost | Include the Elementor edition, mail service, integrations and any recurring service fees required for the workflow. |
If the required fields, actions and delivery controls are available, staying with the Form widget usually avoids adding another editor and another storage path. If a required integration, compliance control or high-volume workflow is unavailable, document that gap before selecting a replacement.
A practical launch configuration
For a typical “contact us” page, configure Name, Email and Message as the required core fields; add an optional Telephone field only when calls are part of the process. Add Collect Submissions and Email under Actions after Submit. Use the site’s authenticated domain address in From Email, put the visitor’s Email field in Reply-To, and include the relevant field shortcodes in the message. Add a honeypot and one additional screening method when the site begins receiving automated abuse. Finish with a clear success message, a privacy explanation and the full pre-publication test.
Quick Recap
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.
