captchfeaturebgimg

Google Form Captcha Setup Using PHP and Jquery

Hello Friends,

In this blog post, I am going to explain how to make a google form captcha functionality for your form. Here I will show you how to setup google form captcha using PHP and jquery.

Captcha is generally used for security purpose, and its aim is to stop all the bots entry into our forms.

Bots are the software which is capable to register inside your website through your form, these bots are generally used by spammers.

captchacontent_img


Softwares used for making this Google Form Captcha are:

NetBeans IDE

Xampp Server

For making a captcha functionality for your form you need to go through step by step procedure given below.

Now create a project with a name say googlecaptcha or you can have any name as per your desire.

Now creates the files as given the below file structure.

captchafilestructure_img

After creating all the files you just need to copy and paste the below code into the respective file.


form.php

<html>
<head>
<title>Google Captcha Protection in form- Demo Preview</title>
<meta name="robots" content="noindex, nofollow" />
<link rel="stylesheet" type="text/css" href="style.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="scripts.js"></script>
</head>
<body>

<div id="mainform">
<div class="innerdiv">
<h2>Google Captcha Creation</h2>
<!-- Required div starts here -->
<form method="post" id="myForm">
<h3>Fill Your Captcha!</h3>
<br/>
<table>
<tr>
<td><br/><br/><br/><br/><br/><br/></td>
<!--including google captcha image from captcha.php-->
<td><img id="captcha_img" src="captcha.php" /><br/>
<span id="reload">Can't read? try another one</span></td>
<tr>
<td>Enter Text:</td>
<td><input id="captcha1" name="captcha" type="text"></td>
</tr>

<tr>
<td></td>
<td><input type='submit' id="button" value='Submit'><br/>
</td>
</tr>
</table>
<?php
include 'verify.php';
?>
</form>
</div>
<!-- Right side div -->

</div>
</body>
</html>

scripts.js

$(document).ready(function() {
$("#reload").click(function() {
$("#captcha_img").attr("src", "captcha.php");
});
});

verify.php

<?php
if (isset($_POST["captcha"]))
{
session_start();
//Verifying user input captcha text with google generated captcha
if ($_SESSION["captcha"] == $_POST["captcha"])
{
echo "<b class=\"correct\">Correct Code Entered..!!</b>";
}
else
{
echo "<b class=\"wrong\">Wrong Code Entered..!!</b>";
}
unset($_SESSION['captcha']);
}
?>

 

style.css

@import url(http://fonts.googleapis.com/css?family=Fauna+One|Muli);
#mainform{
width:960px;
margin:20px auto;
padding-top:20px;
font-family: 'Fauna One', serif;
}

#mainform h2{
width:100%;
float:left;
text-align:center;
margin-top:35px;
}

.innerdiv{
width:65%;
float:left;
background-color: #CDDC39;
}

form{
background-color:white;
color:#123456;
box-shadow: 1px 1px 22px rgb(194, 194, 194);
width:500px;
margin:50px 250px 0 50px;
float:left;
height:430px;
text-align:center;
}

h3{
margin-top:0px;
margin-bottom:10px;
color:white;
background-color: #607D8B;
text-align:center;
width:100%;
height:50px;
padding-top:30px;
}

input{
width:250px;
height:30px;
border-radius:3px;
padding:2px;
box-shadow:0px 0px 10px darkgray;
margin:10px;
}

input[type=submit]{
background-color: #4CAF50;

border:1px solid white;
font-family: 'Fauna One', serif;
font-Weight:bold;
font-size:18px;
color:white;
margin-top: 15px;
}

span{
color:green;
font-size:14px;
}

#myForm div{
color:red;
font-size:14px;
}

table{
margin-left:40px;
}
#captcha_img{
margin-left:60px;;
}
#reload{
margin-left:40px;
cursor:pointer;
}
.correct{
color:green;
}
.wrong{
color:red;
}

Once you copy and paste all the files then run the form.php file and you will get desired Google Form Captcha in your form on the browser.


In a case of any queries, you can write to us at a5theorys@gmail.com we will get back to you ASAP.

Hope! you would have enjoyed this post to build Google Form Captcha.

Please feel free to give your important feedbacks in the comment section below.

Have a great time! Sayonara!

image_upload_feature_img

Upload Image with PHP and Jquery Using Form

Hello Friends,

In this blog post, I am going to show an existing functionality of upload Image using a form with the help of PHP and jquery.

Often you would have seen the option of  upload Image while filling your college, office, interview form. Here you upload image and submit with the form.

this functionality is very important once we have to collect the image of our users and any other things depend on the context of the requirement.

You can also use this upload Image functionality as your school project and show it as a collection of images would also take over to form an image gallery.

So How to build this functionality of upload image?

Friends, this is a very simple to build upload image functionality just follow the below-given procedure step by step and you will be finished with an image upload code or software.


Software used for building this upload image project:

Net Beans IDE
Xampp Server

We used this above software for this project though you can use any software supporting PHP, HTML, Jquery or that you are familiar with.


File Structure:

See the image below.

imageuploadfilestr

As per the above file structure, you just make a PHP project name as image upload or you can have any name as per your requirement.

Now create all the files as shown in the above file structure. You can rename the pages but make sure to change the same in the code given below.

You will also need to create one folder name as upload folder. See the file structure image for the same.

You will also need to download one delete icon image and copy it to your project.

Now just place this below-given code into the respective files and run your project by running the upload.php file.


Upload.php

<!DOCTYPE html>
<html>
<head>
<title>Upload Image using form</title>
<link href="style.css" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="imageupload.js"></script>
</head>
<body>
<div id="mainform">
<div id="innerdiv">
<h2>Upload Image using form</h2>
<!-- Required Div Starts Here -->
<div id="formdiv">
<h3>Upload Image Form</h3>
<form action="" enctype="multipart/form-data" id="form" method="post" name="form">
<div id="upload">
<input type="file" name="file" accept="image/*">
</div>
<input id="submit" name="submit" type="submit" value="Upload">
</form>
<br>
<div id="detail">

