Skip to main content
Auto Form Builder
Download FREE

Guides

How to Add a Form to a WordPress Page

Once your form is built, getting it onto a page takes less than a minute — no theme edits or custom templates required. Auto Form Builder gives you a shortcode and a Gutenberg block that always render the latest version of your form. This guide covers the three common ways to place a form on a WordPress page, from the block editor to classic posts.

What you'll need

Auto Form Builder installed free from WordPress.org — no account required for the core plugin.

Step 1: Install Auto Form Builder and create your form

If you have not already, install Auto Form Builder from Plugins → Add New on WordPress.org and activate it. Build your form in the drag-and-drop editor, configure notifications and save — you need a saved form before you can embed it. Note the form name in the Forms list so you can pick it quickly in the block dropdown later.

Step 2: Copy the shortcode from the Forms screen

Open the Forms screen in Auto Form Builder and find your form in the list. Click to copy the shortcode — it includes your form ID and looks like [auto_form_builder id="123"]. The shortcode works in pages, posts, widgets and many page builders that support WordPress shortcodes. It always loads the current version of the form, so edits in the builder appear on the page without changing the shortcode.

Step 3: Open the page where the form should appear

In WordPress, go to Pages → All Pages and edit the target page — Contact, Get a Quote or a dedicated landing page. If the page does not exist yet, click Add New and give it a clear title before inserting the form. Place the form where visitors expect it, typically below introductory text and above the footer, so the call to action is visible without scrolling past unrelated content.

Step 4: Insert the form with a block or shortcode

In the block editor, click the + button, search for Auto Form Builder and add the block, then select your form from the dropdown — you will see a live preview in the editor. Alternatively, add a Shortcode block and paste the copied shortcode directly. In the classic editor, paste the shortcode on its own line where you want the form to render.

Step 5: Adjust layout and publish

Use block alignment and your theme column settings if the form should sit beside other content — full-width layouts usually work best for multi-field forms. Preview the page on mobile before publishing because form width and padding vary by theme. Click Update or Publish, then visit the live page and submit a test entry to confirm the form displays and submissions are recorded.

Tips

  • Put a one-sentence intro above the form explaining what happens after submit — "Fill in the form below and we will reply within 24 hours" sets expectations and reduces duplicate submissions.
  • Avoid placing two different forms on the same page unless each serves a distinct purpose; competing calls to action confuse visitors and lower completion rates.
  • If the form looks narrow or misaligned, check your theme full-width page template — many themes offer a "No sidebar" layout that gives forms more horizontal space.

Go deeper

FAQ

Does the shortcode update automatically when I edit the form?

Yes — the shortcode and Gutenberg block always render the latest saved version of the form. You do not need to change the embed code after editing fields or styling.

Can I add a form to a sidebar or footer widget?

Yes — paste the shortcode into a Text or Shortcode widget in Appearance → Widgets, or use a block theme widget area that supports shortcodes.

Related guides

Build it free with Auto Form Builder

Install from WordPress.org and follow the steps above — no code, no monthly fees for the core.