Call   0208 3131682   Mon-Fri 9am-6pm

online forms

How to add a form to a shortcode in WordPress (using PHP and Ajax)

By | Ajax, HTML, Javascript, online forms, Wordpress | No Comments

Recently I needed to develop a Shortcode that would display a form, this blog post details what I did. I used Ajax ( which seems the best way to add forms to shortcodes, but I’d welcome any input from other developers on your approach).

So without further ado lets get on with adding a form to a shortcode in WordPress.

We need javascript to handle submission of the form via ajax (this presumes you have jquery available), and handle the response from the server. green_form is the form id.


Next we need the php to handle everything else, you could put this in functions.php (or include from functions.php) or put it into a plugin. The shortcode to include the form in our page or post is [shortcode_with_form] 

The code handles:

  • the output of the shortcode
  • the server side processing of the form (I’ve just created a stub in this example ( function do_something_serverside )
  • and the including of javascript file required ( if you’d like to know abit depth on ajax forms in WordPress see my post on that )

Hope you find this interesting if you’re looking to add a form to a shortcode.




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 | 18 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.

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.



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 !