<ul>

<li>You can upload only- <b>(jpeg,jpg,png) images.</b></li>
<li>Image size < 100kb.</li>
</ul>
</div>
</div>
<div id="clear"></div>
<div id="preview">
<img id="previewimg" src=""><img id="deleteimg" src="delete.png">
<span class="pre">IMAGE PREVIEW</span>
</div>
<div id="message">
<?php include 'imageupload.php';?>
</div>
</div>
</div>
</body>
</html>

Imageuplaod.php

<?php

if (isset($_POST['submit'])) {

$validextensions = array("jpeg", "jpg", "png");
$temporary = explode(".", $_FILES["file"]["name"]);
$file_extension = end($temporary);

if ((($_FILES["file"]["type"] == "image/png") || ($_FILES["file"]["type"] == "image/jpg") || ($_FILES["file"]["type"] == "image/jpeg")
) && ($_FILES["file"]["size"] < 100000)//Approx. 100kb files can be uploaded.
&& in_array($file_extension, $validextensions)) {

if ($_FILES["file"]["error"] > 0) {
echo "Return Code: " . $_FILES["file"]["error"] . "<br/><br/>";
} else {

echo "<span>Your File Uploaded Succesfully...!!</span><br/>";
echo "<br/><b>File Name:</b> " . $_FILES["file"]["name"] . "<br>";
echo "<b>Type:</b> " . $_FILES["file"]["type"] . "<br>";
echo "<b>Size:</b> " . ($_FILES["file"]["size"] / 1024) . " kB<br>";
echo "<b>Temp file:</b> " . $_FILES["file"]["tmp_name"] . "<br>";
if (file_exists("upload/" . $_FILES["file"]["name"])) {
echo $_FILES["file"]["name"] . " <b>already exists.</b> ";
} else {
move_uploaded_file($_FILES["file"]["tmp_name"], "upload/" . $_FILES["file"]["name"]);
$imgFullpath = "http://".$_SERVER['SERVER_NAME'].dirname($_SERVER["REQUEST_URI"].'?').'/'. "upload/" . $_FILES["file"]["name"];
echo "<b>Stored in:</b><a href = '$imgFullpath' target='_blank'> " .$imgFullpath.'<a>';

}

}
} else {
echo "<span>***Invalid file Size or Type***<span>";
}
}
?>

Imageuplaod.js

$(document).ready(function() {
// Function for Preview Image.
$(function() {
$(":file").change(function() {
if (this.files && this.files[0]) {
var reader = new FileReader();
reader.onload = imageIsLoaded;
reader.readAsDataURL(this.files[0]);
}
});
});
function imageIsLoaded(e) {
$('#message').css("display", "none");
$('#preview').css("display", "block");
$('#previewimg').attr('src', e.target.result);
};
// Function for Deleting Preview Image.
$("#deleteimg").click(function() {
$('#preview').css("display", "none");
$('#file').val("");
});
// Function for Displaying Details of Uploaded Image.
$("#submit").click(function() {
$('#preview').css("display", "none");
$('#message').css("display", "block");
});
});

Style.css

@import "http://fonts.googleapis.com/css?family=Droid+Sans";
/* Above is to load Google Fonts in our page.*/
#mainform{
width:960px;
margin:30px auto;
padding-top:20px;
font-family:'Droid Sans',sans-serif
}
#mainform h2{
margin-left:95px
}
#innerdiv{
float:left;
width:60%;
height:575px;
padding:10px 30px 30px
}
#formdiv{
background-color:#fff;
color:#123456;
box-shadow:0 1px 1px 1px gray;
width:480px;
margin:50px 0 0;
height:300px
}
h3{
margin-top:0;
color:#fff;
background-color:#182d69;
text-align:center;
width:100%;
height:50px;
padding-top:30px
}
input[type=submit]{
background-color:#182d69;
border:1px solid #fff;
font-weight:700;
font-size:18px;
color:#fff;
width:150px;
height:30px;
border-radius:3px;
padding:2px;
box-shadow:0 1px 1px 0 #a9a9a9;
margin-left:20px
}
#form{
width:43%;
float:left
}
#preview{
height:180px;
width:180px;
text-align:center;
margin:20px;
display:none
}
.pre{
margin-right:20px;
font-size:13px
}
#previewimg{
height:140px;
width:140px;
float:left;
padding:8px;
border:1px solid #e4d3c3;
margin-bottom:5px
}
#file{
opacity:0;
width:115px;
height:115px
}
#upload{
width:115px;
height:115px;
background-image:url(abc.png);
background-repeat:no-repeat;
margin-left:35px;
box-shadow:0 0 10px grey;
background-position:5px
}
#message{
width:100%;
font-size:14px;
color:#123456;
margin-top:-90px;
float:left;
margin:15px
}
#message span{
color:red;
font-size:15px
}
#detail{
line-height:20px;
float:left;
width:270px;
font-size:14px
}
ul{
margin-left:-25px
}
#textmessage{
float:right;
width:50%;
margin:15px 85px 0 0
}
div#img{
width:200px;
height:200px
}
#imageupload{
width:150px;
height:150px
}
#deleteimg{
cursor:pointer;
float:right;
margin-top:-175px;
margin-right:10px
}

In a case of any queries, you can write us at a5theorys@gmail.com we will get back to you ASAP.

Hope! you would have enjoyed this post about how to upload image.

Please feel free to give your important feedbacks in the comment section below.

Have a great time! Sayonara!

auto_submit_form

Auto Submit Form Using JavaScript

Hello Friends,

In this blog post, I am going to let you know about how to make an auto-submit form using javascript?

Usually, when you fill up any form you get an option ‘submit’ for submitting your form.

