Student registration form in html with javascript validation

student registration form in html with javascript validation is the exercise that many people have experienced. Most students studying html can do this. However, many people still ask me about this so I decide to share my own way.

student registration form often includes basic information fields. They are easily created by html. However, you should use css to build the layout for a more attractive form. You also can check the input by using javascript, which is to guarantee that the input is imported correctly to avoid the system imprecisely processing. For instance, a human name cannot be a number. Email address must include @ and the corresponding domain is @gmail.com, etc. That we do this step well will facilitate the next data processing stage.

Preparation

You should prepare editor software. You could use phpdesigner or notepad++ or other editors that have similar functions. However, I get used to applying phpdesigner. You should have a default browser or install more browsers such as Google Chrome, Firefox.

Implementation

In order to complete the article student registration form in html with javascript validation, we use the editor and create an index.html file as below

<!DOCTYPE html>
<html lang="en"><head>
<meta charset="utf-8">
<title>JavaScript Form Validation using a sample registration form</title>
<meta name="keywords" content="example, JavaScript Form Validation, Sample registration form" />
<meta name="description" content="This document is an example of JavaScript Form Validation using a sample registration form. " />
<link rel='stylesheet' href="style.css" type='text/css' />
<script src="js.js"></script>
</head>
<body onload="document.registration.userid.focus();">
<h1>Registration Form</h1>
<form name='registration' onSubmit="return formValidation();">
<ul>
<li><label for="userid">User id:</label></li>
<li><input type="text" name="userid" size="12" /></li>
<li><label for="passid">Password:</label></li>
<li><input type="password" name="passid" size="12" /></li>
<li><label for="username">Name:</label></li>
<li><input type="text" name="username" size="50" /></li>
<li><label for="address">Address:</label></li>
<li><input type="text" name="address" size="50" /></li>
<li><label for="email">Email:</label></li>
<li><input type="text" name="email" size="50" /></li>
<li><label id="gender">Sex:</label></li>
<li><input type="radio" name="msex" value="Male" /><span>Male</span></li>
<li><input type="radio" name="fsex" value="Female" /><span>Female</span></li>
<li><label for="code">student identification number:</label></li>
<li><input type="text" name="code" size="50" /></li>
<li><label for="code">Class:</label></li>
<li><input type="text" name="class" size="50" /></li>
<li><input type="submit" name="submit" value="Submit" /></li>
</ul>
</form>
</body>
</html>

Create file style.css in the same folder with file index.html with the following content.

h1 {
margin-left: 70px;
}
form li {
list-style: none;
margin-bottom: 5px;
}
 
formul li label{
float: left;
clear: left;
width: 250px;
text-align: right;
margin-right: 10px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:14px;
}
 
formul li input, select, span {
float: left;
margin-bottom: 10px;
}
 
formtextarea {
float: left;
width: 350px;
height: 150px;
}
 
[type="submit"] {
clear: left;
margin: 20px 0 0 230px;
font-size:18px
}
 
p {
margin-left: 70px;
font-weight: bold;
}

Next, create file js,js as the content shown hereunder


functionformValidation()
{
varuid = document.registration.userid;
varpassid = document.registration.passid;
varuname = document.registration.username;
varuadd = document.registration.address;
varucountry = document.registration.country;
varuzip = document.registration.zip;
varuemail = document.registration.email;
varumsex = document.registration.msex;
varufsex = document.registration.fsex; if(userid_validation(uid,5,16))
{
if(passid_validation(passid,7,16))
{
if(allLetter(uname))
{
if(alphanumeric(uadd))
{
if(countryselect(ucountry))
{
if(allnumeric(uzip))
{
if(ValidateEmail(uemail))
{
if(validsex(umsex,ufsex))
{
}
}
}
}
}
}
}
}
return false;
}
 
functionuserid_validation(uid,mx,my)
{
varuid_len = uid.value.length;
if (uid_len == 0 || uid_len>= my || uid_len< mx)
{
alert("User Id should not be empty / length be between "+mx+" to "+my);
uid.focus();
return false;
}
return true;
}
 
