Call   0208 3131682   Mon-Fri 9am-6pm

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

booking form using the ninja forms plugin

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.

Would you like some help with your forms, instead of reading a technical article (if so submit the the short form below) ?

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 !

 

 

 

 

 

 

17 Comments

  • Alan fallow says:

    Hi
    Is it possible to sum up the days in date picker then multiply the sum by a price to get a price for say a room for a couple of days.
    Thanks for any help.

    • louie171 says:

      hi Alan,

      I’m not sure offhand, Ninja forms is great for simple-ish forms. But for things abit more customised like what you want, I would usually develop a custom form from scratch.

  • james says:

    Hi Alan,
    Yes it is possible ,

    You need a textbox called Number of Guests (or similar)
    you will need another textbox called Number of Days
    Mark the two fields as required.

    Then you need to have a Calculation Template Fields.

    Set Calculation Method to use as equation and the Multiply the two above fields e.g. (field_36 * field_34)*40
    40 being the rate per night
    see example of Restaurant booking, golf course booking and B&B booking forms at
    http://www.irishwebdesign.org/custom-reservation-form/

    This will work or bring you very close to it.

  • donelle says:

    is this plugin support a notification message after submitting the form?

    • Daniel says:

      Yes it does, however I’m not getting my admin notifications but I suspect that’s something to do with how the email is configured and not the form.

  • Lindsay says:

    Is it possible to disable options on the datepicker once booked? I keep getting multiple people booking the same time spot.

    • louie171 says:

      hi Lindsay,

      you can Lindsay, but it would require writing some code (i.e. you’d need to check in the database if a timeslot had been used already).

      • Vince says:

        Sorry but do you know how to do this please ? Can you show how todo because I need it and I don’t know how to check in the database if a timeslot had been used already. Please please I need some help just some codes.

  • Nahla Hassan says:

    Could I change the year range in the datepicker?? like I want to enable booking till 2018.
    Thank you

    • louie171 says:

      hi Nahla

      you can block out dates (and years I presume). I did something similar ie blocked out dates and saturdays and sundays for a client. Here’s what I did it will give you start on what you need todo. I didn’t do this on a ninja form, just a booking form I hand coded. But it should be a similar process (I think).

      $(document).ready(function(){

      $("#datepicker").datepicker({
      dateFormat: "dd-mm-yy",
      beforeShowDay: nonWorkingDates,
      firstDay: 1
      });

      function nonWorkingDates(date){
      var day = date.getDay(), Sunday = 0, Monday = 1, Tuesday = 2, Wednesday = 3, Thursday = 4, Friday = 5, Saturday = 6;
      // add closed dates here var closedDates = [[7, 29, 2009], [8, 25, 2010], [6, 25, 2015]];

      var closedDates = [ [7, 29, 2015], [7, 30, 2015],[7, 31, 2015],[8, 1, 2015],[8, 2, 2015],[8, 3, 2015],[8, 4, 2015],[8, 5, 2015],
      [12,22, 2015], [12,23, 2015], [12,24, 2015], [12,25, 2015], [12,28, 2015], [12,29, 2015], [12,30, 2015], [12,31, 2015], [1,1, 2016] ];
      var closedDays = [[Sunday], [Saturday]]; // add days here
      for (var i = 0; i < closedDays.length; i++) { if (day == closedDays[i][0]) { return [false]; }}for (i = 0; i < closedDates.length; i++) { if (date.getMonth() == closedDates[i][0] - 1 && date.getDate() == closedDates[i][1] && date.getFullYear() == closedDates[i][2]) { return [false]; } }return [true]; }});

  • florent says:

    hello i would like to know if it is possible to connect my ninja form calendar to my google agenda in order to see the avaliable periodes.

  • Trevor says:

    Im getting this when inserting the form into my page:
    Notice: Ninja Forms shortcode used without specifying a form.

    help please?

    • robert says:

      Notice: Ninja Forms shortcode used without specifying a form. me too! im just pasting the short code into a text box, saving it and when i preview the page im getting the same error.
      [ninja_form id=5]
      Notice: Ninja Forms shortcode used without specifying a form.

  • Adam says:

    Is it possible to have a list of available times for a certain day, and those times become unavailable once someone chooses it in the form?

Leave a Reply