Blog -

How to Embed WordPress Forms Using Code

By Samuel Aguilera Published April 8, 2021

Embedding forms into your content is pretty easy using Gravity Forms’ built-in support for WordPress Classic Editor or Gutenberg. You can even use the Form Widget, added to the WordPress Appearance Widgets menu, to embed a form into any of the WordPress widget areas.

But… what if you want to embed the same form underneath the content on all of your blog posts? You can of course use the above to embed the form manually for each post, although that doesn’t sound like a smart way of achieving our goal, right?

There must be a better way to make technology work for us, don’t you think?

Well there is! We call it the function call embedding method.

What?

It basically consists of two functions provided by Gravity Forms core that you can use to embed your form using code:

gravity_form() – This is the main function, that takes care of displaying the form.

gravity_form_enqueue_scripts() – This function is a required companion, that will ask WordPress to enqueue the required CSS and JS files for the form.

I will assume that you already know how to create and configure a Newsletter form. Therefore I will focus this tutorial on using the above functions along with the WordPress filter the_content and get_header hook.

Preparing gravity_form() to call our form.

First, we need to know the id of our form. My Newsletter form has id 5. This will be the first parameter for the gravity_form() function call, and the only one that is required. So you could just use the following:

gravity_form( 5 );

But in this case I want also to enable ajax submission to avoid the page reloading when a visitor clicks the form button.

The parameter to enable ajax submissions is the sixth parameter and another important parameter for this use case is the echo parameter – this last one we need to set to false to tell Gravity Forms to return the form instead of printing it directly to the screen.

Therefore I will use default values for all the parameters except for the form id, ajax submission and echo, for which I will use 5, true and false respectively. My function call will look like this:

gravity_form( 5, true, true, false, false, true, false, false );

You can find more details about each parameter by checking the documentation for the gravity_form() function call.

At this point we know already which function and parameters we will use to get the form.

Preparing gravity_form_enqueue_scripts() to enqueue the required scripts.

Now we need to prepare the function that will ask WordPress to enqueue the required files for our form to be displayed and work as expected.

gravity_form_enqueue_scripts() has only two parameters, the first one to specify the id of our form, and the second to make ajax submission enabled or not (disabled by default).

We want to use ajax submission for our form, so we will use the two parameters, like this:

gravity_form_enqueue_scripts( 5, true );

Using WordPress core get_header and the_content to trigger our functions.

At this point we have the Gravity Forms functions ready, the only thing left is to call them when needed to make the magic happen.

We will use the WordPress core get_header hook to run the function to enqueue the files, this hook runs just before wp_head so it will ensure the files are already enqueued before Gravity Forms needs them.

function gf_enqueue_required_files() {
	GFCommon::log_debug( __METHOD__ . '(): running.' );
	if ( is_single() && 'post' === get_post_type() ) { // Do it only for Posts.
		gravity_form_enqueue_scripts( 5, true );
	}
}
add_action( 'get_header', 'gf_enqueue_required_files' );

The snippet has an if statement that will ensure it runs only for WordPress default posts.

And finally we’re going to add our form at the end of our posts’ content by using the following:

function gf_add_newsletter_form_after_post( $content ) {
	GFCommon::log_debug( __METHOD__ . '(): running.' );
	// Form added after the post content.
	$content .= gravity_form( 5, true, true, false, false, true, false, false );
	return $content;
}
add_filter( 'the_content', 'gf_add_newsletter_form_after_post' );

That’s it! Once you have the above snippets added to your site, your form will be added dynamically after the content on each WordPress post you publish.

And you know what? If you change your mind later, you don’t need to edit all your posts. As you’re embedding the form on the fly with the snippets, you can simply remove the snippets to stop the form from being added after your posts. Isn’t it great when machines do the work for you? 😉

Not a Gravity Forms customer yet? Get started with a free personalized demo and test out all the features that Gravity Forms has to offer!