functionpassid_validation(passid,mx,my)
{
varpassid_len = passid.value.length;
if (passid_len == 0 ||passid_len>= my || passid_len< mx)
{
alert("Password should not be empty / length be between "+mx+" to "+my);
passid.focus();
return false;
}
return true;
}
functionallLetter(uname)
{
var letters = /^[A-Za-z]+$/;
if(uname.value.match(letters))
{
return true;
}
else
{
alert('Username must have alphabet characters only');
uname.focus();
return false;
}
}
function alphanumeric(uadd)
{
var letters = /^[0-9a-zA-Z]+$/;
if(uadd.value.match(letters))
{
return true;
}
else
{
alert('User address must have alphanumeric characters only');
uadd.focus();
return false;
}
}
functionValidateEmail(uemail)
{
varmailformat = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
if(uemail.value.match(mailformat))
{
return true;
}
else
{
alert("You have entered an invalid email address!");
uemail.focus();
return false;
}
}
functionvalidsex(umsex,ufsex)
{
x=0;
 
if(umsex.checked)
{
x++;
} if(ufsex.checked)
{
x++;
}
if(x==0)
{
alert('Select Male/Female');
umsex.focus();
return false;
}
else
{
alert('Form Successfully Submitted');
window.location.reload()
return true;}
}

Above is student registration form in html with javascript validation code.  You could download it to edit, add, or remove fields appropriately.

Sell email adress and maketing online

Many people often search for the key words “ sell email adress ” but the right ones should be “sell email address”. I guess that it is due to the language used in their computer. Or it may result from too quickly typing. However, I can understand your purpose is to buy a list of email to use in marketing. I will share my perspective in this article. I hope that there will be suggestions for you.

sell email adress

Lots of well-known companies steal users’ information, collect their hobbies, check their location, and follow their behaviors. Then they sell the information to advertisers. The information is so important. You can buy the information unless you have a strong financial ability or good relation. If you just search on Google with “ sell email adress ” hay “sell email address”, the quality of these lists is not guaranteed. Normally, the fact is that a tool scans to retrieve emails in some websites. The information may not cover the potential customers you want to target. For example, you do not want to advertise diapers for people in the age from 15 to 18.

If you are working in marketing, you do not need to buy these emails because you can buy other beneficial things. For instance, I find Abandoned Cart Reminder module quite interesting. When customers add products to cart but forget to checkout, they will receive notifications that they forget their favorite products. If your customers are on the website, they will receive notification through Popup, Sticky Bar, Browser Notification or Browser Tab Notification. If your customers are offline, they will receive a reminder email with a voucher code from the system to persuade them to buy. In this case, they certainly are your target customers who pay interests to your products. Therefore, the conversion rate is very high and you do not lose potential customers. You could get access to this link to read more about the tool https://addons.prestashop.com/en/remarketing-shopping-cart-abandonment/26740-abandoned-cart-reminder-5-in-1.html .

Through the article “ sell email adress ”, I believe that you should consider spending money to invest in your websites. There are things you buy once but you use them for many years. Thanks for following this article. Please share it if you feel it helpful.

CSV import product

CSV import product is the module supporting to input product data in bulk in order to replace the traditional way. If you own a small number of products, you can import the product information manually. However, if the number comes up to hundreds of thousands of products, it will be impossible to do this. It will be a nightmare if you input this enormous information manually day by day.

Therefore, CSV import product is launched to provide solutions to this problem. If you have a number of stores using Prestashop, you do not need to import product for each store any more. You input information for one store only, and export it to CSV file. If there is any difference in prices and product quantities among stores, you edit the CSV file and import for the rest of stores.

To export existing products to CSV file, you do as below:

On the left side of the menu in the back office, youhover mouse cursor to Catalog and click on Products.

A list of products will appear

CSV import product

In the product list, you can choose all products by clicking on Select All or select each one. Then click on Export symbol as the figure below.

CSV import product

After importing, the system will download the CSV file to computer.

CSV import product

You can send this CSV file to other people or to the site for importing products. You also can edit CSV file to be suitable for new sites or to update information for this site.

