Add an Elementor contact form without paying for Elementor Pro
You can add a contact form to Elementor without Elementor Pro by using the free HTML widget. Drag the widget onto your section, paste the form and its CSS, and the form posts to FormThunder, which stores each submission and emails you. Pro's Form widget is for building fields visually, and you don't need it to send a contact form.
Updated
The Elementor code
- Search for the HTML widget and drag it into your section.
- Paste the code. The preview updates in the editor.
- Update the page, then send a test from the live URL.
<style>
.tf-form { display: grid; gap: 12px; }
.tf-form input:not([type="checkbox"]), .tf-form textarea { width: 100%; padding: 12px; border: 1px solid #d4d4d8; border-radius: 8px; }
.tf-form button { padding: 12px 20px; background: #111; color: #fff; border: 0; border-radius: 8px; }
</style>
<form class="tf-form" action="https://formthunder.com/submit" method="POST">
<input type="hidden" name="access_key" value="YOUR_ACCESS_KEY">
<input type="hidden" name="redirect" value="https://yoursite.com/thank-you/">
<input type="checkbox" name="botcheck" style="display:none" tabindex="-1">
<input name="name" placeholder="Name" aria-label="Name" required>
<input name="email" type="email" placeholder="Email" aria-label="Email" required>
<textarea name="message" rows="5" placeholder="Message" aria-label="Message" required></textarea>
<button type="submit">Send</button>
</form>Replace YOUR_ACCESS_KEY with your free key. It's public by design, so it's safe in client code.
Notes for Elementor
- Your global Elementor colours and fonts don't apply to raw HTML automatically. Use
var(--e-global-color-primary)in the CSS to pick up the kit's primary colour. - Save the widget as a Global Widget or a template if the form appears on several pages. A change then applies to all of them.
- If you already use Elementor Pro's Form widget, you can add a Webhook action pointing at your own endpoint. For FormThunder's fields, the HTML widget is more direct.
Or have your AI add it
Connect the MCP server, then ask. The agent creates the form and writes the code for you, and it can send a real test when it's done.
Add a FormThunder contact form to this Elementor site that emails hello@example.com. Send a test when you're done.Questions
Do I need Elementor Pro for a contact form?
No. The HTML widget is in the free version, and it's all this form needs.
Can I use it in a popup?
Popups are an Elementor Pro feature, but the same HTML widget works inside one if you have it.
Get your Elementor form sending
The free plan covers 250 submissions a month, with MCP, the CLI and the brand kit included.