Home Web Design CSS Contact Form With Flip Animation Effect | Using HTML, CSS, & JavaScript

Contact Form With Flip Animation Effect | Using HTML, CSS, & JavaScript

May 4, 2019

6462

Today’s topic is how to create a contact form with flip animation effect using HTML, CSS, & JavaScript. You had seen before many types of contact form in websites. Every category’s website uses the contact form. Many people use it for contact or feedback, and many uses for business purpose.

In other words, every website or blog owner needs a contact form. Some people use the simple contact form and some other use very attractive one. This is fully your choice, How much you thinking about your UI. According to my opinion, a stylish form is more effective than a simple one. If you are using WordPress then you are able to thousands of plugins for creating stylish form.

And if you have a website without CMS, you had created it with coding from scratch. Then I have a very cool looking contact form for you.

Today I am sharing an example and source code of Contact form with flip animation effect. This program is built-in HTML, CSS, & little bit JQuery ( a JavaScript Library, Get JQuery). It has a very clean look and it is stylish also. When you will click on the ‘Contact Us’ button form will appear with a flip animation effect. If you don’t understand let’s take a preview of the form.

Preview Of Animated Form

For geting an idea about, how this program looks like: see this video preview.

So, Now you can see this contact form with flip animation. Maybe now you want this program’s source code. Don’t worry as always I will share source code.

Source Code OF Contact Form With Flip Animation Effect

Before sharing source code, I want to talk a little bit about this program. First, I had created a simple HTML contact form, then I used CSS for style and Jquery or javascript for toggle flip effect. I used a png format image for the close button. You have to create 3 files for this program. First for HTML, Second for CSS, & third for JavaScript.

index.html

Create an HTML file named ‘index.html‘ and put these codes given below.

