Category: In The Lab

One of the first things site builders realise when working with Gutenberg is that the other plugins they use don’t always play as nicely. Many plugins are adding Gutenberg support, which is great, yet the ones that are don’t always give us what we want. Because… well, we want what we want. Not what the average user does. We have unique needs. ❄️

So, in this tutorial, we’re going to show you how you can get what you want.

For this one we’re covering one of the most common needs of a website. Custom forms. There are some great form plugins out there. Free and premium. We’re going to show you how you can use your favourite form plugin and create a custom Gutenberg form block that works with it. Gravity Forms is the plugin of choice for this tutorial but the same process will work with nearly any of the others.

TL;DR. In your block template use the gravity_form() function. In your block add a text field so you can input your form ID.

Let’s do this!

Our block will look like this by the end, but the key thing to learn from this tutorial is how we make the block interact with the form.

Step 1: Creating our Form

For this step we’ll create our form using the Gravity Forms plugin. In our Gravity Forms settings (Forms > Settings), we’re going to turn off the CSS that the plugin outputs to the front end. This means when we write our own CSS it gives us full control over how the form will look.

Now to create our form, in the WordPress Admin go to Forms > Add New.

Call the new form “Contact”.

We’re going to add 3 fields and give each some placeholder text.

Field Type	Field Name	Field Placeholder
Text	Name	Your Name
Text	Email	Your Email
Paragraph Text	Message	Your Message

Hit Publish and take note of the Form ID. In this example, the generated ID is 1.

Form = Done!

Step 2: Adding and Configuring the Block

Now we get to building our block.

1. In the WordPress Admin, got to Block Lab > Add New
2. Give your new block the title Form
3. Keep the automatically generated slug.
4. Choose an icon, set a category, and add some tags.

Step 2 complete. Nice!

Step 3: Adding Fields

Ok, these are the fields we’re going to add:

Field Label	Field Type	Field Location
Form Title	Text	Editor
Form Text	Textarea	Editor
Form ID	Text	Editor

As far as fields go, that’s about as simple as it gets.

In the admin, it looks like this:

Add all these fields to your block and hit Publish.

Step 4: Building the Block Template

Time to open a text editor. I use VSCode.

In our Block Building screen in the WP Admin, you’ll see over on the right that the plugin is looking for the block template file for the new block. As we’ve only just added it, it’s telling us it can’t find it. Helpfully it’s also telling us exactly what it’s looking for.

Take note of the name block-form.php and open up your active theme files in your text editor.

Add a folder called blocks.

In this new folder, add a new file and type block-form.php as its file name. Hit save.

Switch back to our block editor in WP Admin and hit refresh just to make sure it’s picking up the new file.

Success!

Now, we build the template. We’re going to write some simple CSS, HTML, and PHP in our template file. There are other ways to do this, including building a preview template file for the block, but for simplicity’s sake we’re going to do it all in this single file.

We’ll have 2 sections in our file. CSS at the top, and HTML and PHP at the bottom.

Let’s stub out the HTML for our block. The structure will include:

• A div to wrap around our form
• a h2 for our form title
• a p for our form text
• a php tag for where we will call the form function

<div class="block-form">
    <h2 class="block-form_title"></h2>
    <p class="block-form_text"></p>
    <?php 

    ?>
</div>

I’ve also added CSS classes to each HTML element.

Next step is to add the content of our block using Block Lab’s block_field function.

Our block template file now looks like this.

<div class="block-form">
    <h2 class="block-form_title"><?php block_field( 'form-title' ); ?></h2>
    <p class="block-form_text"><?php block_field( 'form-text' ); ?></p>
    <?php 
         
    ?>
</div>

Now we get to the crux of this whole tutorial. We use the gravity_form() function made available to us with the Gravity Forms plugin, alongside our form-id field to output the form in our custom block.

Our code now looks like:

<div class="block-form">
    <h2 class="block-form_title"><?php block_field( 'form-title' ); ?></h2>
    <p class="block-form_text"><?php block_field( 'form-text' ); ?></p>
    <?php 
        $form_id = block_value( 'form-id' );
        gravity_form( $form_id , false, false, false, '', true, 12 ); 
    ?>
</div>

Using the block_value function we can fetch the ID of the form as input by the user when adding the block to a post or page and assign it to the variable $form_id

We then call the gravity_form() function and set a few parameters. For the from ID parameter, we use our $form_id variable.

The rest of the paramaters mean that the title and description will not be displayed, the form itself will not display if it is inactive, and it will not use AJAX for form submission.

To read more about this Gravity Forms function, or embedding forms in general, check out the official docs.

We now have a functioning custom form block that we can to add to a new post or page in WordPress and have it work in both the editor and frontend.

Let’s check it out.

In the WordPress admin, go to Pages > Add New. Now add a new block and look for our “Form” block. Add it to the page and fill in the fields.

Click away from the block to view the preview.

And hit the Preview button at the top of the page to preview the form on the front end.

We now have a fully functional form block.

Time to make it look good! Back in our template file, at the top, we’re going to write our custom CSS. Our styling looks like this:

<style>
    .block-form {
        padding: 60px;
        background-color: #5a3fd6;
        border-radius: 10px;
        box-shadow: 0px 4px 0px 0px rgba(0,0,0,0.5);
        text-align: center;
        color: #fff;
    }
    .block-form_title {
        color: #fff;
    }
    .block-form ul {
        list-style: none;
        margin-left: 0;
        padding-left: 0;
    }
    .block-form input,
    .block-form textarea {
        border-radius: 4px;
        border: none;
    }
    .block-form input[type="submit"] {
        min-width: 30%;
        background-color: #41b8ff;
        box-shadow: 0 3px rgba(38,30,65,.3);
        text-shadow: 1px 1px rgba(38,30,65,.1);
        font-size: 24px;
    }
    .block-form input[type="submit"]:hover {
        box-shadow: 0 10px rgba(38,30,65,.6);
    }
    .block-form label {
        font-size: 0;
        position: absolute;
    }
</style>

With this in the template file, our form on the front end looks like:

And that’s it! With our styling complete we get a custom Gutenberg block that can display a Gravity form and look just the way we like. ?

So our final template file code is:

<style>
    .block-form {
        padding: 60px;
        background-color: #5a3fd6;
        border-radius: 10px;
        box-shadow: 0px 4px 0px 0px rgba(0,0,0,0.5);
        text-align: center;
        color: #fff;
    }
    .block-form_title {
        color: #fff;
    }
    .block-form ul {
        list-style: none;
        margin-left: 0;
        padding-left: 0;
    }
    .block-form input,
    .block-form textarea {
        border-radius: 4px;
        border: none;
    }
    .block-form input[type="submit"] {
        min-width: 30%;
        background-color: #41b8ff;
        box-shadow: 0 3px rgba(38,30,65,.3);
        text-shadow: 1px 1px rgba(38,30,65,.1);
        font-size: 24px;
    }
    .block-form input[type="submit"]:hover {
        box-shadow: 0 10px rgba(38,30,65,.6);
    }
    .block-form label {
        font-size: 0;
        position: absolute;
    }

</style>
<div class="block-form">
    <h2 class="block-form_title"><?php block_field( 'form-title' ); ?></h2>
    <p class="block-form_text"><?php block_field( 'form-text' ); ?></p>
    <?php 
        $form_id = block_value( 'form-id' );
        gravity_form($form_id , false, false, false, '', true, 12); 
    ?>
</div>

Pretty simple! 🙂

Note that the styling didn’t carry 100% over to the editor screen, even though we had it included in the template file. This was because some styling from the Gravity Forms plugin was given priority in the editor. To get around this we just needed to add some further specificity to our CSS.

I really hope you’ve found this tutorial interesting and helpful. If you have any ideas of what you’d like to see in future ones, please let me know in the comments below.

If you’d like to learn more, check out the previous tutorial on building a custom Hero Block.

Happy block building. ?