But Here we are going to explain you to develop an auto submit form.


What is this auto submit form and what is the benefit of this form?

A form without an option of auto submit is known as auto submit form. Here the timer is set in the form.

If the timer time is 20 sec then the form will automatically submit after 20 sec.

The form will not be submitted until you fill all the field correctly.

If you fail to submit the information under time or filled wrong information then a timer will again start from the beginning.

If you fill any field wrong then a popup will appear to refill the field with correct data and then finally form will be submitted.

You don’t have any worry for the form timer as a form will not be submitted until you fill it correctly.

You can use this functionality where you have a sensitive form necessarily to be filled.

this is also very useful in the case of online question paper forms where students don’t worry about the final

submission of the test paper as having very limited time to submit their form.

You can see the auto form sample in the below image.

autosubmit1


Software Used:

Install NetBeans IDE.

Install Xampp Server.


What is the procedure to develop thisauto form functionality?

This is a very simple procedure to develop the form, you just need to follow the below step by step procedure for the same.

Start your Apache server using Xampp control panel.

Open your NetBeans IDE and create a project say ‘Formautosubmit’ though you can have any name as per your wish.

Create few files as shown in the below image under this project.

autosubmit2


Now copy and paste the below code one by one to the respective files given below.


formautosubmit.html:

<html>
<head>
<title>AutoSubmit Form Example Using JavaScript</title>
<!-- Include CSS File Here-->
<link href="formautosubmit.css" rel="stylesheet" type="text/css"/>
<!-- Include JS File Here-->
<script src="formautosubmit.js" type="text/javascript"></script>
</head>
<body>
<div class="container">
<div class="main">
<form action="success.html" method="post" id="form">
<h2>AutoSubmit Form Example Using JavaScript</h2>
<span>Form will automatically submit in <b id="timer">20</b> <b>seconds</b>.</span>
<label>Name :</label>
<input type="text" name="name" id="name" placeholder="Name" />
<label>Email :</label>
<input type="text" name="email" id="email" placeholder="Valid Email" />
<label>Gender :</label>
<input type="radio" name="gender" value="Male" id="male" />
<label>Male</label>
<input type="radio" name="gender" value="Female" id="female" />
<label>Female</label></br></br>
<label>Contact No. :</label>
<input type="text" name="contact" id="contact" placeholder="Contact No." />
</form>
</div>
</div>
</body>
</html>

formautosubmit.js:

window.onload = function() {
// Onload event of Javascript
// Initializing timer variable
var x = 20;
var y = document.getElementById("timer");
// Display count down for 20s
setInterval(function() {
if (x <= 21 && x >= 1) {
x--;
y.innerHTML = '' + x + '';
if (x == 1) {
x = 21;
}
}
}, 1000);
// Form Submitting after 20s
var auto_refresh = setInterval(function() {
submitform();
}, 20000);
// Form submit function
function submitform() {
if (validate()) // Calling validate function
{
alert('Form is submitting.....');
document.getElementById("form").submit();
}
}
// To validate form fields before submission
function validate() {
// Storing Field Values in variables
var name = document.getElementById("name").value;
var email = document.getElementById("email").value;
var contact = document.getElementById("contact").value;
// Regular Expression For Email
var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
// Conditions
if (name != '' && email != '' && contact != '') {
if (email.match(emailReg)) {
if (document.getElementById("male").checked || document.getElementById("female").checked) {
if (contact.length == 10) {
return true;
} else {
alert("The Contact No. must be at least 10 digit long!");
return false;
}
} else {
alert("You must select gender.....!");
return false;
}
} else {
alert("Invalid Email Address...!!!");
return false;
}
} else {
alert("All fields are required.....!");
return false;
}
}
};

formautosubmit.css:

/* Below line is used for online Google font */
@import url('https://fonts.googleapis.com/css?family=Oswald');
h2{
background-color: #dadad4;
padding: 30px 35px;
margin: -10px -50px;
text-align:center;
border-radius: 10px 10px 0 0;
}
span{
display: block;
margin-top: 10px;
font-weight:bold;
}
b{
color:red;
}
.back{
text-decoration: none;
border: 1px solid rgb(0, 143, 255);
background-color: rgb(0, 214, 255);
padding: 3px 20px;
border-radius: 2px;
color: black;
}
center{
font-size: 31px;
}
hr{
margin: 10px -50px;
border: 0;
border-top: 1px solid #ccc;
margin-bottom: 25px;
}
div.container{
width: 900px;
height: 610px;
margin:35px auto;
font-family: 'Oswald', sans-serif;
}
div.main{
width: 306px;
padding: 10px 50px 0px;
border: 2px solid gray;
border-radius: 10px;
font-family: raleway;
float:left;
margin-top: 30px;
background-color: #eae0e0;
margin-left: 240px;
}
input[type=text]{
width: 100%;
height: 40px;
padding: 5px;
margin-bottom: 25px;
margin-top: 5px;
border: 2px solid #ccc;
color: #4f4f4f;
font-size: 16px;
border-radius: 5px;
}
input[type=radio]{
margin: 10px 10px 0 10px;
}
label{
color: #464646;
text-shadow: 0 1px 0 #fff;
font-size: 14px;
font-weight: bold;
}
input[type=submit]{
font-size: 16px;
background: linear-gradient(#ffbc00 5%, #ffdd7f 100%);
border: 1px solid #e5a900;
color: #4E4D4B;
font-weight: bold;
cursor: pointer;
width: 100%;
border-radius: 5px;
padding: 10px 0;
outline:none;
}
input[type=submit]:hover{
background: linear-gradient(#ffdd7f 5%, #ffbc00 100%);
}

success.html:

<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
<head>
<title>Form Submitted</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div><h1 style="text-align: center;">Your Form has been submitted successfully</h1></div>
<a href="formautosubmit.html"><h3 style="text-align: center;">Back</h3></a>
</body>
</html>

Now you are ready to run and test your project. Run the HTML file to fill the auto submit form.


In a case of any queries, you can write us at a5theorys@gmail.com we will get back to you ASAP.

Hope! you would have enjoyed this post to build auto submit form.

Please feel free to give your important feedbacks in the comment section below.

Have a great time! Sayonara!

dynamicform-javascript

Dynamically Add & Remove Form Field Using JavaScript

Hi Friends,

In this blog post, I will show you how to add and remove the form field dynamically using Javascript?

Here I will let you know, how to make prebuilt form field like name email and etc, and just use as per your requirement just by clicking on the field.

Here just click the desired field to keep in your form and your form gets complete. See the below image for the same.

dform1



Software needed to build this functionality using form field:

Install NetBeans
Install Xampp Server



How to make these dynamic form field templates?

This is an easy process, you just need to follow the step by step procedure given below to make form field template.

Once you installed the above-given software then,

Open your NetBeans IDE and create a project say dynamic_form and then add few files as shown in the below image.

dform2

You would also need to create a images folder in the source and then download and keep an image icon of cancel as shown in form earlier to this post.

Once you are done with these files then copy and paste the below code one by one to the respective files.


dynamicform.html:

<!DOCTYPE html>
<html>
<head>
<title>Create Dynamic form Using JavaScript</title>
<script src="dynamicform.js" type="text/javascript"></script>
<link href="dynamicform.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div class="main_content">
<!--
========================================================================================
Header Div.
========================================================================================
-->
<div class="first">
<p><a href="http://www.a5theory.com/"><img src="images/a5logo.png" alt=""/>A5Theory.com
</a></p>
</div>
<!--
======================================================================================
We have multiple buttons here in the div, this will appear on the screen as per user click
=======================================================================================
-->
<div class="two">
<h4>Frequently Used Form Fields</h4><button onclick="nameFunction()">Name</button>
<button onclick="emailFunction()">Email</button>
<button onclick="contactFunction()">Contact</button>
<button onclick="textareaFunction()">Message</button>
<button onclick="resetElements()">Reset</button>
</div>
<!--
========================================================================================
This Div will be used to display your final form
========================================================================================
-->
<div class="three">
<h2>Your Dynamic Form!</h2>
<form action="#" id="mainform" method="get" name="mainform">
<span id="myForm"></span>
<p></p><input type="submit" value="Submit">
</form>
</div>
<!--
========================================================================================
Footer Div.
========================================================================================
-->
<div class="four">
<p><a href="http://www.a5theory.com/"><img src="images/a5logo.png" alt=""/>A5Theory.com
</a></p>
</div>
</div>
</body>
</html>

dynamicform.js:

var i = 0; /* Set Global Variable i */
function increment(){
i += 1; /* Function for automatic increment of field's "Name" attribute. */
}
/*
---------------------------------------------

Function for removing the form element
---------------------------------------------

*/
function removeElement(parentDiv, childDiv){
if (childDiv == parentDiv){
alert("The parent div cannot be removed.");
}
else if (document.getElementById(childDiv)){
var child = document.getElementById(childDiv);
var parent = document.getElementById(parentDiv);
parent.removeChild(child);
}
else{
alert("Child div has already been removed or does not exist.");
return false;
}
}
/*
----------------------------------------------------------------------------

Functions called upon name text field click

----------------------------------------------------------------------------
*/
function nameFunction(){
var r = document.createElement('span');
var y = document.createElement("INPUT");
y.setAttribute("type", "text");
y.setAttribute("placeholder", "Name");
var g = document.createElement("IMG");
g.setAttribute("src", "delete.png");
increment();
y.setAttribute("Name", "textelement_" + i);
r.appendChild(y);
g.setAttribute("onclick", "removeElement('myForm','id_" + i + "')");
r.appendChild(g);
r.setAttribute("id", "id_" + i);
document.getElementById("myForm").appendChild(r);
}
/*
-----------------------------------------------------------------------------

Functions called upon Email text field click.

------------------------------------------------------------------------------
*/
function emailFunction(){
var r = document.createElement('span');
var y = document.createElement("INPUT");
y.setAttribute("type", "text");
y.setAttribute("placeholder", "Email");
var g = document.createElement("IMG");
g.setAttribute("src", "delete.png");
increment();
y.setAttribute("Name", "textelement_" + i);
r.appendChild(y);
g.setAttribute("onclick", "removeElement('myForm','id_" + i + "')");
r.appendChild(g);
r.setAttribute("id", "id_" + i);
document.getElementById("myForm").appendChild(r);
}
/*
-----------------------------------------------------------------------------

Functions called upon contact text field click.

------------------------------------------------------------------------------
*/
function contactFunction(){
var r = document.createElement('span');
var y = document.createElement("INPUT");
y.setAttribute("type", "text");
y.setAttribute("placeholder", "Contact");
var g = document.createElement("IMG");
g.setAttribute("src", "delete.png");
increment();
y.setAttribute("Name", "textelement_" + i);
r.appendChild(y);
g.setAttribute("onclick", "removeElement('myForm','id_" + i + "')");
r.appendChild(g);
r.setAttribute("id", "id_" + i);
document.getElementById("myForm").appendChild(r);
}
/*
-----------------------------------------------------------------------------

Functions called upon textarea field click.
------------------------------------------------------------------------------*/
function textareaFunction(){
var r = document.createElement('span');
var y = document.createElement("TEXTAREA");
var g = document.createElement("IMG");
y.setAttribute("cols", "17");
y.setAttribute("placeholder", "message..");
g.setAttribute("src", "delete.png");
increment();
y.setAttribute("Name", "textelement_" + i);
r.appendChild(y);
g.setAttribute("onclick", "removeElement('myForm','id_" + i + "')");
r.appendChild(g);
r.setAttribute("id", "id_" + i);
document.getElementById("myForm").appendChild(r);
}
/*
-----------------------------------------------------------------------------

Functions called upon Reset field click.
---------------------------------------------------------------------------------*/
function resetElements(){
document.getElementById('myForm').innerHTML = '';
}

dynamicform.css:

body{
width:960px;
margin:45px auto;
background-color:#f9ebe8
}
form{
width:330px;
border-top:1px dotted #D9D9D9;
margin:10px 180px
}
button{
width:246px;
height:40px;
color:#260de2;
margin-bottom:20px;
margin-left:20px;
background-color: lightsalmon;
}
input{
width:280px;
height:40px;
padding:5px;
margin:20px 0 10px;
border-radius:5px;
border:4px solid #acbfa5
}
input[type = submit]{
width:100px;
background-color: #6f6594;
border-radius:5px;
border:2px solid #b7b7c1;
color: #e2d30d;
}
textarea{
width:280px;
height:70px;
padding:5px;
margin:20px 0 10px;
border-radius:5px;
border:4px solid #acbfa5
}
.four p{
text-align:center;
color:#fff;
padding:15px 0
}
.first p{
padding:15px;
color:#fff
}
.two{
background-color:#fff;
width:290px;
float:left;
height:600px
}
.main_content{
width:960px;
height:auto;
background-color:#fff
}
.two h4{
color:#4C4C4C;
text-align:center
}
.three{
text-align:center;
width:660px;
border-left:1px solid #D0D0D0;
float:left;
background-color:#fff;
color: #e2d30d;
}
.four,.first{
width:960px;
clear:both;
background-color:#D3D3D3;
height:55px
}

In a case of any queries, you can write us at a5theorys@gmail.com we will get back to you ASAP.

Hope! you would have enjoyed this post to dynamic add and removal of form field.

Please feel free to give your important feedbacks in the comment section below.

Have a great time! Sayonara!

contactus-popup-javascript

Contact Us Popup Form Using JavaScript

Hello Friends,

In this blog post, I am going to explain you, how to make contact us popup form using javascript?

What is Contact Us popup form?

A contact us popup forms are the same form that we usually see but the difference is only in their presentation.

popup forms are visible on any trigger event like a button click or link click.

It saves the space in the page as you can easily settle this button or link in your website or web page.

when user or customer click this link or button then they can use this contact us popup form.

This popup form can be manual and automatic as per your requirement. Here we are explaining the functionality where popup form will be open at button click.

Generally, we can have registration, contact us, payment, subscription popup forms on our website.

Software used to develop this functionality:

NetBeans IDE
Xampp Server



What is the procedure to make this contact us popup form using javascript?

This is a very simple process, you just need to follow the below step by step procedure.

Create a project as contact-popup though you can have any similar name.

Now create few files as shown in the image below.

formpopup


You will also need to download an image(cancel symbol 32X32 png) and keep that image in a images folder that you will create in your source file. You can see the image example in the demo form below at the right corner


Now copy and paste the code given below one by one as in the respective file.

formpopup.html:

<!DOCTYPE html>
<html>
<head>
<title>Popup contact us form</title>
<link href="formpopup.css" rel="stylesheet" type="text/css"/>
<script src="formpopup.js" type="text/javascript"></script>
</head>
<!-- Body start point -->
<body id="body" style="overflow:hidden;">
<div id="headerpop">
<!-- Popup Div Start point -->
<div id="popupContact">
<!-- Contact Us Form -->
<form action="#" id="form" method="post" name="form">
<img id="close" src="images/cancel.png" onclick ="div_hide()">
<h2>Contact Us</h2>
<hr>
<input id="name" name="name" placeholder="Name" type="text">
<input id="email" name="email" placeholder="Email" type="text">
<textarea id="msg" name="message" placeholder="Message"></textarea>
<a href="javascript:%20check_empty()" id="submit">Send</a>
</form>
</div>
<!-- Popup Div End point -->
</div>
<!-- popup display button -->
<h1>Click this buttton below to see the popup form</h1>
<button id="popup" onclick="div_show()">Popup</button>
</body>
<!-- Body End point -->
</html>

formpopup.js:

// Validating empty form field
function check_empty() {
if (document.getElementById('name').value == "" || document.getElementById('email').value == "" || document.getElementById('msg').value == "") {
alert("Fill All Fields !");
} else {
document.getElementById('form').submit();
alert("Form Submitted Successfully...");
}
}
//popup display function
function div_show() {
document.getElementById('headerpop').style.display = "block";
}
//popup hide function
function div_hide(){
document.getElementById('headerpop').style.display = "none";
}

formpopup.css:

@import url('https://fonts.googleapis.com/css?family=Zilla+Slab');
/*----------------------------------------------
CSS settings for HTML div Exact Center
------------------------------------------------*/
#headerpop{
width:100%;
height:100%;
opacity:.95;
top:0;
left:0;
display:none;
position:fixed;
background-color:#313131;
overflow:auto
}
img#close {
position:absolute;
right:-14px;
top:-14px;
cursor:pointer
}
div#popupContact {
position:absolute;
left:50%;
top:17%;
margin-left:-202px;
font-family: 'Zilla Slab', serif;
}
form {
max-width:300px;
min-width:250px;
padding:10px 50px;
border:2px solid gray;
border-radius:10px;
font-family:raleway;
background-color:#8a6d6d;
}
p {
margin-top:30px
}
h2 {
background-color:#bcc0d6;
padding:20px 35px;
margin:-10px -50px;
text-align:center;
border-radius:10px 10px 0 0
}
hr {
margin:10px -50px;
border:0;
border-top:1px solid #ccc
}
input[type=text] {
width:82%;
padding:10px;
margin-top:30px;
border:1px solid #ccc;
padding-left:40px;
font-size:16px;
font-family:raleway
}
#name {
background-image:url(../images/name.jpg);
background-repeat:no-repeat;
background-position:5px 7px
}
#email {
background-image:url(../images/email.png);
background-repeat:no-repeat;
background-position:5px 7px
}
textarea {
background-image:url(../images/msg.png);
background-repeat:no-repeat;
background-position:5px 7px;
width:82%;
height:95px;
padding:10px;
resize:none;
margin-top:30px;
border:1px solid lightslategray;
padding-left:40px;
font-size:16px;
font-family:raleway;
margin-bottom:30px
}
#submit {
text-decoration:none;
width:100%;
text-align:center;
display:block;
background-color:skyblue;
color:#fff;
border:1px solid #FFCB00;
padding:10px 0;
font-size:20px;
cursor:pointer;
border-radius:5px
}
span {
color:red;
font-weight:700
}
button {
width:10%;
height:45px;
border-radius:3px;
background-color:skyblue;
color:#fff;
font-family: 'Zilla Slab', serif;
font-size:18px;
cursor:pointer
}

