Embed in WordPress

Add a FormHug form to any WordPress page or post using the Custom HTML block or shortcode, with responsive sizing that works on any device.

WordPress is the most common place to embed a FormHug form. You can add a form to any page or post in minutes using the block editor — no plugins required.

Before You Start

Get your embed code from FormHug first: open the form → click Publish → Embed → copy the code. Keep it ready before opening WordPress.

Method 1: Custom HTML Block (Recommended)

1. Open the Page or Post

   In your WordPress dashboard, open or create the page where the form should appear.

2. Add a Custom HTML Block

   Click + to add a block → search for Custom HTML → select it.

3. Paste the Embed Code

   Paste your FormHug embed code into the Custom HTML block.

4. Adjust the Height

   Find the height attribute in the embed code and set it to match your form’s length. A short contact form typically needs 400–500px; a longer survey needs 700px or more.

5. Update the Page

   Click Update or Publish. The form displays on the live page — the block editor shows a placeholder, not the actual form.

The WordPress editor won’t render the form inline. Open the published page in a new tab to see exactly what visitors see.

Method 2: Shortcode

If you’re using the Classic Editor or a page builder that supports shortcodes, you can use:

[formhug id="your-form-id"]

Find your form ID in the FormHug embed panel — it’s the unique identifier in your form’s URL.

Responsive Sizing

The default embed code sets the form width to 100%, which works on desktop and mobile. To cap the width on wide screens, wrap the embed in a container:

<div style="max-width: 680px; margin: 0 auto;">
  <!-- paste FormHug embed code here -->
</div>

After publishing, open the live page on your phone to confirm the form renders correctly at mobile screen sizes before sharing the link.

Related

Embed Options

All embed types available in FormHug

Embed in Webflow

Instructions for Webflow sites