Add a contact form in Oxygen Builder with a Code Block
To add a contact form in Oxygen Builder, use a Code Block element, paste the HTML into its PHP & HTML tab, and the styles into its CSS tab. Oxygen turns off your WordPress theme, so nothing else styles the form for you. It posts to FormThunder, which stores each submission and emails your verified address.
Updated
The Oxygen code
- Add a Code Block element where the form belongs.
- Paste the markup into the PHP & HTML tab and the CSS into the CSS tab, then apply the code.
- Save, and test on the live page.
<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="<?php echo esc_url(home_url('/thank-you/')); ?>">
<input type="checkbox" name="botcheck" style="display:none" tabindex="-1">
<label>Name <input name="name" required></label>
<label>Email <input name="email" type="email" required></label>
<label>Message <textarea name="message" rows="5" required></textarea></label>
<button type="submit">Send</button>
</form>.tf-form { display: grid; gap: 12px; }
.tf-form label { display: grid; gap: 4px; }
.tf-form input:not([type="checkbox"]), .tf-form textarea { padding: 12px; border: 1px solid #d4d4d8; border-radius: 8px; }
.tf-form button { padding: 12px 20px; background: #111; color: #fff; border: 0; border-radius: 8px; }Replace YOUR_ACCESS_KEY with your free key. It's public by design, so it's safe in client code.
Notes for Oxygen
- The tab runs PHP, so
home_url()keeps the redirect correct across staging and production. - To reuse the form, build it in a Reusable Part. A change there updates every page that includes it.
- Oxygen's Selector Detector can map
.tf-forminto its global styles if you'd rather manage the CSS there.
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 Oxygen site that emails hello@example.com. Send a test when you're done.Questions
Why isn't my WordPress theme styling this form?
Oxygen disables the active theme. All styling has to come from Oxygen or from CSS you add.
Does this work in Breakdance too?
A code element works the same way there. The markup is plain HTML, so it runs in any builder.
Get your Oxygen form sending
The free plan covers 250 submissions a month, with MCP, the CLI and the brand kit included.