Blog -

How to Embed a Form in WordPress

Brenda Barron By Brenda Barron Published April 13, 2022

Embed form WordPressWith the Gravity Forms WordPress form plugin, you can quickly and easily create and embed a form in WordPress. Whether you want to build a contact form, a payment form, a quiz or survey, or some other type of data capture workflow, Gravity Forms has the all tools you need for your next project.

In this how-to post, we’ll go over some basic getting started points for creating forms and walk you through the different options for embedding a form in your WordPress website. Let’s get started…

Create a Form With Gravity Forms

Let’s start at the top: before you can embed a form in WordPress, you have to create it.

So what kind of forms you can build with our plugin? The short answer: any type of form!

Here are just a few examples:

Thanks to our template library, you can easily find a form template you need, import it into your website, and then edit it to meet your needs. So let’s take a look at how the process works…

Start With A Form Template

The easiest way to get started with Gravity Forms is to use one of the premade form templates from our template library. Simply choose a form you need and click the Get This Form Template button.

Contact Form

The template will download in JSON format. You can then go to your WordPress dashboard and click on Forms > Import/Export > Import Forms. Locate the form template and press Import.

Import Forms

This will import the form onto your site and you can then proceed with the next step of editing and customizing the form.

Edit The Form 

Once you’ve imported the form template, you can edit it to suit your requirements. You can add more fields, remove those that you don’t need, and customize any field settings. When you’re done, simply Update the form to save the changes.

Form Editor

For more information on how to get started with your first form, check out this article – How to Create a Form in WordPress.

Install And Configure Any Necessary Add-Ons

Lastly, consider installing an add-on or two to make your forms even smarter. For example, you could install an email marketing Add-On such as Mailchimp or HubSpot.

Mailchimp

Or, you could install the Zapier Add-On to automate admin tasks related to form submissions and sync your forms with thousands of other applications.

If you need more information on how to get started with Gravity Forms, we have a tutorial that walks you through all of the necessary steps.

How To Embed A Form In WordPress

Now that you know how to get started with Gravity Forms, let’s find out how to embed a form in your WordPress website. There are several methods for doing this and we’ll go over each one below.

Embed a Form Using the 2.6 Embed Form Flyout

If you’ve updated to Gravity Forms 2.6, then you can now embed a form into a page or a post directly from the form editor using the new Embed Form flyout. Watch the video or read on to find out how to do so…

 
The Embed Form flyout utilizes the WordPress Block editor, and gives you the option of selecting to display the form on a new or existing page or post, or a custom post type (with the use of filters). To get started with the Embed Form flyout, within the form editor simply click on Embed, which you will find in the top right corner of the screen.

Form Embed

Then, within the Embed Form flyout select the page or post where you would like to add your form. Alternatively, you can choose to create a new page or post. Now select Insert Form (or Create) and the WordPress editor will automatically open your new or existing page or post.

If you have chosen to embed your form in an existing page or post, you will find the Gravity Forms block highlighted under Embeds. Drag and drop the block, positioning it within the existing content where you deem appropriate.

Embed a form in WordPress

If you have chosen to create a new page or post, you will find the form automatically embedded within the Block editor.

Embed a form in WordPress - New Page

If needed, you can use the Block Options to control how the form appears on your site. A few options include:

  • Toggling the title of the form on or off
  • Toggling the description of the form on or off
  • Embedding the form on the front-end using AJAX, so confirmations and changes between form pages can happen without page reloads

When you’re done going through these options, save your changes and then view your page to see the form in action. For more information on the Form Embed flyout, check out the Gravity Forms Documentation.

Embed A Form Within The Block Editor

Of course, you can also embed a form directly within the Block editor, without needing to use the Embed Form flyout. This is useful if are already editing a page or post and simply want to add an existing form.

Again, watch this video or read on to learn more…

 

To embed a form within a page or a post, click the Plus sign in the Block editor and search for Gravity Forms. Under Embeds, click on Form. This will insert the Gravity Forms block.

Embed a Form in WordPress - Block Editor

Then, select the correct form from the drop-down menu. This will insert that form onto the page. Customize the block options as required and then publish the page.

For more information on embedding a form directly into the Block editor, check out this article – The Gravity Forms Gutenberg Block.

Embedding A Form Using The Classic Editor

If you’re still using WordPress 4.9 or lower – or if you’ve upgraded to WordPress 5.0 and above but you’re still using the Classic Editor instead of the new Block editor – you can still easily embed Gravity Forms into your posts and pages.

You’ll start by selecting the page where you want your form to appear. When the page or post editor loads, click on the Add Form button on the Upload/Insert toolbar.

Insert Form

A new modal window will appear where you’ll be able to choose the correct form from the drop-down menu. Similarly to the block editor, you’ll have a few options here to configure how the form displays on the front-end of your site.

When you’re happy with the changes, click the Insert Form button to automatically insert the Gravity Forms shortcode into the page or post. Save the changes and you’ll then be able to view the page with the embedded form.

Using Theme File Or Hooks To Embed a Form

The last option is to embed a form using theme files or hooks. This option is useful if you’re a designer or a developer and want more advanced control over how a form displays.

To do this, you’ll need to use a function call within your WordPress theme file. The function and its available parameters are outlined below.

gravity_form( $id_or_title, $display_title = true, $display_description = true, $display_inactive = false, $field_values = null, $ajax = false, $tabindex, $echo = true );

One important thing to note if you decide to use this method, is that you must also manually include the necessary Gravity Forms related Javascript and CSS files. You can do this using the built in WordPress enqueue capabilities.

Those files are not included by default when you’re embedding a form via a function call. However, they are necessary for forms that make use of the conditional logic or use the date picker field.

As such, it’s strongly recommended that you enqueue those scripts to ensure your forms work properly. This will also prevent Gravity Forms from including them on the page if they’re already present.

To enqueue the necessary JavaScript and CSS files, you can use the gravity_form_enqueue_scripts function which looks like this:

gravity_form_enqueue_scripts( $form_id, $is_ajax );

You should add this function within your theme’s header.php file just before the wp_head() function is called.

For more information on the different options for embedding a form in WordPress, check out these resources…

Ready To Add Forms To Your WordPress Website With Gravity Forms?

If you still don’t have your Gravity Forms license, don’t worry. Start by signing up for a free personalized Gravity Forms demo and explore all the features that make our plugin a favorite with WordPress website owners worldwide.

Already sold on using Gravity Forms? Purchase our premium WordPress form plugin today!

 

Gravity Forms Newsletter

If you want to keep up-to-date with what’s happening on the blog sign up for the Gravity Forms newsletter!