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

  • Using Sass with Pinegrow

    I recently had someone ask whether Pinegrow supports Sass, so I thought I’d do a quick video demonstration. In this demo, I show you how we activate our Sass stylesheet and how we can use a simple Sass variable to change the color of a heading.

  • Pinegrow Countdown: Day 1 – Pinegrow Plays Nice with Others

    A lot of products in the WordPress space have grown in popularity, primarily because of their open and flexible ecosystem that allows 3rd party developers to create add-ons, extensions, and libraries. Pinegrow also has a great plugin API. But I’m going to show you in this video, that in most cases, you don’t even need it.

  • Pinegrow Countdown: Day 2 – Pinegrow is STILL not a Page Builder

    In this video, I’m going to show you why Pinegrow is different from Page Builders so you don’t fall into the trap of trying to use it like something it’s not, only to get frustrated and give up.

  • Pinegrow Countdown: Day 3 – Frameworks in Pinegrow

    Pinegrow has built some fantastic helpers for popular frameworks. In fact, when you start a new project in either Pinegrow Desktop or the Pinegrow WordPress plugin, you’ll be asked which framework you want to choose. If you are already used to using one of the built-in frameworks, the choice will be easy. If not, this little video will hopefully help you understand what the frameworks do and how you should answer those important initial questions.

  • Pinegrow Countdown: Day 4 – WordPress Blocks and Themes

    When you start a new WordPress project in Pinegrow, one of the first things you’ll need to decide is whether you will create a Block Plugin or a complete theme. In this video, I’ll help you understand their differences so you can start on the right foot.