React js example. Highlighted contact form

Preview Code

1. First, we need fresh reactjs setup, and for that, we need to run below commands into out terminal, and also we should have latest node version installed on our system:

npx create-react-app my-awesome-project

cd my-awesome-project

npm start

2. Now we need to run below commands into our project terminal to get bootstrap and related modules into our reactjs application:

npm install [email protected] --save

npm start //For start project again

3. Finally for the main output, we need to add below code into our my-awesome-project/src/App.js file or if you have fresh setup then you can replace my-awesome-project/src/App.js file code with below code:

import React from 'react';
import './App.css';
import 'bootstrap/dist/css/bootstrap.min.css';


function App() {
  
	return (
		<div>
			<link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css"/>
<div class="container bootstrap snippets bootdey">
    <section id="contact" class="gray-bg padding-top-bottom">
    	<div class="container bootstrap snippets bootdey">
            <div class="row">
				<form id="Highlighted-form" class="col-sm-6 col-sm-offset-3" action="contact.php" method="post" novalidate="">
					
					<div class="form-group">
					  <label class="control-label" for="contact-name">Name</label>
					  <div class="controls">
						<input id="contact-name" name="contactName" placeholder="Your name" class="form-control requiredField Highlighted-label" data-new-placeholder="Your name" type="text" data-error-empty="Please enter your name"/>
						<i class="fa fa-user"></i>
					  </div>
					</div>
					
					<div class="form-group">
					  <label class="control-label" for="contact-mail">Email</label>
					  <div class=" controls">
						<input id="contact-mail" name="email" placeholder="Your email" class="form-control requiredField Highlighted-label" data-new-placeholder="Your email" type="email" data-error-empty="Please enter your email" data-error-invalid="Invalid email address"/>
						<i class="fa fa-envelope"></i>
					  </div>
					</div>
					<div class="form-group">
					  <label class="control-label" for="contact-message">Message</label>
						<div class="controls">
							<textarea id="contact-message" name="comments" placeholder="Your message" class="form-control requiredField Highlighted-label" data-new-placeholder="Your message" rows="6" data-error-empty="Please enter your message"></textarea>
							<i class="fa fa-comment"></i>
						</div>
					</div>
					<p><button name="submit" type="submit" class="btn btn-info btn-block" data-error-message="Error!" data-sending-message="Sending..." data-ok-message="Message Sent"><i class="fa fa-location-arrow"></i>Send Message</button></p>
					<input type="hidden" name="submitted" id="submitted" value="true"/>	
				</form>
			</div>	
		</div>	
	</section>
    </div>                    
		</div>
	);
}
export default App;

4. Now we need to add below code into our my-awesome-project/src/App.css file :

                       
body{
    background:#EEEEEE;    
}

.contact-item h2{
    font-size:18px;
    font-weight:600;
    margin-bottom:10px;
}

.contact-item .icon{
    display:block;
    font-size:48px;
    color:#5cc9df;
    text-shadow:-2px 2px 0 rgba(0,0,0,0.1);
    -webkit-transition:all .3s ease-out;
    transition:all .3s ease-out;
}

.contact-item .icon:hover{
    color:#5cc9df;
    -webkit-transform:scale(1.3) translateY(-10px);
    transform:scale(1.3) translateY(-10px);
}


.bl_form {
    margin: 30px 0 0;
}

.bl_form input {
    padding-top: 15px;
	background: rgba(255,255,255,0.10);
	box-shadow: 0 4px 0px rgba(0,0,0,0.2);
	border: none;
	color: white;
	padding: 10px 15px;
	border-radius: 5px;
	font-size: 16px;
	outline: none;
}

.lb_wrap .lb_label.top, .lb_wrap .lb_label.bottom {
	left: 66px !important;
}

.lb_wrap .lb_label.left {
	left: 0;
}

.lb_label {
	font-size:18px;
    line-height:32px;
	font-weight: 400;
	color: #ccc;
}

.no-placeholder .lb_label {
	display:none;
}

.lb_label.active {
	color: #aaa;
}

#Highlighted-form .form-group label{
    display:none;
    font-size:18px;
    line-height:24px;
    font-weight:100;
    text-transform:uppercase;
}

#Highlighted-form.no-placeholder .form-group label{
    display:block;
}

#Highlighted-form .controls {
    padding:0;
    margin-top:40px;
}

#Highlighted-form.no-placeholder .controls {
    margin-top:0;
}

#Highlighted-form .form-control {
	display:inline;
    background:#fff;
    border:none;
    border-radius:5px;
    outline:none;
    box-shadow:0 4px 0 rgba(0,0,0,0.05);
    height:52px;
    font-size:18px;
    line-height:32px;
    color:#aaa;
    font-weight:400;
    padding-left:64px;
	vertical-align:top;
}

#Highlighted-form .form-group.half-width{
    width:40%;
    float:left;
}

#Highlighted-form .form-group{
    position:relative;
}

#Highlighted-form .form-group [class*=fa] {
    display:block;
    width:64px;
    position:absolute;
    top:0;
    left:5px;
    color:#eee;
    font-size:24px;
    line-height:52px;
    text-align:center;
    font-weight:300;
	-webkit-transition:color .3s ease-out;
	transition:color .3s ease-out;
}

#Highlighted-form .form-group [class*=fa].active{
    color:#ccc;
}

#Highlighted-form.no-placeholder .form-group [class*=fa]{
    top:30px;
}

#Highlighted-form textarea.form-control {
    height:auto;
	max-width:100%;
	min-width:100%;
    font-size:18px;
    font-weight:400;
    line-height:24px;
	padding-top:14px;
	vertical-align:top;
}

#Highlighted-form .form-control:focus {
    outline:none;
    box-shadow:0 4px 0 rgba(0,0,0,0.05);
}

#Highlighted-form .error-message {
    padding:5px 0;
    position:absolute;
    top:-35px;
    right:0;
    font-size:15px;
    line-height:24px;
    font-weight:400;
    color:#ff3345;
    z-index:10;
}

#Highlighted-form.no-placeholder .error-message {
    top:0;
}