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.

---

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.

The Form Embed Wizard will open with six options for publishing your form.

The three options on the left cover the traditional ways to embed your form on your site:

• Existing Page: Add your form to a page you’ve already created.
• New Page: Create a new page with your form already embedded.
• Shortcode: Copy your form’s shortcode to paste anywhere on your site.

The three options on the right open dedicated landing page experiences for your form using our Conversational Forms, Form Pages, and Lead Forms addons. Each addon has its own guide.

Below, we’ll cover each of the three traditional embedding options.

Existing Page

Click Existing Page, then choose the page where you’d like to embed your form from the dropdown. Click the Add to Page button to continue.

You’ll be redirected to the block editor for the page you selected, see the Embedding a Form with the Block Editor section below for the rest of the flow.

New Page

Click New Page, enter a name for the page, and click the Create Page button.

You’ll be redirected to a new page with the form embedded. Click the Publish button to make the page live.

Shortcode

Click Shortcode. The form’s shortcode will be copied to your clipboard, ready to paste anywhere on your site that accepts shortcodes.

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.

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.

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

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:

• 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:

Embedding Your 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.

To access your site’s widgets, navigate to Appearance » Widgets in the WordPress admin area. This will open the Widgets editing 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.

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

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

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.

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

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

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.

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.