30 Apr
2017

wordpress icon grafxflow

WordPress Custom Ajax Contact Form

Most people are aware of the plugins for WordPress that help you create forms – Contact Form 7 and Ninja Forms etc. But what about building your own custom ajax contact form using the admin-ajax WordPress functions. Well here is a starter tutorial which I have created where I am guessing you already know the basics of how to create custom themes and pages in WordPress.

For this example I will be using the following extras (Note: none are WordPress plugins):

  • Bootstrap 3 for the form layout Download
  • BootstrapValidator for the form validation + this also includes jQuery 1.11.1 Download

NOTE: I have tried to add notes to the code examples as a more detailed breakdown. I have also added the CSS inside the page, but best practise would be to add them to the themes style.css file.

 Step 1:

Create the custom WordPress theme contact page

So first let’s create a custom page template for the contact page. Given the below details at the start of the file it will allow us to create a contact page and select this as a custom template. As for the form I am creating the following items all of which will be required – Fullname, Email, Subject and Message.

You will also notice 2 extra elements – a hidden field called ‘action’ which tells WordPress what to do with the form in its functions file. Plus a container with the success message which will appear once it has validated, therefore I have added some CSS which hides it by default.

File called ‘contact-page.php‘ and saved in your themes folder.

 Step 2:

Add the forms javascript validation script

Now lets create the javascript file using ‘bootstrapValidator‘ that will validate the form. And once successful will post it via ajax to the WordPress ‘admin-ajax.php‘ file.

We will also include this javascript file on the contact page with the use of the WordPress ‘functions‘ file.

File called ‘ajax-contactus-script.js‘ and saved in your themes folder.

 Step 3:

Now lets process our custom contact form with some functions in the WordPress ‘functions.php‘ file. This will use ajax via the admin-ajax.php.

This file should already exists and is called ‘functions.php‘ and saved in your themes folder. What it contains are the functions which will process the form and send an email to the relevant email account. Also I have made a separate html email template which make them easier to design.

IMPORTANT: Note the usage of the ‘yourwebsite_contactform’ hidden ‘action’ value used in the form and where it is used in the functions below. These must match exactly.

 Step 4:

Create the email template to send your contact form details

And now the last part to create a html layout which will embed the contact form details and send it to your email account. We simply output the form values in a table form.

File called ‘contact-form.php‘ and saved inside a folder called ‘email-template‘ in your themes folder.

I hope you have found this helpful and a nice starting point.

avatar

Written by me@grafxflow

I am a freelance designer and developer of all things web - from CSS3 bootstrap responsive layouts through to WordPress and MVC CodeIgniter. I blog and tweet to hopefully share a little bit of knowledge that can help others around the web. Thanks for stopping by!

Follow grafxflow on twitter Follow grafxflow on github Follow grafxflow on google+
Posted in: <WordPress>

No Comments on "WordPress Custom Ajax Contact Form"

Leave a Reply

Your email address will not be published. Required fields are marked *

smart search