jQuery Feedback Form Send Email

Last Updated on March 7, 2024 by Roshan Parihar

jQuery feedback form allows customers to give opinions and submit the form without page refresh. You can also use the PHP library to collect customer feedback data via emails to your email address.

Page refresh on form submission is sometimes can be irritating for your customers who want to submit a form. The Ajax feedback form can be the more efficient and useful way to give confirmations to customers without page refresh.

jQuery Ajax Feedback Form Send Email

Collecting customers’ feedback without page refresh can give you better results. Ajax request executes the PHP code to send emails instantly. Customers will get a response in the blink of an eye with no reloading of the page.

If you want to give instant responses to your customers when they fill out the form, you can start using the jQuery Ajax feedback form on your website.

So, let’s get started.

How to Create jQuery Ajax Feedback Form to Send Email with PHP (Step-by-step)

Here is the step-by-step process on how to create a jQuery Ajax feedback form with PHP:-

Step 1: Create jQuery Ajax Feedback Form Design

To make your jQuery Ajax code work for your feedback form, you have to add the latest jQuery library whose CDN URL is given below. It also contains the CDN URL of the font awesome icon to display the rotated icon until customers get the result.

You have to add the below URL to the <head> section of your web page.

Now, let’s create the feedback form structure with the essential form fields to collect customers’ opinions. The form fields are as given below:-

  • Name
  • Email Address, and
  • Phone number
  • Feedback type
  • Description of your feedback

These fields are enough for the feedback form to collect customers’ opinions. We are going to create the feedback form design as shown in the image below.

Form design

We can add the required attribute to each form field to make them compulsory for the customers to fill. Without filling in all the required fields, customers are not allowed to submit the form.

The main structure of the feedback form is given below.

The above feedback form code also contains the loader icon to display after form submission until customers get results. However, initially, it is in a hidden state using the display:none; property of CSS.

Add CSS for Look & Feel

To make the above feedback form beautiful, you have to add some CSS code as given below.

The above CSS code also contains CSS for the loader icon to display in the middle position with a grey background. The loader icon also does not allow customers to do any other tasks until they get the result.

Step 2: Add Ajax Script to Submit Form Without Page Refresh

The jQuery code submits the form and gives results of customers’ entered data without page refresh. It sends the form data to the PHP file that contains PHP code to operate the form data. You will get the PHP code in the next step.

However, it requires a few seconds to execute the PHP code to give confirmation of the email sent. After emails are sent to the recipient, the customer will get a success message that the form data is sent to the recipient.

During the execution time of the PHP code, it displays the loader icon to the customer that the form is working in the backend.

loader icon display

It also does not allow customers to click the form again until receive the success message. I am using the show() function and hide() function to show/hide the loader icon after form submission.

Step 3: PHP Code to Email Feedback Form Data with Validation

Finally, you need to add the PHP code in a separate file with the name ‘feedback-form-send-email.php’. The below code first collects the form data using a PHP global variable $_POST. After that, it validates the email address using the preg_match() function.

It does not require to validate whether the fields are filled with data or left blank. This is because we are already using the required attribute with each form field. It is the HTML built-in attribute that makes sure that form fields should not be left blank. It will not allow customers to submit the form without filling in each field.

Download PHPMailer Library

To collect form data via email to your email address, you can use SMTP in PHP. For this, you have to first download the PHPMailer library with the button given below. After download, extract the PHPMailer library to the location where your main PHP file is located.

Download PHPMailer

Use PHP Code to Send Form Data Via Email

After that, use the below code just after the above PHP code. If every customer’s entered form data is correct and validated, it executes the below code to send the form data via email.

Note: don’t forget to change the $sender value with your Gmail address, $gmailapppassword value with the Gmail app password, and the recipient email address with your email address and name.

The below code lines are well-commented enough to help you easily understand each line of code. So, see the code to learn the use of them.

After submitting the feedback form, you will get the success message as shown in the image below.

Success message

You will get the email format to your email address as shown in the image below.

Email Format jQuery Ajax Feedback Form Send Email

If you have any queries regarding this tutorial, please comment below. I will reply with solutions.

You May Also Like to Read

Leave a comment

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.