Displaying Forms on Your Site

Want to learn about the different ways to showcase the forms you’ve created on your WordPress site? WPForms can easily be integrated into any aspect of your website.

This tutorial will show you different ways to display forms created with WPForms on a WordPress site.

Note: The steps below are for WordPress version 5 or newer. If you are using an older version of WordPress, please see our tutorial on working with forms in the WordPress Classic Editor.

Before getting started, make sure WPForms is installed and activated on your WordPress site and that you’ve verified your license.

This tutorial will focus on how to display forms on your site within a page or a widget.

Embedding Your Form on a WordPress Page

There are two different ways to embed your forms on a WordPress page. You can use the built-in embed wizard in the form builder or add your form to a page manually with the block editor.

Embedding a Form with the WPForms Embed Wizard

To start, you’ll need to create a new form or edit an existing one to access the form builder. Once you’ve finished customizing your form, you can use the Embed Wizard right from the form builder by clicking the Embed button.

Accessing the WPForms embed wizard in the form builder

From here, you’ll have the option to either create a new page to embed your form on, or to select an existing page to add your form to.

Choosing whether to create a new page to embed a form on, or to select an existing page

If you select the Create New Page option, you’ll be asked to enter a name for the page. Then click the Let’s Go button to continue.

The Create New Page option in the form embed wizard

After that, you’ll be redirected to the new page with the form embedded. When you’re ready, go ahead and click the Publish button to publish your form.

Publish page

If you choose the Select Existing Page option, you’ll be asked to pick which page to embed your form on from the dropdown.

The Select Existing page option in the form embed wizard

After selecting the page, click the Let’s Go button to be redirected to the block editor. In the block editor, you’ll need to add a new block to embed WPForms to the page.

Display form on existing page

We’ll walk you through the steps in the next section.

Embedding a Form with the Block Editor

Once you’ve opened the page editor, you can add a new block by clicking the plus (+) icon in the upper left corner.

Adding a new block to a page

This will open a menu of block options. To locate the WPForms block, you can search for “WPForms” or scroll to the Widgets category. Then click the WPForms block.

Adding the WPForms block to a page

This will add the WPForms block to the page editor. Next, select the form you want to embed from the Select a Form dropdown.

Selecting a form from the WPForms block

After you select a form title, the full form will display within the WPForms block. On the right sidebar menu, you’ll see additional customization settings. Within these block options, you can customize the following settings:

The WPForms block settings

  • Form: This setting allows you to choose a different form to display.
  • Show Title and Show Description: With these options, you can hide or show additional form details.
  • Form Styling Options: WPForms allows you to style your forms in the block editor without writing any CSS. To learn more, be sure to check our tutorial on styling your form in the block editor.
  • Advanced: Here you can copy any customization you’ve applied to this form and reuse it on a different form. You’ll also be able to add CSS classes to your form. This option is recommended for advanced users only.

Once you’re happy with your form and its settings, publish the page and visit your website’s frontend to see your form in action. Here’s what our example would look like on a live site:

Try this Form Demo!

Embedding Your Form in a Widget

Note: These instructions are for the Block Widgets editor that shipped with WordPress 5.8. If you’re still using the Classic Widgets editor, please see our tutorial on using forms with the Classic Editor for steps to embed a form in a widget.

A WordPress widget is a small block of content on your site that performs a specific function. For instance, you can add the WPForms block to a widget area to embed a form in the sidebar or footer of your site.

Note: Want to learn more about WordPress widgets? Check out WPBeginner’s guide to using widgets.

To access your site’s widgets, navigate to Appearance » Widgets in the WordPress admin area. This will open the Widgets editing screen.

Accessing the Widgets editor screen

From here the process is very similar to embedding a form in a post or page. First, find the widget area you want to add your form to. Click on it to be sure you’re editing the right area.

Selecting a widget area to add a form to

Then click on the blue plus (+) button in the top left corner of the editor.

Opening the widgets block library

In the block library, search for “WPForms” or scroll to the Widgets section and click on the WPForms block.

Adding the WPFroms block to a widget

This will add the WPForms block to your selected widget area. You can drag and drop blocks to rearrange them as needed. Then choose the form you wish to display from the Select a Form dropdown.

Selecting a form to display in a widget

Be sure to click on the Update button in the top right corner of the Widgets editing screen to save your changes.

Updating widgets to save changes

Here’s a sample of what a form would look like in the footer on a live site:

An example of a form displayed in a footer widget

Frequently Asked Questions

Below, we’ve answered some top questions about creating your first form.

Can I embed the form to an Elementor page?

Yes, you can use the WPForms Elementor widget to easily add a form to your Elementor page. Once you’re in the Elementor builder, simply drag and drop the WPForms widget to your page.

Adding WPForms to an Elementor page

For a complete walkthrough, be sure to check our guide on adding WPForms to an Elementor page.

That’s it! Now you’ve learned the different ways to embed WPForms to your WordPress site.

Next, would you like to view entries submitted by users through your WordPress forms? Be sure to check our complete guide to managing entries in WPForms for a complete walkthrough.