content logo

Bootstrap Forms:

Registration Form with Moving Particles

The first step of having a website is luring people in your site but there is a whole other aspect to it as well. You need to generate enough interest so that when the visitors click on your website, they are willing to register on your website either to use your services, get notifications, email updates, newsletters, etc. Convincing the visitors to become a member in your site is rather difficult so you need a plan for after it as well. You need good content and also a nice registration form to invite them in. these registration forms should be easy on the eyes and quick to complete. It should also be clear what information is needed so the visitor doesn’t get frustrated during the process and abandon the website.

In this post, we have a dynamic registration form for you. It is perfect if you need the users to create an account on your website. It is quick and to the point. It features a nice background, great animations and particles. The registration form particles make it seem special and attract the users’ attention. With the help of Bootstrap particle.js you can design a beautiful registration form. You can use the Bootstrap form dynamic effect template provided below to help you get things started and customize it if you felt like a change was needed.

 

#

Bootstrap Form Dynamic Effect

#

Registration Form Particles

#

Dynamic Registration Form

#

Bootstrap Particle.js

<!-- This script got from frontendfreecode.com -->
<div id="home" class="jumbotron jumbotron-register">
	<div id="particles-js"><canvas class="particles-js-canvas-el" width="1409" height="456" style="width: 100%; height: 100%;"></canvas></div><!-- /.particles div -->
	<div class="container center-vertically-holder">
		<div class="center-vertically">
			<div class="col-sm-7 col-lg-6 mt40-xs">
				<h1 class="mb30 no-margin-top scaleReveal" data-sr-id="45" style="; visibility: visible;  -webkit-transform: translateY(0) scale(1); opacity: 1;transform: translateY(0) scale(1); opacity: 1;-webkit-transition: -webkit-transform 1.5s cubic-bezier(0.6, 0.2, 0.1, 1) 0.05s, opacity 1.5s cubic-bezier(0.6, 0.2, 0.1, 1) 0.05s; transition: transform 1.5s cubic-bezier(0.6, 0.2, 0.1, 1) 0.05s, opacity 1.5s cubic-bezier(0.6, 0.2, 0.1, 1) 0.05s; ">
					 <strong>Header</strong> 
				</h1>
				<p class="bottomReveal" data-sr-id="1" style="">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras est urna, imperdiet eget sem at, pellentesque cursusiz elit. Etiam id ante et elit interdum sollicitudin.</p>
				<p class="mb30 bottomReveal" data-sr-id="2" style="">Lorem ipsum dolor sit amet, consectet adipiscing elit. Cras est urna, imperd eget sem atez.</p>
			</div>

			<div class="col-sm-5 col-lg-5 col-lg-offset-1 mt40-xs">
				<form role="form" id="register_form" class="register-form mb40-xs">
                    <h3 class="no-margin-top mb20">Register For Free</h3>
                    <div class="form-group">
                        <input type="text" class="form-control" placeholder="Full name" required="required">
                    </div>
                    <div class="form-group">
                        <input type="text" class="form-control" placeholder="Email Address" required="required">
                    </div>
                    <div class="form-group">
                        <input type="text" class="form-control" placeholder="User name" required="required">
                    </div>
                    <div class="form-group">
                        <input type="text" class="form-control" placeholder="Password" required="required">
                    </div>
                    <div class="form-group no-margin-bottom mt20">
                        <button type="submit" class="btn btn-primary">Save</button>
                    </div>
                </form>
			</div><!-- /.column -->
		</div><!-- /.vertical center -->
	</div><!-- /.container -->
</div><a style="font-size: 8pt; text-decoration: none" target="_blank" href="http://frontendfreecode.com">Free Frontend</a>
                                                                            
body{
    margin-top:20px;
    background:#eee;
}
/* =Jumbotron Register
-------------------------------------------------------------- */
.jumbotron.jumbotron-register {
    height: 100%;
    width: 100%;
    font-family: 'Roboto', sans-serif;
    color: #fff;
    padding-top: 0;
    padding-bottom: 0;
    position: relative;
    margin:0;
}

.jumbotron.jumbotron-register a {
    color: #fff;
}

.register-form {
    background-color: #FFFFFF;
    padding: 40px;
    border-radius: 5px;
    border: 2px solid #eee;
}

.register-form h3 {
    color: #414141;
}

.jumbotron.jumbotron-register h1 { 
    font-size:59px; 
}

/* =Hello Intro
-------------------------------------------------------------- */
#hello-intro h2 {
    font-family: 'Montserrat', sans-serif;
	font-weight: 700;
	font-size: 42px;
	color: #fff;
	text-transform: uppercase;
	border-bottom: 1px solid #fff;
	padding-bottom: 4px;
	display: inline-block;
}