CSV import product

Import products

In the product list interface, you click on Import button as below

CSV import product

A window shows up, you can install to import products.

In “Select a file to import”, you click on upload button to upload files from your computer. Or you can use files from history/FTP. After selecting and configuring, you click on Next step.

CSV import product

In this screen, you please select the exact fields of CSV system and data. For example, in ID column, you select Product ID and it is similar to Image, Name, Reference, etc. Finally, you click on Import button to finish the product import process.

CSV import product

The disadvantage of default CSV import product feature is that it can process the CSV files created by itself. You need to pay attention to syntax order when editing CSV files. This default Prestashop feature also does not support to import CSV and excel files exported from Shopify, Magento, and WordPress. In these cases, I suggest that you should use this Import product module because it supports CSV and excel files with all forms. You will be supported by developers if you get into trouble.

 

Download cleaning invoice pdf and use

Currently, the demand for searching for cleaning invoice pdf  is very huge. Because when using it, you just need to fill in available forms, then print and give them to your customers. The advantage of the pdf file compared with other format texts is that it can be edited by browsers without installing any software.

cleaning invoice pdf

Depending on your demand as well as the field you are working in, you should choose a suitable cleaning invoice pdf template. You can only edit the information of these pdf template files without changing their structures. The advantage of this file type is that you can create the consistency in the invoice in order to maintain your brand. However, this also is the disadvantage because you cannot make a custom, which may reduce your personalization as well as creativity.

These are pdf files which are shared for you to use for free. It is suitable for everyone. It is sure that every people can use them on all devices. There will be no hope anymore.

The usage is quite simple, you could download the pdf file here  or get access to this link

Please input necessary information which are your information or the store information, for instance, name, address, customer’s information, shipping address.

In order detail, please enter product’s name, quantity, price per unit for each product and the percentage of discount. The system will automatically calculate the total amount. You do not have to calculate anything at all, which will reduce the error of doing this manually.

Thank website https://invoicetemplates.com  for sharing this resource for free.

In the previous part, we can create an invoice template bootstrap. If this article, as well as cleaning invoice pdf file, is useful for you, please sharing it so that more and more people have a chance to know about this free invoice file. Thanks you so much.

Moving company invoice pdf for free

You are able to use this file for free. The only things you need to do are downloading this file and inputting all the required information. This pdf file is quite special because you can edit it with different software. You can open it on many browsers which are available in your device such as Google Chrome, Firefox, IE, etc. and click on Print button to print invoices.

moving company invoice pdf

Required information on moving company invoice pdf for free

Similarly to all other invoices, you should input some related information such as your company’s name, address, and contact information like telephone number, and email. Besides, you should enter information of the company to which you send the moving company invoice pdf.

In the below part of the invoice, you should input all the tasks you have completed so that your partner will carry out the payment for you. Or you could also input the product information you have sold to your customers. Depending on your nation orstate imposing the tax on your products or not, you should include this tax on the invoice.

Do I need to send moving company invoice pdf always?

To me, you should always send the invoice to your customers so that you can have a statistic of how many products are sold and how many profits you receive. This feature is so helpful if you want to summarize all the profits and loss or the operating performance of your company.

In the previous part, we can create an  invoice template bootstrap. In this one, you do not have to edit anything or create code. You just need to click and experience. If you have demand for the invoice, you could download this file here

How to create invoice template bootstrap 

invoice template bootstrap is  the invoice template built on html, and css. Besides, the bootstrap library supports to create attractive and responsive invoices more easily. In this article, we will build an invoice step by step.

Idea

This simple invoice template will include the main information as below:

Invoice logo: This can be your company’s logo. You add it in order to promote your brand image.

Invoice number: This number is to distinguish one invoice with the others.

BILLING ADDRESS:  This is the address of goods’ sender

DELIVERY ADDRESS:  This is the address of goods’ receiver

Order detail: This includes product information such as name, quantity, price, shipping amount and a total amount of the invoice.

We will build an invoice template bootstrap being the same as the one in the below figure. Note that this is a simple example, you can absolutely create a more attractive invoice based on it because your creativity is unlimited.

