ThisCalculator

Everyday

How to Build a Contact Form in Elementor Pro

Updated · Standard formula, shown below

How to Build a Contact Form in Elementor Pro

Elementor Pro lets you build a contact form visually, choose what information to collect, and set where submissions go without adding a separate form plugin. You’ll create the form in the Elementor editor, configure its email and confirmation actions, then test it on the published page. You’ll need a WordPress site with Elementor Pro active and permission to edit the page.

What You’ll Need

  • A WordPress site with Elementor Pro installed and activated. The Form widget is a Pro feature; it is not included in the free version of Elementor.
  • A page you can edit, or permission to create one.
  • An email address that should receive submissions. For reliable delivery, your site may also need correctly configured email sending, such as an SMTP service.
  • Optional: a privacy notice or consent wording if you collect personal information, and a test email address you can access.

Step-by-Step

  1. Open the page in Elementor. In your WordPress dashboard, go to Pages and open the page you want to use, then select Edit with Elementor. To start fresh, create a page first and open it in the editor. Add a section or container where the form should appear, and consider adding a short heading and explanation above it.
  2. Add the Form widget. Search for “Form” in the Elementor widgets panel and drag the Form widget into the page. If it is missing, confirm Elementor Pro is active and that you have permission to edit the site. The widget starts with sample fields that you can modify.
  3. Choose the fields. In the widget’s Content settings, expand each item under Form Fields to edit its label, type, placeholder, and required status. A practical basic form might include Name, Email, Subject, and Message. Use the Email field type for email addresses and Textarea for a longer message. Remove sample fields you do not need; collecting less information makes the form quicker to complete.
  4. Set field IDs and required fields. Each field has an ID used in notifications and other actions. Keep IDs simple and unique, such as name, email, and message. Mark only essential fields as required. The email field should generally be required if you need to reply. Labels should clearly explain what to enter; placeholders are helpful hints, not a replacement for labels.
  5. Configure the submit button. In the Button settings, set a clear label such as “Send message.” Adjust its alignment and size to match the page. Avoid wording that promises an immediate response unless you can meet that expectation.
  6. Choose what happens after submission. Open the Actions After Submit setting. Keep Email for a standard notification, and add other actions only if you have configured them and need them. The widget can also show a confirmation message, redirect visitors, or connect to supported integrations. Do not add an action simply because it appears in the list; each action has its own settings.
  7. Set up the email notification. Expand the Email action settings. In To, enter the address that should receive submissions. Set Subject to something recognizable, such as “New website contact form.” For From Email, use an address on your website’s domain where possible; using the visitor’s address as the sender can cause mail authentication or delivery problems. Put the visitor’s email field in Reply-To so you can reply directly. In the message body, include the fields you want, using Elementor’s field shortcodes or the available field-insertion control. Check that each shortcode matches the field ID.
  8. Choose a confirmation and error experience. In the additional actions or message settings, provide a brief success message, for example, “Thanks for contacting us. Your message has been sent.” If you use a redirect instead, make sure its destination exists and works. Keep the form’s error message clear so visitors know to review the highlighted fields or try again.
  9. Style the form. Open the Style tab to adjust labels, spacing, field backgrounds, borders, typography, button colors, and validation messages. Use sufficient contrast and make sure fields and buttons are easy to tap on a phone. Preview desktop, tablet, and mobile layouts rather than relying on the editor canvas alone.
  10. Save and test the published page. Select Publish or Update, then open the live page in a private browser window. Submit a test with valid information and check the on-page confirmation, the recipient inbox, and spam or junk folders. Also test required-field errors and an invalid email address. If the message does not arrive, check the email setup and form logs if available before assuming the form itself failed.

Common Mistakes

  • Using a visitor’s email as the sender: Set a site-domain address as From Email and the submitted address as Reply-To to reduce authentication and delivery issues.
  • Leaving sample fields or mismatched IDs: Remove unused fields and verify the IDs referenced in the email body. A typo can leave information out of the notification.
  • Skipping a live test: A form can look correct in the editor while email delivery, redirects, or mobile layout still need attention.
  • Collecting unnecessary personal data: Ask only for details you need, explain how the information will be used, and provide an appropriate privacy notice.
  • Relying on placeholder text alone: Keep visible labels so visitors can identify fields after they start typing and assistive technologies can interpret them.

Tips

  • Use a short form for general enquiries; add specialist fields only when they help route or answer requests.
  • Use a dedicated subject line and include the sender’s name and message in the notification to make incoming enquiries easy to recognize.
  • Check the form at common screen widths and with keyboard navigation. Ensure the submit button is visible and focus states are easy to see.
  • Use a spam-protection option supported by your setup if unwanted submissions become a problem, and test it after enabling it. More protection can also add friction for visitors.
  • Keep the success message on the page specific about what happens next, without promising a response time you cannot guarantee.

Troubleshooting

The Form widget is missing: Verify that Elementor Pro is installed, activated, and compatible with your active Elementor setup. Check that you are editing with an account allowed to use the Pro features.

The form appears but does not submit: Test required fields and email formatting, then check whether a caching, optimization, security, or other plugin is interfering. Temporarily test with conflicting features disabled only if you can do so safely, and restore your normal configuration afterward. Check the browser console or WordPress logs if you have access.

The success message appears but no email arrives: Confirm the To address, email action, and field shortcodes. Check spam folders and your site’s email delivery configuration. WordPress mail may not be reliably delivered by every hosting setup; configure an appropriate SMTP or transactional email service, then send another test. A successful on-page message confirms the submission reached the form, not necessarily the inbox.

Visitors receive an error or cannot see the confirmation: Review the form’s custom messages, redirect URL, and any required fields. Test without page caching and check that the destination page is publicly accessible. If spam protection is enabled, confirm its keys or settings are correct and that it is not blocking valid tests.

Frequently Asked Questions

Do I need Elementor Pro to create a form?
Yes, Elementor’s Form widget is a Pro feature. With Elementor Free, use a separate form plugin or another form service and embed it as appropriate.

Where are Elementor form submissions stored?
Form actions determine what happens to submissions. Email can send them to an inbox; storage or integrations depend on the actions and features available in your setup. Do not assume a copy is saved in WordPress unless you have confirmed that storage is enabled.

Why does the form say it was sent when I got no email?
The confirmation indicates the form submission completed, but email delivery can still fail. Check the recipient, spam folder, and site email configuration, and use a properly configured mail service if needed.

Can I send visitors to a thank-you page?
Yes. Configure a redirect action and enter the destination URL, then test it on the live page. Make sure the page is published and accessible to visitors.

How do I reduce spam submissions?
Use a supported anti-spam option or CAPTCHA if appropriate, keep the form focused, and test submissions afterward. Protection settings can affect legitimate visitors, so monitor both spam and valid entries.

Can I use the form on more than one page?
Yes. You can add a Form widget to multiple pages or reuse a saved design where your Elementor setup supports it. Check the recipient and actions on each instance, since copied forms may retain their original settings.

Related

Method: the standard formula for this calculation, rounded as each result states. See how the calculators work or report an error.