#hello-intro h3 {
	font-family: 'Roboto', sans-serif;
	font-weight: 100;
	font-size: 25px;
	color: #b0b0b0;
}

#hello-intro h3 strong {
	font-weight: 300;
}

#particles-js {
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url(http://aliensix.com/particles-1.3/HTML/css/style.css);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 50% 50%;
    background: #6819e8;
    background: -moz-linear-gradient(left, #6819e8 0%, #7437d0 35%, #615fde 68%, #6980f2 100%);
    background: -webkit-linear-gradient(left, #6819e8 0%,#7437d0 35%,#615fde 68%,#6980f2 100%);
    background: linear-gradient(to right, #6819e8 0%,#7437d0 35%,#615fde 68%,#6980f2 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6819e8', endColorstr='#6980f2',GradientType=1 );
}
particlesJS("particles-js", {
    "particles": {
    	"number": {
			"value": 80,
			"density": {
				"enable": true,
				"value_area": 800
			}
		},
		"color": {
			"value": "#ffffff"
		},
		"shape": {
			"type": "circle",
			"stroke": {
				"width": 0,
				"color": "#000000"
			},
			"polygon": {
				"nb_sides": 5
			},
			"image": {
				"src": "img/github.svg",
				"width": 100,
				"height": 100
			}
		},
		"opacity": {
			"value": 0.5,
			"random": false,
			"anim": {
				"enable": false,
				"speed": 1,
				"opacity_min": 0.1,
				"sync": false
			}
		},
		"size": {
			"value": 3,
			"random": true,
			"anim": {
				"enable": false,
				"speed": 40,
				"size_min": 0.1,
				"sync": false
			}
		},
		"line_linked": {
			"enable": true,
			"distance": 150,
			"color": "#ffffff",
			"opacity": 0.4,
			"width": 1
		},
		"move": {
			"enable": true,
			"speed": 6,
			"direction": "none",
			"random": false,
			"straight": false,
			"out_mode": "out",
			"bounce": false,
			"attract": {
				"enable": false,
				"rotateX": 600,
				"rotateY": 1200
			}
		}
	},
	"interactivity": {
		"detect_on": "canvas",
		"events": {
			"onhover": {
				"enable": true,
				"mode": "grab"
			},
			"onclick": {
				"enable": true,
				"mode": "push"
			},
			"resize": true
		},
		"modes": {
			"grab": {
				"distance": 140,
				"line_linked": {
					"opacity": 1
				}
			},
			"bubble": {
				"distance": 400,
				"size": 40,
				"duration": 2,
				"opacity": 8,
				"speed": 3
			},
			"repulse": {
				"distance": 200,
				"duration": 0.4
			},
			"push": {
				"particles_nb": 4
			},
			"remove": {
				"particles_nb": 2
			}
		}
	},
	"retina_detect": true
});
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script> 
<script src="http://threejs.org/examples/js/libs/stats.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- This script got from frontendfreecode.com -->

<link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script> 
<script src="http://threejs.org/examples/js/libs/stats.min.js"></script>
<style>
body{
    margin-top:20px;
    background:#eee;
}
/* =Jumbotron Register
-------------------------------------------------------------- */
.jumbotron.jumbotron-register {
    height: 100%;
    width: 100%;
    font-family: 'Roboto', sans-serif;
    color: #fff;
    padding-top: 0;
    padding-bottom: 0;
    position: relative;
    margin:0;
}

.jumbotron.jumbotron-register a {
    color: #fff;
}

.register-form {
    background-color: #FFFFFF;
    padding: 40px;
    border-radius: 5px;
    border: 2px solid #eee;
}

.register-form h3 {
    color: #414141;
}

.jumbotron.jumbotron-register h1 { 
    font-size:59px; 
}

/* =Hello Intro
-------------------------------------------------------------- */
#hello-intro h2 {
    font-family: 'Montserrat', sans-serif;
	font-weight: 700;
	font-size: 42px;
	color: #fff;
	text-transform: uppercase;
	border-bottom: 1px solid #fff;
	padding-bottom: 4px;
	display: inline-block;
}

#hello-intro h3 {
	font-family: 'Roboto', sans-serif;
	font-weight: 100;
	font-size: 25px;
	color: #b0b0b0;
}

#hello-intro h3 strong {
	font-weight: 300;
}

