Piotnet Forms Booking Form Tutorial with PayPal Payment Button [Videos]

In this tutorial, we will learn to create a booking form complete with a PayPal payment button, using the Piotnet plugin for WordPress.

One question I get asked a lot is how did I create the custom booking or consultation form for my website. You can view my consultation booking form here.

Let me first say that this form is not complex at all, it’s very easy to create. So even if you are new to the Piotnet Forms plugin, you can do this with the help of the instructions in this tutorial.

Important: Please take your time with this, and if you get stuck at any time you can request support from me regarding implementation (this feature is for members only). If you have a technical problem, please refer to the Piotnet website documentation.

Creating your form

Let’s get started.

Navigate to Piotnet Forms and click on Add New.

Give your form a name, such as Booking or ‘Consultation Form’.

Next, select the Create Blank Form option.

Once the form builder page has loaded, you should see the Pionet Forms visual editor on the left-hand side of the pane.

The consultation form (Example)

OK, so for this tutorial, we’re going to create our booking form from complete scratch. Here is an example of the form we’re going to create –

Note: If you’ve never used Piotnet Forms before, I recommend checking out our simple contact form tutorial here for a tour of all the features of Piotnet Forms.

You will also need to have a PayPal account to enable the payment button for your consultation booking form.

Styling: When it comes to adding styles, I recommend styling the first form field and label, and then you can duplicate it later on with the same styles. This will save you a lot of time not having to style each form element from scratch.

Also, if you’re using Bricks Builder to embed the form shortcode into your website pages, you can add further styles to the background container or block using the options in Bricks.

Adding the form fields

So what fields do I have in my form? Let’s take a look –

1. Name (text)
2. Email address (email)
3. Input description of the project (text area)
4. Preferred date (date picker)
5. Preferred time (time picker)
6. Privacy and terms (acceptance)
7. Payment button (button)

Videos: This Piotnet Forms booking form tutorial contains short video clips to help you along.

Begin by dragging a new field element into the widgets area. If you don’t see the widgets, you need to click on the + icon near the Pio logo. See the short video clip below.

Next, we will look at creating and customizing each individual field in more detail.