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?

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.