Once you will paste these files into your project then run the html file and you will see the output as shown in the below image.

formpopup1

formpopup2


In a case of any queries, you can write us at a5theorys@gmail.com we will get back to you ASAP.

Hope! you would have enjoyed this post to build the contact us popup form.

Please feel free to give your important feedbacks in the comment section below.

Have a great time! Sayonara!

sliding contact form using javascript

How to make sliding contact form using javascript?

Hello Friends,

In this blog post, I am going to let you know how to develop a sliding contact form or Enquiry form?

What is this sliding contact form, is it different from the simple contact us form?

No, it has no difference in terms of functionality, whereas it is named as sliding contact form because of its position and opening and closing functionality.

This is known as Enquiry form, contact us form and etc…

These sliding forms are normally fixed either at the left or right side of the website or web page with a button showing on the screen. And when anyone clicks this button then the sliding form opens or comes out and when you click again to the button then it closes again.

What is the benefit of this sliding contact form?

This sliding form can maximize your conversion in terms of sales or product.

A user can easily ask the inquiry related to your product and service and thus it increases the chance to get a new customer.

The customer gets easy to communicate with this sliding form at the same screen rather than finding the contact us form at another tab or page.

It’s a quick interface between your users and customers and it gives a better result as compared to the traditional contact us form.