invoice template bootstrap

Preparation

  • Install the editor software which is the most suitable for you such as php designer, notepad++, etc.
  • Download bootstrap library here  and unzip it
  • Download font awesome library here and unzip it

Implementation

Implement as the following order:

Step 1: Create the folder: invoice- template-bootstrap

Step 2: Copy the unzipped bootstrap folder and paste here: invoice- template- bootstrap

Step 3: Copy the unzipped font-awesome folder and paste in invoice- template- bootstrap

Step 4: In invoice- template- bootstrap, create a css folder. In the css folder, create style.css file. Make sure to create the exact following URL: invoice- template- bootstrap/css/style.css

Step 5: Open css file created in step 3 and add and save the below contents to style.css file.


.height {
min-height: 200px;
}
.icon {
font-size: 47px;
color: #5CB85C;
}
.iconbig {
font-size: 77px;
color: #5CB85C;
}

.table >tbody>tr> .emptyrow {
border-top: none;
}

.table >thead>tr> .emptyrow {
border-bottom: none;
}
.table >tbody>tr> .highrow {
border-top: 3px solid;
}
.logo img {width:100px}
.top-header {padding: 15px 0}

Step 6: Create index.html file in root folder of invoice- template- bootstrap

As the same time, make sure that invoice- template- bootstrap folder has the same structure as the figure below:

invoice template bootstrap

Step 7: Open index.html file, input and save the following contents


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="author" content="TRAN DINH HONG" />
<title>Simple Invoice Template | PrepBootstrap</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="font-awesome/css/font-awesome.min.css" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body>
<div class="container">
<div class="container">
<div class="row">
<div class="col-xs-12">
<div class="row top-header">
<div class="col-xs-2 col-md-3 col-lg-3 pull-left">
<a class="logo" href=""><img src="http://nikrasam.com/media/catalog/product/ct_a683348e01.png" /></a>
</div>
<div class="col-xs-10 col-md-9 col-lg-9 ">
<h2>Invoice number #6789</h2>
</div>
</div>
<hr>
<div class="row">
<div class="col-xs-12 col-md-3 col-lg-3 pull-left">
<div class="panel panel-default height">
<div class="panel-heading">BILLING ADDRESS</div>
<div class="panel-body">
<strong>John DOE</strong><br>
16, Main street 2nd floor<br>
Miami - 33133 Florida<br>
<strong>0102030405</strong><br>
</div>
</div>
</div>
<div class="col-xs-12 col-md-3 col-lg-3 ">
<div class="panel panel-default height">
<div class="panel-heading">DELIVERY ADDRESS</div>
<div class="panel-body">
<strong>John DOE</strong><br>
16, Main street 2nd floor<br>
Miami - 33133 Florida<br>
<strong>0102030405</strong><br>
</div>
</div>
</div>
<div class="col-xs-12 col-md-3 col-lg-3">
<div class="panel panel-default height">
<div class="panel-heading">PAYMENT INFORMATION</div>
<div class="panel-body">
<strong>Card Name:</strong> Master Cart<br>
<strong>Card Number:</strong> ***** 556<br>
<strong>Exp Date:</strong> 08/22<br>
</div>
</div>
</div>
<div class="col-xs-12 col-md-3 col-lg-3">
<div class="panel panel-default height">
<div class="panel-heading">ORDER PREFERENCES</div>
<div class="panel-body">
<strong>Gift:</strong> No<br>
<strong>Express Delivery:</strong> Yes<br>
<strong>Insurance:</strong> No<br>
<strong>Coupon:</strong> No<br>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="text-center"><strong>Order summary</strong></h3>
</div>
<div class="panel-body">
<div class="table-responsive">
<table class="table table-condensed">
<thead>
<tr>
<td><strong>Item Name</strong></td>
<td class="text-center"><strong>Item Price</strong></td>
<td class="text-center"><strong>Item Quantity</strong></td>
<td class="text-right"><strong>Total</strong></td>
</tr>
</thead>
<tbody>
<tr>
 

