Tag

Forms Archives - Custom Web Application Developers in Bromley, London

booking form using the ninja forms plugin

How to add a simple Online Booking Form to WordPress using Ninja Forms

By | Ninja Forms, online forms, Web Design, Wordpress | 17 Comments

In this post I’m going to explain how to add a Simple Online Booking Form to WordPress.

Having a booking form on your website can be a great lead generator and allows you to take orders for your services while you sleep! With tools like the plugins like Ninja Forms or Gravity Forms you don’t even need to know how to use PHP or HTML. In this post I’ll explain how to create an online form using Ninja Forms.

Update Jan 2016: I notice alot of people want to know how to add Datepicker field to a form, if thats you check out image below for how to.

how to add a datepicker field to ninja form

how to add a datepicker field to ninja form

How to easily add online forms to your website with no programming

Firstly goto the WordPress site and download the plugin. Then unzip it and pop it into the wp-content/plugins directory, and activate it in the admin interface as you would for any WordPress plugin. You will notice a new link in the left admin panel called ‘Forms’.

Configuring the Forms emails

To create our booking form click on ‘Add New’ , and then we need to configure the emails that are sent after the booking is sent. There are 2 emails to be sent:

1. one to the user who submits the form to thank them for booking online

 

using ninja forms for simple forms

 

2. the second email is sent to you/me the admin of the website to notify us of an online booking

For this example (see screenshots), I will setup the emails for an imaginary personal trainer. Just copy what I’ve done but inserting your own details instead of what I have in the screenshot.

 

ninjaforms1

Setting up the Form

In this example we will setup 5 form fields: name, email, date, time, details (e.g. I want to use Boxercise to get fit). We click on the Field Settings to bring us on the form page.

This screenshot shows a summary of what the form will look like in the admin interface.

booking form in wordpress

 

1. click the ‘Textbox’ button, this opens a section on the right , rename the Label to ‘Name’ and click save field settings.

2. next click email button on left and save field settings.

3. click ‘Textbox’ button and change the label to date , also click the checkbox ‘datepicker’ and click save field settings.

4. click the ‘Textbox’ button, this opens a section on the right , rename the Label to ‘Time’ and click save field settings.

5. click the ‘Textarea’ button, this opens a section on the right , rename the Label to ‘Details’ and click save field settings.

6. click ‘submit’ button to add a button to send our form ( I have renamed this to ‘Send’)

7. Finally click form prefix to see a sneak peak at what our form will look like.

Adding the Form to a page

There are a few different ways todo this, I’ve going to explain how to add it by using a WordPress shortcode.

1. Click on ‘All Forms’ and copy the shortcode from the relevant form

2. create a new WordPress page (or use an existing one)

3. paste the shortcode into the page and save it.

4. Then visit the page and fill out the form and submit it, to check that it sends your admin email address the details about the booking. An email is also sent to the user who filled out the form (thanking them for booking online).

 

So I hope you’ve found this tutorial on ninja forms useful, in show you how to add an Online Booking Form to WordPress. Now go forth and create forms !