How will sliding contact form look on the website page?

Once you will open your website then it will appear like as shown in the below image. when you will click the button the contact form or inquiry form will be open.

enquiry1

This is your Enquiry or contacts us form, here you can fill the information and message and can send your message. See the below image for the same.

enquiry2


Code for developing this sliding Contact form:

Below are the code files are given for this contact form, you can use them as per your comfort along with your platform and technology.

formslider.html:

<!DOCTYPE html>
<html>
<head>
<title>Slide Enquiry Form - Demo</title>
<link href="formslider.css" rel="stylesheet" type="text/css"/>
<link href="https://fonts.googleapis.com/css?family=Exo+2" rel="stylesheet">
<script src="formslider.js" type="text/javascript"></script>
<body>
<div id="title">
<h3>Click Enquiry button to slide the form out</h3>
</div>
<!-- Sliding div -->
<div id="formslider" style="right:-342px;">
<div id="sidebar" onclick="open_panel()"><img src="images/contact.png"></div>
<div id="header">
<h2>Contact Form</h2>
<p>This is my form.Please fill it out.It's awesome!</p>
<input name="dname" type="text" value="Your Name">
<input name="demail" type="text" value="Your Email">
<h4>Query type</h4>
<select>
<option>General Query</option>
<option>Presales</option>
<option>Technical</option>
<option>Others</option>
</select>
<textarea>Message</textarea>
<button>Submit</button>
</div>
</div>
<!--Ends of sliding divs -->
</body>
</html>

formslider.js:

/*
------------------------------------------------------------
Function to activate the slider button for openning the form.
------------------------------------------------------------
*/
function open_panel() {
slideIt();
var a = document.getElementById("sidebar");
a.setAttribute("id", "sidebar1");
a.setAttribute("onclick", "close_panel()");
}
/*
------------------------------------------------------------
Function to slide the sidebar form.
------------------------------------------------------------
*/
function slideIt() {
var slidingDiv = document.getElementById("formslider");
var stopPosition = 0;
if (parseInt(slidingDiv.style.right) < stopPosition) {
slidingDiv.style.right = parseInt(slidingDiv.style.right) + 2 + "px";
setTimeout(slideIt, 1);
}
}
/*
------------------------------------------------------------
Function to activate form button to shut the slider
------------------------------------------------------------
*/
function close_panel() {
slideIn();
a = document.getElementById("sidebar1");
a.setAttribute("id", "sidebar");
a.setAttribute("onclick", "open_panel()");
}
/*
------------------------------------------------------------
Function to slide the sidebar form
------------------------------------------------------------
*/
function slideIn() {
var slidingDiv = document.getElementById("formslider");
var stopPosition = -342;
if (parseInt(slidingDiv.style.right) > stopPosition) {
slidingDiv.style.right = parseInt(slidingDiv.style.right) - 2 + "px";
setTimeout(slideIn, 1);
}
}

formslider.css

body {
overflow:hidden;
width:960px;
margin:10px auto
}
p {
border-bottom:1px dotted #d8d8d8;
padding-bottom:15px;
font-size:17px
}
#formslider {
width:500px;
top:100px;
position:absolute
}
#header {
width:260px;
height:520px;
position:absolute;
right:0;
border:1px solid #d8d8d8;
margin-left:40px;
padding:20px 40px;
border-radius:3px;
box-shadow:0 0 8px gray;
background-color: lightgoldenrodyellow;
}
#sidebar {
position:absolute;
top:180px;
left:113px;
box-shadow:0 0 8px gray
}
#sidebar1 {
position:absolute;
top:180px;
left:113px;
box-shadow:0 0 8px gray
}
h3 {
font-family: 'Exo 2', sans-serif;
}
input[type=text] {
margin-top:10px;
padding:6px;
width:100%;
font-size:15px;
border-radius:2px;
border:3px solid #98d0f1
}
h4 {
font-size:15px
}
div#title {
position:absolute;
top:300px;
left:650px
}
select {
padding:6px;
width:100%;
font-size:15px;
border-radius:2px;
border:3px solid #98d0f1
}
textarea {
padding:6px;
font-size:15px;
border-radius:2px;
border:3px solid #98d0f1;
margin-top:10px;
height:80px;
width:100%
}
button {
background:#2bc1f2;
border:none;
color:#fff;
width:100%;
font-size:22px;
font-weight:bolder;
padding:8px 0;
border-radius:3px;
cursor:pointer;
margin-top:25px
}

