Review: Hello Form – PHP Working Ajax Contact Form with Validation
Rating: 4.97/5
Hello Form is a powerful and highly customizable PHP Working Ajax Contact Form with validation, designed to provide a seamless and efficient way to collect and manage user input on your website. With its extensive range of features and options, this form is perfect for businesses, organizations, and individuals alike.
Key Features:
- Full responsive design, ensuring a smooth user experience across all devices
- 4 pre-built themes (Default, Classic, Modern, and Dark) to choose from
- 130+ pre-built forms included, making it easy to get started
- Both Bootstrap and non-Bootstrap demo forms included
- No database required, making it easy to set up and integrate
- Required field jQuery validation to ensure data accuracy
- Anti-spam features, including Google reCaptcha, hCaptcha, and simple Math Captcha
- Support for file attachments and file size restrictions
- Customizable and easy to integrate into your website
- Well-documented and with dedicated support
What I Like:
- The form is incredibly easy to set up and customize, even for those with limited coding experience
- The range of pre-built forms and themes is impressive, making it easy to find a style that fits your website’s aesthetic
- The form is highly responsive, ensuring a smooth user experience across all devices
- The anti-spam features are effective and help to prevent unwanted submissions
What I Wish Was Different:
- While the form is easy to set up, it may require some technical expertise to fully customize and integrate into your website
- Some users may find the number of options and settings overwhelming, especially if they are new to form design
Conclusion:
Hello Form is an excellent choice for anyone looking to create a professional and effective contact form for their website. With its range of features, customizable design options, and ease of use, it’s no wonder this form has earned a 4.97 rating. Whether you’re a business, organization, or individual, Hello Form is sure to meet your needs and help you connect with your audience.
User Reviews
Be the first to review “Hello Form – PHP Working Ajax Contact Form with Validation”
Introduction
A contact form is a essential part of any website that allows visitors to get in touch with the website owner or administrator. In this tutorial, we will be building a PHP working Ajax contact form with validation using a step-by-step approach. We will be using PHP and HTML to create the form, and JavaScript to handle the form submission and validation using Ajax.
This form will have the following features:
- A text input field for the user's name
- A text input field for the user's email
- A text area for the user to write their message
- A submit button to send the form data
- Validation to check if the form fields are empty or not
- Ajax functionality to send the form data to the server without refreshing the page
- A success message after the form is submitted
Step 1: Create the HTML Form
Create a new HTML file called contact.html and add the following code:
<!DOCTYPE html>
<html>
<head>
<title>Hello Form - PHP Working Ajax Contact Form with Validation</title>
<style>
body {
font-family: Arial, sans-serif;
}
.error {
color: red;
}
</style>
</head>
<body>
<h1>Hello Form</h1>
<form id="contactForm">
<label for="name">Name:</label>
<input type="text" id="name" name="name"><br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email"><br><br>
<label for="message">Message:</label>
<textarea id="message" name="message"></textarea><br><br>
<input type="submit" value="Send Message">
</form>
<div id="successMessage"></div>
<script src="script.js"></script>
</body>
</html>This code creates a simple HTML form with text input fields for the user's name and email, a text area for the user to write their message, and a submit button to send the form data. We also added a <div> element with an ID of successMessage to display a success message after the form is submitted.
Step 2: Create the JavaScript File
Create a new JavaScript file called script.js and add the following code:
const form = document.getElementById('contactForm');
const nameInput = document.getElementById('name');
const emailInput = document.getElementById('email');
const messageInput = document.getElementById('message');
const successMessage = document.getElementById('successMessage');
form.addEventListener('submit', (e) => {
e.preventDefault();
validaForm();
});
function validaForm() {
if (nameInput.value === '') {
nameInput.classList.add('error');
} else {
nameInput.classList.remove('error');
}
if (emailInput.value === '') {
emailInput.classList.add('error');
} else {
emailInput.classList.remove('error');
}
if (messageInput.value === '') {
messageInput.classList.add('error');
} else {
messageInput.classList.remove('error');
}
if (nameInput.classList.contains('error') || emailInput.classList.contains('error') || messageInput.classList.contains('error')) {
return;
}
sendForm();
}
function sendForm() {
const formData = new FormData(form);
fetch('process.php', {
method: 'POST',
body: formData,
})
.then((response) => response.json())
.then((data) => {
if (data.success) {
successMessage.innerHTML = 'Message sent successfully!';
successMessage.style.display = 'block';
} else {
successMessage.innerHTML = 'Error sending message. Please try again.';
successMessage.style.display = 'block';
}
})
.catch((error) => {
successMessage.innerHTML = 'Error sending message. Please try again.';
successMessage.style.display = 'block';
});
}This code gets references to the form elements using document.getElementById and adds an event listener to the form's submit event. The event listener calls the validaForm function when the form is submitted.
The validaForm function checks if the form fields are empty and adds an error class to the input fields if they are. If the form fields are not empty, it removes the error class.
If the form fields are valid, it calls the sendForm function to send the form data to the server using Ajax.
The sendForm function creates a new FormData object from the form and sends it to the process.php file using the fetch API. It then parses the response as JSON and displays a success message if the form is sent successfully. If there is an error sending the form, it displays an error message.
Step 3: Create the PHP File
Create a new PHP file called process.php and add the following code:
<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {
$name = $_POST["name"];
$email = $_POST["email"];
$message = $_POST["message"];
if (filter_var($email, FILTER_VALIDATE_EMAIL) === FALSE) {
die("Invalid email address");
}
// Send email using PHPMailer or other email library
$headers = 'From: '. $email. "rn";
$headers.= 'Reply-To: '. $email. "rn";
mail('your_email@example.com', 'Hello Form Submission', $message, $headers);
echo json_encode(array('success' => true));
} else {
echo json_encode(array('success' => false));
}
?>This code checks if the request method is POST and if it is, it gets the form data from the $_POST superglobal.
It then checks if the email address is valid using the filter_var function and if it's not, it dies with an error message.
Next, it sends an email using the mail function or other email library. In this example, we're sending the email to your_email@example.com.
Finally, it echoes a JSON response with a success message if the email is sent successfully, or an error message if there's an error.
Conclusion
That's it! You now have a PHP working Ajax contact form with validation using HTML, JavaScript, and PHP. This form will send the form data to the server using Ajax and will display a success message after the form is submitted.
Make sure to replace your_email@example.com with your actual email address in the process.php file.
I hope this tutorial helps you create a contact form for your website. Let me know if you have any questions or need further assistance!
helloform_settings.php
$helloform_settings = array(
'form_name' => 'Contact Form', // The name of the form
'contact_email' => 'example@example.com', // Email address where the form should send the messages
'subject' => 'New Contact Form Enquiry', // The subject of the email
'message_subject_prefix' => 'Re: ', // The prefix added to the subject of the email
'success_message' => 'Your message has been sent successfully!', // The message displayed when the form is sent successfully
'error_message' => 'Error sending your message. Please try again!', // The message displayed when there is an error sending the form
'required_fields' => array( // The fields that are required
'name' => 'Name',
'email' => 'Email',
'message' => 'Message'
),
'validation_rules' => array( // The rules for the form validation
'name' => array(
'required' => true,
'min_length' => 2,
'max_length' => 50
),
'email' => array(
'required' => true,
'valid_email' => true
),
'message' => array(
'required' => true,
'min_length' => 10,
'max_length' => 5000
)
),
'ajax_url' => 'helloform_ajax.php', // The URL of the script that handles the Ajax request
'form_id' => 'helloform', // The ID of the form element
'scroll_to_top' => false, // Whether to scroll to the top of the page when the form is sent successfully
);
Here are the features of the Hello Form - PHP Working Ajax Contact Form with Validation:
- 4 Themes (Default, Classic, Modern & Dark): The form comes with four different themes to choose from, giving you flexibility in terms of design.
- 130+ Pre-built Forms included: The form comes with over 130 pre-built forms that you can use as is or customize to fit your needs.
- Both Bootstrap and Non-Bootstrap Demo Forms included: The form comes with demo forms that are compatible with both Bootstrap and non-Bootstrap versions.
- No Database Required: The form does not require a database to function, making it easy to set up and use.
- Aesthetics Unique Design: The form has a unique and attractive design that is sure to impress your visitors.
- Attractive UX Design: The form has an attractive user experience design that makes it easy for visitors to fill out and submit.
- Repeat Submission Prevention: The form has a feature that prevents repeat submissions, ensuring that only one submission is processed at a time.
- Font Awesome 6 icons: The form uses Font Awesome 6 icons, which are modern and stylish.
- AJAX enabled (No page reloads, all requests through AJAX): The form uses AJAX to process requests, which means that page reloads are minimized, making the form more user-friendly.
- Required field jQuery validation: The form has jQuery validation that checks for required fields, ensuring that visitors fill out all required fields before submitting.
- Popup Alert for Validation errors and Success Submit: The form has a popup alert that displays validation errors and success submit messages, making it easy for visitors to know what's happening.
- Extremely Customizable: You can customize any included form to fit your demand: The form is highly customizable, allowing you to modify any of the included forms to fit your specific needs.
- Can send email with SMTP (settings included): The form can send emails using SMTP, which is a secure and reliable way to send emails.
- CC and BCC settings included in Documentation: The form has CC and BCC settings that can be used to send emails to multiple recipients.
- 100% Responsive & Mobile-Friendly Layout: The form is fully responsive and mobile-friendly, making it easy to use on any device.
- Google Auto Location Search for Address Field options available and included in some demo Forms (Google API will need): The form has an option to use Google Auto Location Search for address fields, which can be enabled or disabled.
- Mailchimp Subscription Integration form included: The form has a Mailchimp subscription integration form that allows visitors to subscribe to your newsletter.
- Tag Inputs for example Job Skills: The form has tag inputs that can be used to collect information such as job skills.
- Easy integration into your site: The form is easy to integrate into your website, making it easy to get started.
- Get the IP of the sender inside the email body: The form can capture the IP address of the sender and include it in the email body.
- File attachment feature included: The form has a file attachment feature that allows visitors to attach files to their submissions.
- File size restriction included: The form has a file size restriction that can be set to limit the size of attached files.
- Clean and well commented Code: The form has clean and well-commented code that makes it easy to understand and modify.
- Anti Spam (Google recaptcha, hCaptcha & simple Math Captcha): The form has anti-spam features such as Google reCaptcha, hCaptcha, and simple Math Captcha to prevent spam submissions.
- HTML email Template included for all forms: The form has an HTML email template that can be used to send emails to visitors.
- Send Confirmation email to Sender Features included: The form has a feature that allows you to send a confirmation email to the sender after submission.
- Security vulnerabilities checked (Sanitized Data): The form has been checked for security vulnerabilities and has sanitized data to prevent attacks.
- Date Picker Calendar with 82 Languages file included: The form has a date picker calendar with 82 languages file that can be used to select dates.
- Browser Compatibility: The form is compatible with all major browsers, making it easy to use on any device.
- Well Documentation (proper help instructions for setup): The form has well-documented instructions for setup and use, making it easy to get started.
- Dedicated Support: The form has dedicated support, which means that you can get help and assistance if you need it.
These are the features of the Hello Form - PHP Working Ajax Contact Form with Validation.
Related Products
.jpg?w=300&resize=300,300&ssl=1)
$16.00
There are no reviews yet.