Now, you try running it on the browser, the result will be as the first figure. Its advantage is that it could be responsive with different screen sizes due to using Bootstrap library. In fact, using Bootstrap is seldom because most users do not know about programming. Therefore, many supporting tools which make people not have to calculate manually anymore appear. For instance, Pdf Invoice Template is the tool installed in Prestashop source code to support store owners to easily create their own invoices. You could try the demo here. I believe that with its wonderful features, you can save a lot of time spent on processing invoices.

How to create java dropdown menus in website

Java is not only specially used in building apps but also applied to the website development. In this field, we could also talk about JSP language which is used by many big businesses. The article java dropdown menus will help you create a simple menu with this source code.

java dropdown menus

Preparation

Users who use java language for programming should prepare tomcat server. This server is different from the servers exclusively used for PHP and ASP. The java faithful often use exclusive editor software such as eclipse or netbean ide. In the article java dropdown menus, we just need one editor and one browser to check.

Implementation

No matter which language you use to develop your websites, html and css are the two compulsory things you must know. No matter which source code you use, html source code can work well with this. Therefore, you should be skillful in html. You can easily make changes to create an appropriate menu. The code of the menu will be as below

<style>
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {background-color: #ddd;}
.dropdown:hover .dropdown-content {display: block;}
.dropdown:hover .dropbtn {background-color: #3e8e41;}
</style>
</head>
<body>

<h2>Hoverable Dropdown</h2>
<p>Move the mouse over the button to open the dropdown menu.</p>
<div class="dropdown">
<button class="dropbtn">Dropdown</button>
<div class="dropdown-content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</div>
 
</body>

Thus, we have just finished the article java dropdown menus. Hope that you can create more impressive and attractive menus than that in this article. This article just guides you on creating a menu manually. If you want to create menus in your projects, there will be mega menu modules to support you. When using these modules, you do not need to know about code because you just need to get to the backend, and drag and drop.

Custom fields Prestashop module

Custom fields Prestashop is the module that allows you to add extra fields to a registration form, and checkout page. The module supports all input types, which helps you to create forms with various fields meeting your needs.

Custom fields Prestashop

DRAG AND DROP SUPPORT

In addition, it will be easier than ever for form creation because custom fields module supports for drag and drop. According to statistics, a huge number of users enjoy using drag and drop due to its friendly, visual user interface and time saving.

EASY TO ADD FIELDS TO REGISTRATION FORM

You can add extra fields to a registration page by using drag and drop in the Pretashop registration form of the module’s back office. After registering, customers are able to edit their information and data in item “my account”. In terms of admin, they can change all data about their customers in the back office. Especially, you can choose the place where to locate fields in the registration page.

ADD EXTRA FIELDS TO SHIPPING STEP OF THE CHECKOUT PAGE

In checkout page, you are able to add extra fields to shipping step. This process’s purpose is to collect customer information that is used in the delivery processin order to make sure the most convenient delivery for both store owners, delivery units, and customers.

ADD EXTRA FIELDS TO PAYMENT STEP OF THE CHECKOUT PAGE

Being similar to shipping step, custom fields Prestashop module also supports to create form and display fields in payment step, serving store and shop owners who enjoy editing form themselves.

If you are owninga shop website built on Prestashop platform but you feel that the default registration part of the system still has not met your needs yet. Or you want to edit, add extra fields to checkout step, shipping step, etc. I believe you should consider using this module. Please visit here  . Or if you have any question, do not hesitate to contact us. We are willing to support you.

How to create sticky form in php

Sticky form in PHP is a standard HTML form which saves that data have been entered in a form. It’s really helpful for end-user because they don’t need to re-type data into the form if there’s an error while submitting. Let me give you a real example. When you search in google, the search results are displayed below, while texts still appear in the search box

Sticky form in PHP

 

In the previous posts, we have created PHP code to send email as well as display form data, so we will directly create a simple sticky form in PHP in this tutorial. You can see the demo here.

To create this sticky form, we have to follow 2 steps:

  • Step 1: Taking the data sent by the form by using “GET” method: $data= $_GET[“data”];
  • Step 2: Settings that data as a value for input

By default, the form data will be removed after submitting because of this code line: <input name =”data” value=”” />)

We need to change this code to: <input type=”text” name=”data” value=”<?php echo $data; ?>”>

Source code:

At first, put the sticky-form-in-php folder inside \htdocs folder (if you use xampp). In the sticky-form-in-php folder, create index.php file.


<!doctype html>
<html>
<body>
<?php
if (isset($_GET["data"])){
$data= $_GET["data"];
}
else {
$data= "";
}
<form method="GET" >
Enter content: <input type="text" name="data" value="<?php echo $data; ?>">
<button type="submit">Submit</button>
</form>
 
<?php
if (isset($_GET["data"])){
echo  $data = $_GET["data"];
}
?>
</body>
</html>
</code></pre>
 
Let’s discuss about these codes:
<pre><code class="php">
<?php
if (isset($_GET["data"])){
$data= $_GET["data"];
}
else {
$data= "";
}

These piece of codes means that when client add data to the form fields, the system will assign those values to the data variable. If not, the data variable has an empty value.

In case we don’t provide those conditions, the system will display an error if a user leaves an empty field:

 

Sticky form in PHP

The below code line uses for display textbox data that we have taken from the above step:


<input type="text" name="data" value="<?php echo $data; ?>">

The purpose of these codes is displaying data that’s been entered:

<?php
if (isset($_GET["data"])){
echo  $data = $_GET["data"];
}
?>

We hope that you can know how does the sticky form in PHP work through our tutorial. You can download our source code for reference. We also create a video demo so you can fully understand the steps to create a sticky form. If you need to add form validate you could follow the post.

If you’ve any question or recommendation, please do not hesitate to let us know.

How to create PHP contact form script with captcha

In the two previous posts, we have successfully created a simple contact form with validation for fields. It can’t be denied that a lot of spammers and programmed spambots will attack your website from flooding your form, that’s the reason why your contact form needs a CAPTCHA function to prevent those spam emails. By using captcha function, a customer needs to enter correct provided characters into the captcha box so that they can submit his request to the server. In this article, I will guide you how to create the PHP contact form script with captcha.

PHP contact form script with captcha

We will create contact-us.php file instead of HTML file. You need to put this .php file into the project folder.

Source code of PHP contact form script with captcha:


<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html" />
<meta name="author" content="TRAN DINH HONG" />
<title>php code to send email from contact form</title>
<link type="text/css" rel="stylesheet" href="style/style.css" />
</head>
 
<body>
<?php
session_start();
 
include("php/simple-php-captcha/simple-php-captcha.php");
// Step 1 - Enter your email address below.
$to = 'you@domain.com';
 
if(isset($_POST['emailSent'])) {
 
$subject = $_POST['subject'];
 
// Step 2 - If you don't want a "captcha" verification, remove that IF.
if (strtolower($_POST["captcha"]) == strtolower($_SESSION['captcha']['code'])) {
 
$name = $_POST['name'];
$email = $_POST['email'];
 
// Step 3 - Configure the fields list that you want to receive on the email.
$fields = array(
0 => array(
'text' => 'Name',
'val' => $_POST['name']
),
1 => array(
'text' => 'Email address',
'val' => $_POST['email']
),
2 => array(
'text' => 'Message',
'val' => $_POST['message']
),
3 => array(
'text' => 'Checkboxes',
'val' => implode($_POST['checkboxes'], ", ")
),
4 => array(
'text' => 'Radios',
'val' => $_POST['radios']
)
);
 
$message = "";
 
foreach($fields as $field) {
$message .= $field['text'].": " . htmlspecialchars($field['val'], ENT_QUOTES) . "<br>\n";
}
 
$mail = new PHPMailer;
$mail->From = $email;
$mail->FromName = $_POST['name'];
$mail->AddAddress($to);
$mail->AddReplyTo($email, $name);
 
$mail->IsHTML(true);
 
$mail->CharSet = 'UTF-8';
 
$mail->Subject = $subject;
$mail->Body    = $message;
 

// Step 5 - If you don't want to attach any files, remove that code below

if (isset($_FILES['attachment']) && $_FILES['attachment']['error'] == UPLOAD_ERR_OK) {
$mail->AddAttachment($_FILES['attachment']['tmp_name'], $_FILES['attachment']['name']);
}
 
if($mail->Send()) {
$arrResult = array('response'=> 'success');
} else {
$arrResult = array('response'=> 'error', 'error'=> $mail->ErrorInfo);
}
 
} else {
 
$arrResult['response'] = 'captchaError';
 
}
 
}
?>
 
<div class="contact-wapper">
<h2 class="title"><strong>Contact</strong> Us</h2>

<form id="contactForm" action="<?php echo basename($_SERVER['PHP_SELF']); ?>#contact-sent" method="POST" >

<div class="row">

<div class="form-group">

<div class="col-md-6">

<label>Your name *</label>

<input type="text" value="" msg-error="Please enter your name here."  maxlength="100" class="form-control" name="name" id="name" required="" aria-required="true">

</div>

<div class="col-md-6">

<label>Your email address *</label>

<input type="email" value="" msg-error="Please enter your email address here."  maxlength="100" class="form-control" name="email" id="email" required="" aria-required="true">

</div>

</div>

</div>

<div class="row">

<div class="form-group">

<div class="col-md-12">

<label>Subject</label>

<input type="text" value="" msg-error="Please enter your subject  here."  maxlength="100" class="form-control" name="subject" id="subject" required="" aria-required="true">

</div>

</div>

</div>

<div class="row">

<div class="form-group">

<div class="col-md-12">

<label>Message *</label>

<textarea maxlength="5000" rows="10" msg-error="Please enter your message  here." class="form-control" name="message" id="message"  required="" aria-required="true"></textarea>

</div>

</div>

</div>

<div class="row">

<div class="col-md-12">

<label>Capcha code*</label>

</div>

</div>

<div class="row">

<div class="form-group capcha-s">

<div class="col-md-4">

<div class="captcha form-control">

<div class="captcha-image">

<?php

$_SESSION['captcha'] = simple_php_captcha(array(

'min_length' => 6,

'max_length' => 6,

'min_font_size' => 22,

'max_font_size' => 22,

'angle_max' => 3

));
$_SESSION['captchaCode'] = $_SESSION['captcha']['code'];
echo '<img id="captcha-image" src="' . "php/simple-php-captcha/simple-php-captcha.php/" . $_SESSION['captcha']['image_src'] . '" alt="CAPTCHA code">';
?>
</div>
<div class="captcha-refresh">
<a href="#" id="refreshCaptcha"><i class="fa fa-refresh"></i></a>
</div>
</div>
</div>
<div class="col-md-8">
<input type="text" value="" maxlength="6" data-msg-captcha="Wrong verification code." data-msg-required="Please enter the verification code." placeholder="Type capcha code." class="form-control input-lg captcha-input" name="captcha" id="captcha" required>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<input type="submit" value="Send Message" class="btn btn-primary btn-lg mb-xlg" />
</div>
</div>
</form>
</div>
</body>
</html>

Please take note about this important code line: “include(“php/simple-php-captcha/simple-php-captcha.php”);”. This means we need to use the PHP captcha library to automatically generate captcha code for each customer if we develop the PHP contact form script with captcha.

In this article, we talk about the basic things that help you understand how it works. In reality, you can base on this article to learn how to add a library to create the captcha function. Because the contents of the library are so long and complicated that users who start to learn about form find it difficult to understand, we will talk about it in another article.

You shouldn’t follow the post if you are using a framework like WordPress, Prestashop or Magento. Because the frameworks has awsome plugins, modules for creating form. For example, If you need custom Prestashop contact form, you could use module Form Builder Pro.

There are many types of captcha that can be used. We will discuss one captcha type in this article. Besides, another interesting way is using Google captcha. Basically, we need to register to get API of Google then add this API to the form settings in order o be able to use.

you can download Source code : PHP-contact form-script-with-captcha

If you’ve any question or recommendation, please do not hesitate to let us know.

 

Enjoy this blog? Please spread the word :)