Skip to main content

Create Simple Forms with the Pinegrow Web Editor

Create Simple Forms with the Pinegrow Web Editor

Did you know that Pinegrow has a WordPress forms Smart Action built in? Yup! They actually have a way for you to capture form data from a regular HTML contact form, send that data to your email, and optionally store it in your WordPress database as a post in a Custom Post Type. How cool is that?

YouTube video

Before you get too excited, I’ll warn you that it’s functional but pretty limited. Don’t expect all the features you’d get in a dedicated forms plugin, even the smaller free ones. If all you need is to capture data and email it, though, it does a great job, and that’s one less plugin you need to install and maintain on your server.

Let’s take a look at an example.

In this sample project, I’ve created a WordPress block plugin with a single block for our form. The form is already built out using HTML, and it’s styled with Bootstrap in this example. As you can see, we just have a few fields here for demonstration purposes. You’re not limited to these fields, any type of HTML form field will work just fine.

If we look at it on the front end, we’ll see that it looks okay, but doesn’t do anything when we try to submit it. That’s because we haven’t configured the WordPress smart action that tells it what to do when it’s submitted yet.

Back in the Pinegrow editor, we’ll select our form and come over to our WordPress actions panel. I’ll select the Global Smart Action for Forms, and we can enter some properties.

I’ll start by giving this form an ID of contact_form_one. I want submissions to go to my email and to be saved to my WordPress database, so I’ll check those options here.

Next, I’ll give it my email address where I want the form to be sent, and I’ll tell it the slug of a post type I want to use to save the form submissions. We’ll check the button to create this custom post type, and we’ll give it a friendly singular and plural name. If you have ever created a custom post type using any other tool, this should all be familiar to you.

Now, we’ll come down to the message settings and give it a name for the email message and post title. We can enter some intro text that gets inserted into the email and post, and that’s about it. The post and email will just have that message along with a list of the field names and the data that the submitter entered.

If we want, we can customize the success and error messages that are shown to the submitter, or we can select an HTML element to show if you want to go a little crazy. This checkbox down here also lets you show the data that the user submitted. I’ll check this for our demonstration.

We could configure ReCaptcha, but I’m not going to do that right now. We also have a few Advanced options for things like working around troublesome JavaScript or calling custom functions after the user submits the form.

I’m a nerd, so I like looking at the code that’s being generated. We can do that by clicking this preview icon up here. You can also examine the PG Simple Form Mailer script to see how it works or to create a pg_form_email filter to customize your subject line and message body. 

Enough of all this nerdy stuff. Let’s submit a form and see what happens.

Switching back to our page, I’m going to click the edit button to recover the block. This is because we made a substantial enough change to it that it needed a kick in the pants. I’ll save and update the page, then we’ll submit the form with a little dummy data.

As you can see, the form has been submitted, and we can see the success message and some of the submission details. Over here in my email, you’ll see that I’ve received a notification, and now let’s check out our custom post type.

In the WordPress Dashboard, we now have our Contact Submissions CPT visible, and when I click on it, you can see a post with that same information that I was just emailed.

As I mentioned in the beginning, this is pretty limited, but as you can see, it’s quite functional for basic purposes. If you need anything more advanced, then you should definitely look into something like Gravity Forms, Fluent Forms, or WS Form.

I’ll leave a link in the description below to Pinegrow’s forms documentation page, where you can learn more about how it works and how to extend it if you are feeling adventurous.

As always, if you found this video helpful, please like and subscribe or leave a comment down below, and I’ll see you next time.

Recent Posts

  • Pinegrow Countdown: Day 5 – Desktop or Plugin?

    With Pinegrow’s Black Friday sale and the WordPress plugin being released on December 1st, you might be asking yourself which product is right for you. I can’t answer that question for you, but I can help you think through some of the pros and cons of each one and why you might want to use […]

  • Pinegrow Countdown: Day 6 – What’s New

    Pinegrow revealed that they would be releasing both the Pinegrow WordPress Plugin and Pinegrow Desktop 7.0 next week on December 1st. In this video, I share some of the new features in both versions, and I’ll talk a little about pricing and the Black Friday / Cyber Monday sale.

  • WP Tavern Interview on Building Websites With Pinegrow’s New WordPress Plugin

    Last week I had the pleasure of being interviewed by Nathan Wrigley for the WP Tavern podcast. We talked about the upcoming Pinegrow WordPress plugin and how it lets my agency build custom, native WordPress blocks and themes for my clients. #51 – Adam Lowe on Building Websites With Pinegrow’s New WordPress Plugin

  • Peak Performance Digital: Agency Introduction (November 2022 Update)

    This video presents information about my company, Peak Performance Digital. I cover the basics of who we are, what we do, how we operate, and what you can expect when working with us. This video is for companies who might want to hire us to work for them, or agencies who are looking for a white label partner.

  • WordPress Menu Accessibility – Part 2: Detailed Requirements and Final Test

    In this video, I do a deep dive into the requirements to make an accessible Website Navigation Menu. I test the newly released Twenty Twenty-Three theme in WordPress 6.1 and show you the specific test criteria as I go along.