#particles-js {
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url(http://aliensix.com/particles-1.3/HTML/css/style.css);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 50% 50%;
    background: #6819e8;
    background: -moz-linear-gradient(left, #6819e8 0%, #7437d0 35%, #615fde 68%, #6980f2 100%);
    background: -webkit-linear-gradient(left, #6819e8 0%,#7437d0 35%,#615fde 68%,#6980f2 100%);
    background: linear-gradient(to right, #6819e8 0%,#7437d0 35%,#615fde 68%,#6980f2 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6819e8', endColorstr='#6980f2',GradientType=1 );
}
</style>

</head>
<body>
<div id="home" class="jumbotron jumbotron-register">
	<div id="particles-js"><canvas class="particles-js-canvas-el" width="1409" height="456" style="width: 100%; height: 100%;"></canvas></div><!-- /.particles div -->
	<div class="container center-vertically-holder">
		<div class="center-vertically">
			<div class="col-sm-7 col-lg-6 mt40-xs">
				<h1 class="mb30 no-margin-top scaleReveal" data-sr-id="45" style="; visibility: visible;  -webkit-transform: translateY(0) scale(1); opacity: 1;transform: translateY(0) scale(1); opacity: 1;-webkit-transition: -webkit-transform 1.5s cubic-bezier(0.6, 0.2, 0.1, 1) 0.05s, opacity 1.5s cubic-bezier(0.6, 0.2, 0.1, 1) 0.05s; transition: transform 1.5s cubic-bezier(0.6, 0.2, 0.1, 1) 0.05s, opacity 1.5s cubic-bezier(0.6, 0.2, 0.1, 1) 0.05s; ">
					 <strong>Header</strong> 
				</h1>
				<p class="bottomReveal" data-sr-id="1" style="">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras est urna, imperdiet eget sem at, pellentesque cursusiz elit. Etiam id ante et elit interdum sollicitudin.</p>
				<p class="mb30 bottomReveal" data-sr-id="2" style="">Lorem ipsum dolor sit amet, consectet adipiscing elit. Cras est urna, imperd eget sem atez.</p>
			</div>

			<div class="col-sm-5 col-lg-5 col-lg-offset-1 mt40-xs">
				<form role="form" id="register_form" class="register-form mb40-xs">
                    <h3 class="no-margin-top mb20">Register For Free</h3>
                    <div class="form-group">
                        <input type="text" class="form-control" placeholder="Full name" required="required">
                    </div>
                    <div class="form-group">
                        <input type="text" class="form-control" placeholder="Email Address" required="required">
                    </div>
                    <div class="form-group">
                        <input type="text" class="form-control" placeholder="User name" required="required">
                    </div>
                    <div class="form-group">
                        <input type="text" class="form-control" placeholder="Password" required="required">
                    </div>
                    <div class="form-group no-margin-bottom mt20">
                        <button type="submit" class="btn btn-primary">Save</button>
                    </div>
                </form>
			</div><!-- /.column -->
		</div><!-- /.vertical center -->
	</div><!-- /.container -->
</div><div id="bcl"><a style="font-size:8pt;text-decoration:none;" href="http://www.devanswer.com">Free Frontend</a></div>
<script>
particlesJS("particles-js", {
    "particles": {
    	"number": {
			"value": 80,
			"density": {
				"enable": true,
				"value_area": 800
			}
		},
		"color": {
			"value": "#ffffff"
		},
		"shape": {
			"type": "circle",
			"stroke": {
				"width": 0,
				"color": "#000000"
			},
			"polygon": {
				"nb_sides": 5
			},
			"image": {
				"src": "img/github.svg",
				"width": 100,
				"height": 100
			}
		},
		"opacity": {
			"value": 0.5,
			"random": false,
			"anim": {
				"enable": false,
				"speed": 1,
				"opacity_min": 0.1,
				"sync": false
			}
		},
		"size": {
			"value": 3,
			"random": true,
			"anim": {
				"enable": false,
				"speed": 40,
				"size_min": 0.1,
				"sync": false
			}
		},
		"line_linked": {
			"enable": true,
			"distance": 150,
			"color": "#ffffff",
			"opacity": 0.4,
			"width": 1
		},
		"move": {
			"enable": true,
			"speed": 6,
			"direction": "none",
			"random": false,
			"straight": false,
			"out_mode": "out",
			"bounce": false,
			"attract": {
				"enable": false,
				"rotateX": 600,
				"rotateY": 1200
			}
		}
	},
	"interactivity": {
		"detect_on": "canvas",
		"events": {
			"onhover": {
				"enable": true,
				"mode": "grab"
			},
			"onclick": {
				"enable": true,
				"mode": "push"
			},
			"resize": true
		},
		"modes": {
			"grab": {
				"distance": 140,
				"line_linked": {
					"opacity": 1
				}
			},
			"bubble": {
				"distance": 400,
				"size": 40,
				"duration": 2,
				"opacity": 8,
				"speed": 3
			},
			"repulse": {
				"distance": 200,
				"duration": 0.4
			},
			"push": {
				"particles_nb": 4
			},
			"remove": {
				"particles_nb": 2
			}
		}
	},
	"retina_detect": true
});
</script>

</body>
</html>
Preview