<!DOCTYPE html>
<!-- code by webdevtrick ( https://webdevtrick.com ) -->
<html>

<head>
  <meta charset="UTF-8">
  <title>Animated Flip Contact Form | Webdevtrick.com</title>

      <link rel="stylesheet" href="style.css">

</head>
<body>
  <div class="cont-contactBtn">
					<div class="cont-flip">
						<div class="front">
							<a href="#" class="btn btn-white flip">Contact Us</a>
						</div>
						<div class="back">
							<a href="#" class="flip close"></a>
							<form class="contact-form" action="">
								<input class="gutter" type="text" placeholder="Your Name">
								<input type="text" placeholder="Company Name">
								<input class="gutter" type="text" placeholder="Phone Number">
								<input type="text" placeholder="Email ID">
								<textarea name="" id="" placeholder="Leave a message"></textarea>
								<input type="submit" value="Send">
							</form>
						</div>
					</div>
	</div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script  src="index.js"></script>
</body>

</html>

<!DOCTYPE html>

<html>

<head>

<title>Animated Flip Contact Form | Webdevtrick.com</title>

</head>

<body>

<a href="#" class="btn btn-white flip">Contact Us</a>

</div>

</form>

</div>

</body>

</html>

style.css

Now create a CSS file named ‘style.css‘ for giving an attractive look to this program. Copy these codes and paste in the file.

/* code by webdevtrick ( https://webdevtrick.com ) */
@import url(https://fonts.googleapis.com/css?family=Raleway);

body {
  background-color: #f6ede5;
	
}

a, p {
  font-family: 'Raleway', sans-serif;
}

.cont-contactInfo {
  float: left;
  padding-right: 5%;
  width: 45%;
}
.cont-contactInfo h3 {
  font-size: 28px;
}
.cont-contactInfo h4 {
  font-size: 22px;
  font-weight: normal;
  text-transform: uppercase;
}
.cont-contactInfo h4.section {
  margin: 30px 0 0;
}
.cont-contactInfo p {
  margin: 0;
}
.cont-contactInfo p > a {
  text-transform: uppercase;
  font-weight: bold;
}

.cont-contactBtn {
  height: 359px;
  margin: 0 auto;
  width: 574px;
  position: relative;
  perspective: 800px;
}
.cont-contactBtn .cont-flip {
  position: absolute;
  transition: transform 0.5s;
  transform-style: preserve-3d;
  height: 100%;
  width: 100%;
}
.cont-contactBtn .cont-flip .front, .cont-contactBtn .cont-flip .back {
  display: block;
  margin: 0;
  height: 100%;
  width: 100%;
  position: absolute;
  backface-visibility: hidden;
}
.cont-contactBtn .cont-flip .front {
  background-color: #00E869;
}
.cont-contactBtn .cont-flip .back {
  background-color: #fff;
  transform: rotateX(180deg);
}
.cont-contactBtn .btn {
  margin-top: 155px;
}
.cont-contactBtn .cont-flip.flipped {
  transform: rotateX(180deg);
}
.cont-contactBtn .contact-form {
  padding: 0 10%;
  margin-top: 50px;
  width: 80%;
}
.cont-contactBtn .contact-form input, .cont-contactBtn .contact-form textarea {
  border: 1px solid #808080;
  font-size: 12px;
  padding: 10px 0;
  text-transform: uppercase;
}
.cont-contactBtn .contact-form input[type="text"] {
  float: left;
  margin-bottom: 8px;
  padding-left: 3%;
  width: 44.9%;
}
.cont-contactBtn .contact-form .gutter {
  margin-right: 2.8%;
}
.cont-contactBtn .contact-form textarea {
  height: 106px;
  padding-left: 3%;
  margin-bottom: 22px;
  width: 96.2%;
}
.cont-contactBtn .contact-form input[type="submit"] {
  background-color: #00E869;
  border: none;
  color: #fff;
  height: 45px;
  width: 100%;
  max-width: 93px;
  text-align: center;
}
.cont-contactBtn .close {
  display: block;
  height: 19px;
  width: 19px;
  background-image: url("https://webdevtrick.com/wp-content/uploads/close.png");
  background-repeat: no-repeat;
  background-position: center;
  position: absolute;
  top: 15px;
  right: 3%;
}

.btn {
  border: 3px #fff solid;
  color: #fff;
  display: block;
  font-size: 15px;
  font-weight: normal;
  margin: 0 auto;
  max-width: 280px;
  padding: 15px 0;
  text-align: center;
  text-transform: uppercase;
  text-decoration: none;
  width: 100%;
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

/* code by webdevtrick ( https://webdevtrick.com ) */

@import url(https://fonts.googleapis.com/css?family=Raleway);

body {

background-color: #f6ede5;

}

a, p {

font-family: 'Raleway', sans-serif;

}

.cont-contactInfo {

float: left;

padding-right: 5%;

width: 45%;

}

.cont-contactInfo h3 {

font-size: 28px;

}

.cont-contactInfo h4 {

font-size: 22px;

font-weight: normal;

text-transform: uppercase;

}

.cont-contactInfo h4.section {

margin: 30px 0 0;

}

.cont-contactInfo p {

margin: 0;

}

.cont-contactInfo p > a {

text-transform: uppercase;

font-weight: bold;

}

.cont-contactBtn {

height: 359px;

margin: 0 auto;

width: 574px;

position: relative;

perspective: 800px;

}

.cont-contactBtn .cont-flip {

position: absolute;

transition: transform 0.5s;

transform-style: preserve-3d;

height: 100%;

width: 100%;

}

.cont-contactBtn .cont-flip .front, .cont-contactBtn .cont-flip .back {

display: block;

margin: 0;

height: 100%;

width: 100%;

position: absolute;

backface-visibility: hidden;

}

.cont-contactBtn .cont-flip .front {

background-color: #00E869;

}

.cont-contactBtn .cont-flip .back {

background-color: #fff;

transform: rotateX(180deg);

}

.cont-contactBtn .btn {

margin-top: 155px;

}

.cont-contactBtn .cont-flip.flipped {

transform: rotateX(180deg);

}

.cont-contactBtn .contact-form {

padding: 0 10%;

margin-top: 50px;

width: 80%;

}

.cont-contactBtn .contact-form input, .cont-contactBtn .contact-form textarea {

border: 1px solid #808080;

font-size: 12px;

padding: 10px 0;

text-transform: uppercase;

}

.cont-contactBtn .contact-form input[type="text"] {

float: left;

margin-bottom: 8px;

padding-left: 3%;

width: 44.9%;

}

.cont-contactBtn .contact-form .gutter {

margin-right: 2.8%;

}

.cont-contactBtn .contact-form textarea {

height: 106px;

padding-left: 3%;

margin-bottom: 22px;

width: 96.2%;

}

.cont-contactBtn .contact-form input[type="submit"] {

background-color: #00E869;

border: none;

color: #fff;

height: 45px;

width: 100%;

max-width: 93px;

text-align: center;

}

.cont-contactBtn .close {

display: block;

height: 19px;

width: 19px;

background-image: url("https://webdevtrick.com/wp-content/uploads/close.png");

background-repeat: no-repeat;

background-position: center;

position: absolute;

top: 15px;

right: 3%;

}

.btn {

border: 3px #fff solid;

color: #fff;

display: block;

font-size: 15px;

font-weight: normal;

margin: 0 auto;

max-width: 280px;

padding: 15px 0;

text-align: center;

text-transform: uppercase;

text-decoration: none;

width: 100%;

}

index.js

Finally, its time to create a JS file. Create a javascript file named ‘index.js‘ and put the codes given here below.

/* code by webdevtrick ( https://webdevtrick.com ) */
$(document).ready(function(){
  $('.flip').click(function(){
    $('.cont-flip').toggleClass('flipped');
    return false;
  });
});

/* code by webdevtrick ( https://webdevtrick.com ) */

$(document).ready(function(){

$('.flip').click(function(){

$('.cont-flip').toggleClass('flipped');

return false;

});

That’s It. Now you have successfully created a contact form with flip animation effect. I know this is very less JS, that is the power of JQuery. If you have any doubt or question comment down below.

Thanks For Visiting, Keep Visiting.

31 COMMENTS

Top Shelf Bread April 19, 2019 At 1:34 am

I am pleased that I found this blog, precisely the right info that I was searching for!

Reply
- shaan April 19, 2019 At 4:16 am
  
  Thank you very much, Don’t forget to bookmark this blog.
  
  Reply
- Ajima November 3, 2019 At 8:59 pm
  
  Thalai va supers Thalaiva Vera level
  
  Reply
Bitcoin Revolution Platform April 19, 2019 At 9:23 pm

Interesting blog! Is your theme custom made or did you download it
from somewhere? A theme like yours with a few simple tweeks would
really make my blog shine. Please let me know where you got your theme.
Thanks

Reply
- shaan April 20, 2019 At 9:24 am
  
  this is a free theme but customized
  
  Reply
Niklas April 19, 2019 At 9:56 pm

I like this web site it’s a master piece! Glad I detected
this on google.

Reply
- shaan April 20, 2019 At 9:24 am
  
  thank you
  
  Reply
Gary April 19, 2019 At 9:59 pm

I am pleased that I observed this weblog, just the right information that I was searching
for!

Reply
- shaan April 20, 2019 At 9:24 am
  
  thank you
  
  Reply
Jeromy Ibasitas April 30, 2019 At 8:28 pm

Couldn’t connect to my Nikon D750 using wifi and a macbook proOSX 10.10+. Not sure but it’s probably my fault.

Reply
Keto Full Diet Pills May 9, 2019 At 6:17 pm

I like this blog it’s a master piece! Glad I discovered this on google.

Reply
- shaan May 10, 2019 At 3:49 am
  
  Thank you very much, Stay connected.
  
  Reply
Auras Wave Co Keto Review May 10, 2019 At 9:09 am

Heya i’m for the primary time here. I came across
this board and I in finding It really useful & it helped me out a
lot. I am hoping to present one thing back and help others like you helped me.

Reply
- shaan May 10, 2019 At 11:35 am
  
  Hey! thanks for commenting. Stay connected.
  
  Reply
Keto Buzz Review May 10, 2019 At 10:11 pm

I was very pleased to find this web site. I want to to thank you
for ones time for this particularly fantastic read!!
I definitely savored every bit of it and I have you book-marked
to see new information on your web site.

Reply
- shaan May 11, 2019 At 3:59 am
  
  Thank you very much, stay connected.
  
  Reply
FolliPur Hair Growth May 12, 2019 At 9:07 pm

Now I am ready to do my breakfast, later than having my breakfast coming over again to read
more news.

Reply
Keto Melt And Trim 800 May 16, 2019 At 10:15 am

Valuable information. Fortunate me I discovered your site accidentally, and I’m
shocked why this accident did not happened in advance! I bookmarked it.

Reply
- shaan May 16, 2019 At 12:59 pm
  
  thank you very much, stay connected.
  
  Reply
longUrl May 16, 2019 At 1:18 pm

Thanks for sharing your thoughts about high heel. Regards

Reply
Alessa Serum May 17, 2019 At 9:43 am

Very nice write-up. I definitely appreciate this site.
Thanks!

Reply
- shaan May 17, 2019 At 10:23 am
  
  Thank you very much, Stay Connected.
  
  Reply
Keto Genesys Review May 18, 2019 At 12:38 pm

I all the time used to read article in news papers but now
as I am a user of internet thus from now I am using net for articles, thanks to web.

Reply
KetoGenesys May 19, 2019 At 3:13 am

I am lucky that I discovered this website, just the right info that I was searching for!

Reply
- shaan May 19, 2019 At 4:01 am
  
  Thanks, Stay connected.
  
  Reply
Alessa Serum Ingredients May 19, 2019 At 12:49 pm

Highly energetic blog, I liked that bit. Will there be a part 2?

Reply
- shaan May 19, 2019 At 4:35 pm
  
  Sure, thank you.
  
  Reply
Keto 6tm May 21, 2019 At 11:44 pm

Hi to all, the contents existing at this web page are in fact awesome for people experience,
well, keep up the good work fellows.

Reply
- shaan May 22, 2019 At 2:13 am
  
  Thank you very much.
  
  Reply
Macro Nutrient Keto Diet May 22, 2019 At 2:43 am

Just wish to say your article is as amazing. The clarity in your post is just spectacular and i can assume you’re an expert
on this subject. Fine with your permission allow me to grab
your RSS feed to keep up to date with forthcoming
post. Thanks a million and please continue the gratifying work.

Reply
Proceed to this site. May 23, 2019 At 6:03 pm

It’s awesome in favor of me to have a web page, which is valuable in favor of my know-how.
thanks admin

Reply