In a case of any queries, you can write us at a5theorys@gmail.com we will get back to you ASAP.

Hope! you would have enjoyed this post to develop a sliding contact form.

Please feel free to give your important feedbacks in the comment section below.

Have a great time! Sayonara!

contact-form-jquery

Contact Form Using JQuery

Hello Friends,

In this blog post, I am going to let you know about how to make contact form using Jquery?

A contact form is a very important part in your website which provides an interface between you and your users or customer.

If you are looking to make an attractive contact form then you are landed at the right place.

Here we will teach you how to make this contact form with full code support.


How to make this contact Form?

This is a very simple process, you just to follow the step by step procedure given below to build a beautiful contact form.

Software used to run this code:

NetBeans IDE,
Xampp Server

Though you can use any suitable platform or software as per your comfort.


Create a project name as contact_form.

If you have no idea how to create a project using NetBeans then please go through the below link.

How to make your first project using NetBeans?

Once you create a project then create the below-given files into your project source file and copy & paste the code as

given below. After this run your project and you will see a attractive contact form.  See the below image.

cont1


The code files are given below:

cform.html:

<!DOCTYPE html>
<html>
<head>
<title>Contact Form using JavaScript</title> <!-- Include CSS file here -->
<link href="cform.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div id="main">
<h1>Contact Form using JavaScript</h1>
<div id="sample_cform"></div>
<!-- Include Java Script file here -->
<script src="cform.js" type="text/javascript"></script>
</div>
</body>
</html>

cform.js:

// Here we are fetching HTML Elements in Variables by ID.
var x = document.getElementById("sample_cform");
var createform = document.createElement('form'); // Create New Element Form
createform.setAttribute("action", ""); // Setting Action Attribute on Form
createform.setAttribute("method", "post"); // Setting Method Attribute on Form
x.appendChild(createform);

var heading = document.createElement('h2'); //Here we are giving Heading of Form
heading.innerHTML = "Contact Form ";
createform.appendChild(heading);

var line = document.createElement('hr'); // Here we are Giving Horizontal Row After Heading
createform.appendChild(line);

var linebreak = document.createElement('br');
createform.appendChild(linebreak);

var namelabel = document.createElement('label'); // Here we Create Label for Name Field
namelabel.innerHTML = "Your Name : "; // Set Field Labels
createform.appendChild(namelabel);

var inputelement = document.createElement('input'); // Here we Create Input Field for Name
inputelement.setAttribute("type", "text");
inputelement.setAttribute("name", "dname");
createform.appendChild(inputelement);

var linebreak = document.createElement('br');
createform.appendChild(linebreak);

var emaillabel = document.createElement('label'); // Here we Create Label for E-mail Field
emaillabel.innerHTML = "Your Email : ";
createform.appendChild(emaillabel);

var emailelement = document.createElement('input'); // Here we Create Input Field for E-mail
emailelement.setAttribute("type", "text");
emailelement.setAttribute("name", "demail");
createform.appendChild(emailelement);

var emailbreak = document.createElement('br');
createform.appendChild(emailbreak);

var messagelabel = document.createElement('label'); // Here we Append Textarea
messagelabel.innerHTML = "Your Message : ";
createform.appendChild(messagelabel);

var texareaelement = document.createElement('textarea');
texareaelement.setAttribute("name", "dmessage");
createform.appendChild(texareaelement);

var messagebreak = document.createElement('br');
createform.appendChild(messagebreak);

var submitelement = document.createElement('input'); // Here we Append Submit Button
submitelement.setAttribute("type", "submit");
submitelement.setAttribute("name", "dsubmit");
submitelement.setAttribute("value", "Submit");
createform.appendChild(submitelement);

cform.css:

// we have used the Google Fonts with the below import link.
@import url('https://fonts.googleapis.com/css?family=Spectral');
div#main{
width:830px;
height:650px;
margin:0 auto;
font-family: 'Spectral', serif;
}
div#sample_cform{
text-align:center;
border:1px solid #ccc;
width:300px;
padding:0 50px 15px;
margin-top:20px;
box-shadow:0 0 15px;
border-radius:6px;
float:left;
background-color: lightgray;
margin-left: 450px;

}

#main h1{
margin-bottom: 5px;
margin-left: 435px;
}
hr{
margin-top:-5px
}
label{
float:left;
font-size:16px
}
input[type="text"]{
width:100%;
margin-top:10px;
height:35px;
margin-bottom:25px;
padding:10px;
border:3px solid darkslateblue;
}
textarea{
width:100%;
border:3px solid darkslateblue;
padding:10px;
margin-bottom:25px;
margin-top:10px;
height:100px;
resize:none
}
input[type="submit"]{
width:100%;
padding:10px 45px;
background-color:#2BC1F2;
border:none;
color:#fff;
font-size:18px;
font-weight:700;
cursor:pointer;
font-family: 'Spectral', serif;
margin-left:10px;

}

In a case of any queries, you can write us at a5theorys@gmail.com we will get back to you ASAP.

Hope! you would have enjoyed this post to design a beautiful contact form.

Please feel free to give your important feedbacks in the comment section below.

