How to Create Magical Signup with jQuery and CSS

Today, I will teach you how to create a magical signup with jQuery and CSS. The features of this project contains a step by step registration of the web user in the form .

This is the best way on how to enlarge the registration on a website with a small amoun of space to use.

I will use bootstrap template for the design of the form in the page.

Let’s Begin:

Create a landing page. Name it “index.php“.

<div class="highlight">
<pre><code class="language-php">&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
 &lt;title&gt;Registration jQuery&lt;/title&gt;
 &lt;link href="css/bootstrap.min.css" rel="stylesheet" type="text/css"&gt;
 &lt;style type="text/css"&gt;

 
 #pnl2,
 #pnl3,
 #step2,
 #step3{
 display:none;

 } 
 &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
 &lt;div class='container' id="container"&gt;
 &lt;div&gt;
 &lt;h3&gt;Registration&lt;/h3&gt;
 &lt;/div&gt;
 &lt;form action="" method="post" role="form" style="width:50%"&gt;
 &lt;!-- panel1 --&gt;
 &lt;div class="panel panel-default" id="pnl1"&gt;
 &lt;div class="panel-heading"&gt;
 step 1
 &lt;/div&gt;&lt;!-- panel body --&gt;
 &lt;div class="panel-body"&gt;
 &lt;div class="form-group"&gt;
 &lt;label class="sr-only" for="form-Email"&gt;Email&lt;/label&gt;
 &lt;input class="form-Email form-control" id="form-Email"
 name="form-Email" placeholder="Email address..." type=
 "email"&gt;
 &lt;/div&gt;
 &lt;div class="form-group"&gt;
 &lt;label class="sr-only" for=
 "form-password"&gt;Password&lt;/label&gt; &lt;input class=
 "form-password form-control" id="form-password" name=
 "form-password" placeholder="Password..." type=
 "password"&gt;
 &lt;/div&gt;
 &lt;/div&gt;&lt;!-- end panel body- --&gt;
 &lt;/div&gt;&lt;!-- end panel 1 --&gt;
 &lt;div&gt;
 &lt;button class="btn btn-default buttons" id="step1" type=
 "submit"&gt;Continue&lt;/button&gt;
 &lt;/div&gt;
 &lt;div class="panel panel-primary" id="pnl2"&gt;
 &lt;div class="panel-heading"&gt;
 step 2
 &lt;/div&gt;&lt;!-- panel body --&gt;
 &lt;div class="panel-body"&gt;
 &lt;div class="form-group"&gt;
 &lt;label class="sr-only" for=
 "form-firstname"&gt;Firstname&lt;/label&gt; &lt;input class=
 "form-firstname form-control" id="form-firstname" name=
 "form-firstname" placeholder="firstname..." type=
 "text"&gt;
 &lt;/div&gt;
 &lt;div class="form-group"&gt;
 &lt;label class="sr-only" for=
 "form-Lastname"&gt;Lastname&lt;/label&gt; &lt;input class=
 "form-Lastname form-control" id="form-Lastname" name=
 "form-Lastname" placeholder="Lastname..." type="text"&gt;
 &lt;/div&gt;
 &lt;/div&gt;&lt;!-- end panel body- --&gt;
 &lt;/div&gt;&lt;!-- end panel 2 --&gt;
 &lt;div&gt;
 &lt;button class="btn btn-primary buttons" id="step2" type=
 "submit"&gt;Continue&lt;/button&gt;
 &lt;/div&gt;
 &lt;div class="panel panel-success" id="pnl3"&gt;
 &lt;div class="panel-heading"&gt;
 step 3
 &lt;/div&gt;&lt;!-- panel body --&gt;
 &lt;div class="panel-body"&gt;
 &lt;div class="form-group"&gt;
 &lt;label class="sr-only" for=
 "form-Address"&gt;Address&lt;/label&gt; &lt;input class=
 "form-Address form-control" id="form-Address" name=
 "form-Address" placeholder="Address..." type="text"&gt;
 &lt;/div&gt;
 &lt;div class="form-group"&gt;
 &lt;label class="sr-only" for="form-Contact"&gt;Contact
 No.&lt;/label&gt; &lt;input class="form-Contact form-control"
 id="form-Contact" name="form-Contact" placeholder=
 "Contact Number...." type="text"&gt;
 &lt;/div&gt;
 &lt;/div&gt;&lt;!-- end panel body- --&gt;
 &lt;/div&gt;&lt;!-- end panel 3 --&gt;
 &lt;div&gt;
 &lt;button class="btn btn-success buttons" id="step3" type=
 "submit" value=" Submit "&gt;Submit&lt;/button&gt;
 &lt;/div&gt;
 &lt;/form&gt;
 &lt;/div&gt;
 &lt;div class='container page-header' id="display"&gt;&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre>
</div>

Create a method for changing the fields of a form.

<div class="highlight">
<pre>&lt;script type = "text/javascript" src = "jquery/jquery.min.js" &gt; &lt;/script&gt;
&lt;script type="text/javascript"&gt;
$(function(){$(".buttons").click(function() {

 $("#display ").html("&lt;h1&gt; You are now successfully registered. &lt;/h1&gt;");

}
/ * disable the submitting of a form * /
return false;
});

}); 

&lt;/script&gt;</pre>
</div>

For all students who need programmer for your thesis system or anyone who needs a sourcecode in any programming languages. You can contact me @ :

Email – [email protected]
Mobile No. – 09305235027 – tnt

Download Sourcecode

Leave a Comment Cancel reply