If you’re just setting out to build your own website or small business site in the UK, adding a contact form is an absolute essential. This beginner-friendly guide takes you step by step through making a polished, professional contact form on your WordPress website using Elementor Pro.
You won’t need coding experience or design skills. All you need is basic WordPress access and the Elementor Pro plugin. We’ll explain everything, from installation to making your form live, so you’ll always know exactly what to do next.
Along the way, you’ll discover how Elementor Pro makes complex web forms easy, whether you want a simple contact section, advanced input fields, or secure spam protection. We’ll also touch on UK-specific legal tips like GDPR, explain common problems, and help you avoid rookie mistakes so your form works from day one.
Ready to finally get your website ready for customers or clients? Let’s dive in and build your first Elementor contact form.
Getting Started: Installing and Activating Elementor Pro Like a Pro
Before you can build a great contact form, you’ll want to have the right tools set up in WordPress. Elementor is a powerful web design plugin known for its drag-and-drop interface, but only the Pro version offers the advanced contact form features you’ll want for your business.
You might see both “Elementor” and “Elementor Pro” listed as plugins. The free Elementor plugin gives you basic website building tools. Elementor Pro is the paid upgrade that unlocks premium widgets, including the in-built form widget needed for flexible contact forms.
To avoid confusion, it’s important to understand that Elementor Pro works as an add-on. You’ll need the free plugin active first, then install the Pro version and activate your license. This step unlocks the extra features and ensures you get support and updates.
Many beginners think installing the Pro plugin alone is enough, but both components are required. Activating your product license is also essential, not just for updates, but for features like the native form builder to appear in your dashboard. Getting this setup right the first time saves a lot of hassle later on.
Once you’ve got Elementor Pro up and running, you’ll have access to the drag-and-drop form builder built into Elementor’s interface. The next steps will show you exactly how to install, activate, and check that the form widget is ready, so you can move straight on to actually building your form.
Step-by-Step Guide to Elementor Install and Activate
- Install the Free Elementor Plugin:
From your WordPress dashboard, go to “Plugins” and click “Add New.” Find “Elementor Website Builder” in the search bar, hit “Install,” then “Activate.” This plugin must be active before you install Pro features. - Purchase and Download Elementor Pro:
Visit the official Elementor website and choose a Pro plan that suits your needs. After purchase, download the Elementor Pro zip file to your computer. Keep your licence key handy for the next step. - Upload Elementor Pro to WordPress:
Back in your dashboard, go to “Plugins,” then “Add New,” and click “Upload Plugin.” Select the file you downloaded and upload it. Once uploaded, click “Activate.” - Activate Your Elementor Pro Licence:
In your WordPress sidebar under “Elementor,” find “Licence.” Enter your licence key and connect your account. This step enables updates and premium widgets, including the all-important Form builder. - Troubleshooting Activation Issues:
If activation fails, check you have both plugins (Elementor and Elementor Pro) active, clear your browser cache, and try again. Sometimes, a conflicting plugin or an outdated WordPress version can also block activation. Deactivate other plugins if needed, or update WordPress before retrying. - Best Practices for Plugin Management:
Always keep both Elementor and Elementor Pro updated to the latest versions for best security and functionality. Regularly back up your site before making big changes, and only download plugins from trusted sources.
Accessing the In-Built Elementor Form Widget
The Elementor Form widget is a premium feature, only available after activating your Elementor Pro license. You’ll find it in the Elementor panel when editing any page or template – look for “Form” in the elements sidebar.
If the Form widget is missing from your list, double-check that both Elementor (free) and Elementor Pro are installed and active. Sometimes, a licence issue or conflict with another plugin can hide premium widgets. The built-in Elementor Form is different from third-party contact plugins, as it allows full drag-and-drop editing and deeper integration with your site’s style and automation.
Once visible, the Form widget is your main tool for building custom, powerful contact forms right inside Elementor, with direct access to advanced settings and styling options.
Creating Your First Contact Form With Elementor Pro
Now you’re ready to move from setup to hands-on creation – this is where you see just how powerful Elementor Pro can be for contact forms. The visual editor makes it easy for beginners to get professional results, without worrying about code or complicated settings.
Adding a form to your site using Elementor starts with dragging the form widget onto your chosen page. You’ll be able to customise every field, control what information you collect, and decide how your form reacts once someone hits “send.”
This is the stage where most users start to feel like real website designers. You pick what questions or details you want from your visitors, such as name, email and a message. There are also choices for extra fields – perfect for more complex businesses, like service providers or online shops, who might need phone numbers or dropdowns.
It’s also time to consider privacy and basic data protection, especially for those running UK websites. Make sure you only collect what’s necessary, and be ready to add a consent box if you need to. The next sections will break down each step, so you can follow along and build a working form, even if you’ve never done it before.
Elementor Adding: Dropping the Contact Form Widget onto Your Page
In your WordPress dashboard, open the page where you want to add the contact form using Elementor’s “Edit with Elementor” option. On a new or existing page, look for the “Form” widget in the Elementor sidebar panel.
Drag and drop the Form widget onto your page layout where you want your contact form to appear. You can place it within a dedicated contact section, on your homepage, or even in the footer for consistent sitewide access. Make sure the form blends with your site’s colours and style for the best user experience.
You can easily reposition the widget at any time by grabbing it and moving it with your mouse, letting you see exactly how it looks before saving.
Setting Up User Input Fields for Your Contact Form
- Default Fields: Name, Email, and Message
By default, the Elementor Form widget adds three basic fields: Name, Email, and Message. These cover the basics for most contact scenarios. You can click each field to edit its label, set a default value, or tweak placeholder text so users know what to enter. - Adding Custom Fields
To gather more details, click “Add Item” within the widget’s settings. You can choose field types like text boxes, phone numbers, dropdowns, checkboxes, and more. Popular options for UK businesses include allowing users to choose a subject, tick a GDPR consent box, or select services from a dropdown menu. - Setting Required Fields
You can control which fields are required before the form is submitted. Switch on the “Required” toggle for vital information-like email or consent-to prevent incomplete queries. This is important for gathering quality leads and staying GDPR-compliant. - Field Accessibility
Proper field labels and placeholders make your form easier for everyone to use, including those with screen readers. Avoid using only colour to indicate errors; provide clear, descriptive error messages for missing or incorrect fields. For best accessibility, use standard form types and avoid custom scripts that might block keyboard navigation. - Basic Data Privacy
Only request data you genuinely need. If you collect personal information, add a GDPR consent checkbox and link to your privacy policy. UK law requires clear communication about how you’ll store and handle submitted data, especially if it includes anything sensitive.
Configure Actions After Form Submission in Elementor Pro
- Send Email Notifications
In the Form widget’s settings, open the “Actions After Submit” dropdown. Select “Email”-this triggers notification emails each time your form is filled out. Edit the email content, recipient address, and layout as needed. Make sure details like the “From” address match your domain to avoid spam filters. - Redirect to a Thank You Page
Add a “Redirect” action to send users to a custom thank you or confirmation page. Enter the URL of your thank you page, which helps confirm to users that their message was received. This page can also be used for lead magnets, downloads, or extra contact details. - Save Submissions
Enable the “Collect Submissions” action to store entries in your website database. This lets you review form submissions from your WordPress admin. Useful if emails ever fail, as you have a backup copy of all messages from your site visitors. - Connect to Marketing Tools
Elementor Pro allows you to link form actions to services like Mailchimp, HubSpot, or ActiveCampaign. Choose one under “Actions After Submit,” then configure your API keys and audience list. This moves new leads straight onto your mailing list without manual copy-paste. - Troubleshooting Submission Issues
If you’re not getting email notifications, check your spam folder, confirm email settings, and consider using a WordPress SMTP plugin for stronger deliverability. If redirect actions don’t work, double-check your page URLs and make sure JavaScript is enabled in your browser.
Styling and Customising Your Elementor Contact Form
Now that your form works, it’s time to make sure it looks the part. Elementor Pro gives you loads of design options, so your contact form can match your website’s branding and provide a pleasant experience for users – no matter their device.
First impressions count. A well-designed form builds trust and appears more professional to potential clients, partners, or customers. You can change everything from the wording on error messages, to the look of your submit button, to fine details like border radius and field spacing.
You don’t need to be a graphic designer either – Elementor’s customisation options are made for beginners, and you can see every change instantly in the builder. There’s also room for advanced tweaks with custom CSS or templates, for those comfortable with more unique styles.
The next sections walk you through messaging, layout, and advanced design, so your form isn’t just functional, but feels like a polished part of your brand.
Customise Elementor Messaging and Set Confirmation Text
- Edit Success Message:
Change the text that appears after a successful form submission to thank visitors and confirm receipt. - Custom Error Messages:
Write specific helpful error texts for fields left blank or filled incorrectly. - Personalise Confirmation Emails:
Customise confirmation or auto-reply emails sent to users after submitting the form, providing reassurance and next steps if needed. - Localise or Formalise Messaging:
Tailor instructions or labels for your UK audience, using British English and relevant contact details.
Design Button Style and Layout of the Form
- Set Button Colour and Size:
Change the submit button’s shade and text size to match your branding. - Adjust Hover Effects:
Add hover styles so the button changes colour or style when users mouse over it. - Column Width and Field Layout:
Arrange fields side by side or in a single column, and set field spacing for improved appearance on both desktop and mobile. - Button Text and Shape:
Change the button wording (e.g. “Send Message”) and adjust its corner radiuses for either sharp or rounded edges.
Styling Elementor Forms with Advanced Design and Custom CSS
- Use Elementor’s Advanced Style Controls:
Adjust typography, input background colours, padding, and borders for a custom look. - Add Icons and Visual Cues:
Place icons inside input fields or beside labels to guide users and add visual interest. - Apply CSS for Unique Layouts:
Use Elementor’s “Custom CSS” tab (Pro users only) to implement advanced effects like animated borders, transitions, or brand-specific design touches. - Template and Theme Integration:
Style your form to match your website’s existing theme colours, fonts, or branding with global settings, so the form feels fully integrated. - Improve Accessibility Through Contrast and Sizing:
Adjust colour contrast and font size so the form is usable for all visitors, including those with visual impairments.
Publishing and Testing Your Elementor Contact Form For Success
With your form designed, you’re nearly at the finish line. The final steps are to make your form visible to the world and confirm it works as expected. This means you’re not just building it and leaving it – you’re checking to see users can send enquiries smoothly, and that their messages safely land in your inbox.
Publishing your form involves saving changes and updating your page so it’s live for visitors. You may be updating an existing page, or putting your new form on a fresh landing page built specifically for enquiries. It’s always a smart move to preview your page before going live, to spot any design or content issues.
Once your form is live, thorough testing is key. This includes submitting a few test messages with your own details, checking how the confirmation flow works, and most importantly, confirming the email notifications are arriving reliably. Many contact forms break down at this step due to spam filters, email configuration errors, or missing setup, so a proper testing routine catches issues before they cost you real business leads.
The next sections guide you through publishing best practices and show you how to troubleshoot and fix any email or delivery issues that might pop up, ensuring your contact system is robust from the start.
Elementor Publish Publishing: Putting Your Form Live
To publish your Elementor contact form, click the “Update” or “Publish” button in the Elementor editor once your page changes are complete. This makes the page, and your form, publicly visible to all website visitors.
If editing an existing page, ensure you review changes in the preview mode to spot any layout or text errors before updating. For new pages, set the page status to “Public” and assign it a clear, memorable URL so users can easily find your contact section.
Your form will now be live and accessible from your site’s front end, ready to receive messages from potential customers.
Testing and Fix Elementor Emails for Reliable Delivery
- Test Submitting the Form:
Fill in your form fields as a real visitor would and submit the form. Confirm that the success message or thank you page appears. - Check Your Email Inbox:
Look for the notification email. Make sure to check the spam or junk folder as well, in case your delivery settings need adjusting. - Review Email Content:
Ensure the email contains all submitted details and displays the correct recipient address, subject line, and body formatting. - Address Missing Emails:
If no email arrives, install an SMTP plugin on your WordPress site (like WP Mail SMTP). Configure it using your hosting or email provider’s settings for stronger delivery rates. - Troubleshoot Common Failures:
Double-check email addresses set in your form, make sure your WordPress hosting allows outgoing emails, and review plugin conflict or misconfiguration issues if messages still fail.
Enhancing and Securing Elementor Contact Forms for Your Business
Once your form is live and working, you may want to take things to the next level for your business. This means protecting your inbox from spam, adding advanced fields for more detailed enquiries, and connecting your forms to marketing or workflow tools.
Spam is a widespread issue for contact forms on any website. Using Elementor Pro’s integration with Google reCAPTCHA helps to block fake and automated entries so your inbox stays clean and your real leads always come through.
Many UK businesses also need to accept files (like CVs or photos), use extra dropdowns for service selection, or integrate the form with email platforms. Elementor Pro provides advanced fields and customisation to support these workflows, and integrations let you automatically capture leads for marketing or follow-up. Securing your forms with features like reCAPTCHA also helps you meet data protection and GDPR standards important in the UK.
The next sections guide you through adding robust spam protection and advanced features, so your form truly matches your business needs and keeps your website and users safe.
Elementor Spam-Proof: Add reCAPTCHA for Bot Protection
Google reCAPTCHA v3 is built into Elementor Pro to help fight spam. You’ll need to sign up for API keys from Google reCAPTCHA and add them to Elementor via the integrations panel in your WordPress dashboard.
Once enabled, reCAPTCHA works invisibly in the background to identify bots without making real users solve puzzles. It helps UK businesses cut down fake enquiries and protect user privacy. For best results, test often and check that reCAPTCHA doesn’t block genuine messages due to strict settings.
Using Elementor Pro Advanced Fields and File Uploads
- Enable File Upload Fields:
Add a “File Upload” field so users can attach PDFs, images, or documents-ideal for CVs, job applications, or detailed service requests. - Add Dropdowns, Checkboxes, and Select Fields:
Include advanced field types to let users pick services, preferred contact times, or answer survey questions easily. - Request Phone Numbers or Dates:
Use number and date fields to collect accurate extra info, ensuring data is structured for follow-up or calendar bookings. - Conditional Logic (Elementor Pro):
Show or hide fields based on user answers, creating dynamic forms that only display what’s relevant for each enquiry.
Troubleshooting and Elementor Working? Frequently Asked Questions
No matter how smooth the process, beginners often hit hurdles when creating websites. This section is designed to clear up the most common worries-whether your form won’t send, looks odd, or premium features are missing.
It’s normal for contact form emails to be blocked by spam filters, or for plugins to clash with each other occasionally. Here, you’ll get a quick path to solving problems that other users have faced and fixed. We’ll also answer the questions we see UK Elementor users ask most frequently, including about upgrades, GDPR, compatibility, or getting the most from Pro features.
Think of this part as your lifeline if things aren’t working as expected or if you’re unsure about best practices. The solutions below are brief, so you can move quickly through issues and get back to building and growing your website with confidence.
Elementor Working? Solutions to Common Problems
- Form Not Displaying:
Make sure both Elementor and Elementor Pro are activated; clear your browser cache and check for plugin conflicts. - Emails Not Sending:
Review your form’s recipient settings, set up SMTP email delivery, and confirm your web host allows outgoing emails. - Plugin Conflict or Errors:
Temporarily deactivate other plugins, update everything to the latest version, then reactivate each plugin to spot which one causes the issue. - Licence or Pro Features Missing:
Confirm your licence is active in the Elementor settings; log into your Elementor account if premium widgets disappear.
Creating Elementor FAQs and Pro Features Explained
- Do I need both Elementor and Elementor Pro?
Yes, the free plugin powers the builder, and the Pro add-on unlocks advanced widgets. - Is Elementor Pro a one-time payment?
No, it’s an annual subscription with ongoing support and updates. - Do Elementor forms work with my theme?
Elementor works with most WordPress themes, especially if they support full-width templates. - Can I make my form GDPR compliant?
Yes, by adding a consent checkbox, clear privacy notice, and limiting data collection to only what you require. - What if I want to use another contact form plugin?
You can, but Elementor’s built-in forms are more tightly integrated for styling and automation features. - How do I upgrade from free to Pro?
Visit the Elementor website, purchase a licence, download and install the Pro plugin, then activate in your dashboard.
Takeaways From This Step-By-Step Elementor Form Guide
- Install and activate both Elementor and Elementor Pro before building your form.
- Use the built-in Form widget for customisable, drag-and-drop forms – no coding needed.
- Set up essential input fields and actions after submission (like email alerts or redirects).
- Customise your form’s style and layout to reflect your brand and boost credibility.
- Test your form live and fix any email delivery or visibility issues before launching.
What’s New? Exploring Advanced Form Features and Elementor Plugins
- Integrations with Email Marketing and CRM:
Sync contact form data straight to Mailchimp, HubSpot, or ActiveCampaign, helping you build customer lists and start automated follow-ups. Set up API keys in Elementor’s “Integrations” panel and map each form field to your CRM’s data columns. - Automation Tools like Zapier:
Connect your Elementor form to hundreds of apps by triggering workflows for new submissions-like sending notifications to Slack or creating customer records in your CRM. Use Zapier or similar platforms for setups beyond direct built-in integrations. - Third-Party Elementor Addons:
Addons like Essential Addons, Crocoblock, and PowerPack offer extra widgets (signature fields, payment buttons, surveys) and advanced styling controls for users needing even more power. - Accessibility and UK GDPR Features:
Recent Elementor updates and add-ons now help your form comply with accessibility and legal guidelines, like improved ARIA labelling, keyboard navigation, and data consent tools fit for UK users.
Final Thoughts Elementor: Why Elementor Pro is the Best Choice for UK Contact Forms
Elementor Pro provides UK site owners with a robust, user-friendly solution for professional contact forms. Its drag-and-drop builder, advanced integrations with marketing tools, and easy styling make it stand out against traditional contact plugins.
For businesses that need forms that look great, work reliably, and fit strict UK data law, Elementor Pro strikes an ideal balance between power and simplicity. Ongoing updates, support, and unique features help future-proof your website as your business grows.
If you want extra support, or reach a problem you can’t solve, the WordPress Web Design DCP team is always here to help you achieve a polished, fully compliant Elementor contact form.