Have a great time! Sayonara!

progress-bar

Progress Bar: Show Progress Bar On Form Submission Using JQuery.

Hello Friends,

In this blog post, I will let you know, how to display progress bar on Form submission using Jquery, PHP, HTML, CSS?

What is the use of this progress bar?

You would have seen this progress bar on several sites while submitting the form, making payments and etc.

Simply progress bar is used to keep the user engaged with the web page or form until their process gets completed.

The operation like data insertion and data extraction from the database might take little bit time to execute as this is the process of server interaction,

So in a case, if we don’t have any progress bar, a user might leave the web page before the execution of the process.

So it is very important to have a progress bar with the submission of the request to assure the user that their request has been completed.

This becomes very important when it comes to the payment forms where the user can not switch the page before the process gets executed.

so we should always try to use progress bar in case of sensitive information from or payment form.

Software Used:

Netbeans.
Xampp Server, though you can also use wamp server

Note: You can use any platform which supports all the codes used to make this progress Bar.

What is the process to make this Progress Bar?

This is a very simple process to make progress bar, you just need to follow the step by step procedure given below.

Here We are using the same name as we have used in making the project, you can change the name of project  and files but in this case, remember to make changes in the code files accordingly where ever need to change the name.

1. Make a PHP project name ‘test’

And make a database in your Xampp server named as a test. Make a table Employee under test database with the given below fields in the image.

database

2. Make the files as shown in the below image.

progressbarimg2

Now copy the below code one by one and paste them in the respective file or folder inside your project.


progressbar.html:

<!DOCTYPE html>
<html>
<head>
<title>Displaying Progress Bar on Form Submission</title>
<!-- Include Google font here -->
<link href="https://fonts.googleapis.com/css?family=Spectral" rel="stylesheet"><!-- Include CSS file here -->
<link href="progressbar.css" rel="stylesheet" type="text/css"/>
<!-- Include jQuery file here -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="progressbar.js" type="text/javascript"></script>
</head>
<body>
<div id="container">
<form id="form" action="" method="post">
<h1>Displaying Progress Bar on Form Submission</h1>
<label>Employee Name :</label>
<input type="text" name="dname" id="name"/>
<label>Employee Email :</label>
<input type="text" name="demail" id="email"/>
<label>Employee Mobile No. :</label>
<input type="text" name="dmobile" id="mobile"/>
<label>Employee Address :</label><br />
<input type="text" name="daddress" id="address"/>
<img id="loading" src="images/5.gif" /> <!-- Loading Image -->
<input type="button" id="submit" name="submit" value="Submit" />
</form>
</div>
</body>
</html>

Progressbar.php:

<?php
//Initializing connection variable with server_name, user_name, password.
$con = mysql_connect("localhost", "root", "");
//Selecting Database
$db = mysql_select_db("test", $con);
//Fetching values from url and storing it in PHP variables.
$name=$_POST['name'];
$email=$_POST['email'];
$mobile=$_POST['mobile'];
$address=$_POST['address'];
if(($_POST['name']=='')
||($_POST['email']=='')
||($_POST['mobile']=='')
||($_POST['address']==''))
{
echo "Please Enter all the Fields" ;
} else{
// My-SQL query for inerting PHP variable values in table of selected database.
$query=mysql_query("insert into employee (name, email, mobile, address) values ('$name','$email','$mobile','$address')");
if($query){

sleep ( 5 ); // we use this function here to show you the effect of progressbar as our form data is very small.
echo "Your Form has been submitted successfully";
}else{
echo "Error...!!" ;
}
}
mysql_close($con); // Closing Connecion with server
?>

progress.js:

$(document).ready(function() {
$("#submit").click(function() {
// To Display progress bar
$("#loading").show();
var name = $("#name").val();
var email = $("#email").val();
var mobile = $("#mobile").val();
var address = $("#address").val();
// Here we are transfering the form information without refresshing the page.
$.post("progressbar.php", {
name: name,
email: email,
mobile: mobile,
address: address
}, function(status) {
$("#loading").hide(); // To Hide progress bar
alert(status);
});
});
});

progress.css:

#container{
width:960px;
height:610px;
margin:50px auto
}

form{
width:345px;
padding:0 50px 20px;
background: linear-gradient(#b59999,#9e9c8e);
border:1px solid #ccc;
box-shadow:0 0 5px;
font-family: 'Spectral', serif;
float:left;
margin-top:10px
}
h1{
text-align:center;
text-shadow:1px 5px 22px gray
}
hr{
border:0;
border-bottom:1.5px solid #ccc;
margin-top:-10px;
margin-bottom:30px
}
label{
font-size:17px
}
#loading{
display:none;
margin-left:145px
}
input{
width:94%;
padding:10px;
margin:6px 0 20px;
border:none;
box-shadow:0 0 5px
}
input#submit{
width:100%;
margin-top:20px;
font-size:18px;
background:linear-gradient(#22abe9 5%,#36caf0 100%);
border:1px solid #0F799E;
color:#fff;
font-weight:700;
cursor:pointer;
text-shadow:0 1px 0 #13506D
}
input#submit:hover{
background:linear-gradient(#36caf0 5%,#22abe9 100%)
}

Image:

here you will also need to include one image in the image folder as shown in above file hierarchy.
You just download one gif progress bar image of size 31×31 and keep it in the image folder inside your project.


So once you will place all code at the place then you are almost ready to run your project.

Just run the progress.html file and you will get the form shown below in the image in the browser.

Here when you will fill all the information in the form and then will click on the submit button, you will see a

progress bar just above the submit button. This progress bar will disappear when your form will be submitted successfully.

progressbarimg1


In a case of any queries, you can write us at a5theorys@gmail.com we will get back to you ASAP.

Hope! you would have enjoyed this post of making progress bar using jquery.

Please feel free to give your important feedbacks in the comment section below.

Have a great time! Sayonara!