Add forms to WordPress

Use the block editor or Classic Editor to add a contact form in minutes.

Method 1: Custom HTML block (Gutenberg)

The WordPress block editor makes it easy to add a FormBlade form to any page or post using the Custom HTML block.

1. Open the page or post where you want the form.
2. Click the + button to add a new block.
3. Search for Custom HTML and select it.
4. Paste your FormBlade form code into the block.
5. Click Preview to verify the form renders correctly.
6. Click Publish or Update to save.

Here is an example form with inline styles that works well inside most WordPress themes:

<form action="https://formblade.com/f/contact" method="POST"
  style="max-width:480px;font-family:inherit">

  <div style="margin-bottom:16px">
    <label style="display:block;font-size:14px;font-weight:600;margin-bottom:4px">Name</label>
    <input type="text" name="name" required
      style="width:100%;padding:10px 12px;border:1px solid #d1d5db;border-radius:6px;font-size:15px">
  </div>

  <div style="margin-bottom:16px">
    <label style="display:block;font-size:14px;font-weight:600;margin-bottom:4px">Email</label>
    <input type="email" name="email" required
      style="width:100%;padding:10px 12px;border:1px solid #d1d5db;border-radius:6px;font-size:15px">
  </div>

  <div style="margin-bottom:16px">
    <label style="display:block;font-size:14px;font-weight:600;margin-bottom:4px">Message</label>
    <textarea name="message" rows="5" required
      style="width:100%;padding:10px 12px;border:1px solid #d1d5db;border-radius:6px;font-size:15px;resize:vertical"></textarea>
  </div>

  <button type="submit"
    style="background:#6c47ff;color:#fff;border:none;padding:12px 28px;border-radius:6px;font-size:15px;font-weight:600;cursor:pointer">
    Send
  </button>
</form>

Replace your-endpoint-id with the form link ID from your FormBlade dashboard.

Method 2: Classic Editor

If you use the Classic Editor (or the Classic block inside Gutenberg), you need to switch to the HTML view before pasting your form code.

1. Open the page or post for editing.
2. Click the Text tab in the top-right corner of the editor (not the Visual tab).
3. Paste your FormBlade form HTML at the desired position.
4. Click Publish or Update.

Method 3: Iframe embed

If your form has hosted fields configured in FormBlade, you can embed it as an iframe. This avoids any theme CSS conflicts.

<iframe
  src="https://formblade.com/f/contact"
  width="100%"
  height="500"
  frameborder="0"
  style="border:none;max-width:600px">
</iframe>

Replace /f/contact with your own form link from the dashboard.

You can use an iframe inside a Custom HTML block (Gutenberg) or the Text tab (Classic Editor).

Tips

Don't mix with WordPress form plugins

Plugins like Contact Form 7, WPForms, or Gravity Forms use their own submission handlers. Do not paste a FormBlade form URL into those plugins' action fields — they will not work together. Use plain HTML as shown above.

Add a form to sidebar widgets

Go to Appearance → Widgets, add a Custom HTML widget to your sidebar, and paste your form code. This is a great way to add a newsletter signup or quick contact form to every page.

Add a form to the footer

In the Theme Customizer (Appearance → Customize), look for a footer widget area. Add a Custom HTML widget with your form code. If your theme doesn't have footer widget areas, you can edit the footer template directly in footer.php.

Troubleshooting

Form not showing on the page

This almost always means you pasted the code in the Visual tab instead of the Text tab (Classic Editor), or you used a Paragraph block instead of a Custom HTML block (Gutenberg). Switch to the correct mode and paste again.

Redirect not working after submission

If the form submits but the user stays on the FormBlade thank-you page instead of returning to your site, make sure you have set a Redirect URL in your form settings on the FormBlade dashboard. Set it to the full URL of your WordPress thank-you page, for example https://yoursite.com/thank-you/.