Blog

How to create an AJAX contact form without any plugin

Are you new to web development? Hi5! Me too. I've just learned an amazing trick today which is, making a standard contact form outstanding! You can always proceed with regular HTML, PHP but if you want to make it even nicer, you gotta use AJAX to submit the data to PHP without having to reload the page. Let me share it with you.

Before I start, lemme give you a brief idea of the procedure. We will use AJAX to submit form data and jQuery to simplify the JavaScript code. A PHP mail script will be there to send our form data via email.

Step 1 - Creating an HTML form

You need an HTML form to collect data from the user. Go ahead and do it. It's better to name all the functions and variables after me. Let's give your <form> element class name contact__form , set method attribute to post, and remember the name of our PHP script, it's mail.php so, set the action attribute to mail.php

You've created a standard form which will collect name, email, phone, subject, and message. You can give your HTML form the design you like using Bootstrap, that’s up to you. Here we’ve done the basic. You may notice that all the fields have required attribute which will prevent the form from submitting if any of those fields is left empty. Please bear in mind, the following code snippet which you see above (as well) is only to show the success or error message.

Now we need to use jQuery to submit these data. So, you gotta call jquery-3.2.1.min.js to the bottom or to the top (anywhere you want) of your HTML form file. Oh, forgot to tell you, all the JavaScript functionalities will take place in main.js

In order to make main.js file (this main.js you will see below) work, you have to call it after you call jQuery.

That's all the HTML we need today. You can save this file as index.html

Step 2 - Using AJAX to submit the form

Create a JavaScript file and name it main.js . This file will take care of all the work that is needed to submit our form using AJAX. Following is the code of main.js. Don't worry, you'll find my complete project at the end of this article.

Let me explain the above code. At the very beginning of the code, we declared few variables to store the data we get from our HTML form.

The submit function then saves the data into form_data variable. Later with $.ajax we send our data to mail.php . Now comes the testing part, if our data passess smoothly then the done function will execute and will show a success message. But, if it doesn't, then the fail function will run and will show an error message.

Step 3 - Let PHP do its work and send the mail

What do we do with the data that we got from the user? We store it somewhere right? But, we can send an email instead. To do so, we write a PHP mail script. Copy the following code and save it with the name mail.php

Note, you need to replace This email address is being protected from spambots. You need JavaScript enabled to view it. with your desired email address. You can download my project files from the download button below.

I hope you have learned this trick. If you have any questions or did not understand any part then reach out to us via comment section. We are always here for you. Thank you for benig with ThemeHunt. Happy Coding :)