A Pen by Danny Beton.

index.html

<div class="cont-contactBtn">
					<div class="cont-flip">
						<div class="front">
							<a href="#" class="btn btn-white flip">Send Message</a>
						</div>
						<div class="back">
							<a href="#" class="flip close"></a>
							<form class="contact-form" action="">
								<input class="gutter" type="text" placeholder="Name">
								<input type="text" placeholder="Company">
								<input class="gutter" type="text" placeholder="Telephone">
								<input type="text" placeholder="Email">
								<textarea name="" id="" placeholder="Leave a message"></textarea>
								<input type="submit" value="Send">
							</form>
						</div>
					</div>

Sass-Flip-Contact-Form.markdown

Sass Flip Contact Form

A Pen by Danny Beton on CodePen.

License.

script.js

$(document).ready(function(){
  $('.flip').click(function(){
    $('.cont-flip').toggleClass('flipped');
    return false;
  });
});

style.scss

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

$red: #ff4d54;
$white: #fff;

body {
  background-color: #f6ede5;
}

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

@mixin perspective($pixels) {
	-webkit-perspective: $pixels;
	-moz-perspective: $pixels;
	-o-perspective: $pixels;
	perspective: $pixels;
}

@mixin transition($speed) {
	-webkit-transition: -webkit-transform $speed;
	-moz-transition: -moz-transform $speed;
	-o-transition: -o-transform $speed;
	transition: transform $speed;
}

@mixin transform-style() {
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	-o-transform-style: preserve-3d;
	transform-style: preserve-3d;
}

@mixin transform($degrees) {
	-webkit-transform: rotateX( $degrees + deg);
	-moz-transform: rotateX( $degrees + deg);
	-o-transform: rotateX( $degrees + deg);
	transform: rotateX( $degrees + deg);
}

@mixin backface-visibility() {
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	-o-backface-visibility: hidden;
	backface-visibility: hidden;
}

.cont-contactInfo {
	float: left;
	padding-right: 5%;
	width: 45%;

	h3 {
		font-size: 28px;
	}

	h4 {
		font-size: 22px;
		font-weight: normal;
		text-transform: uppercase;
	}

	h4.section {
		margin: 30px 0 0;
	}

	p {
		margin: 0;
	}

	p > a {
		text-transform: uppercase;
		font-weight: bold;
	}

	.social-icons {
		list-style: none;
		margin: 5px 0 0;
		padding: 0;

		li {
			float: left;
			margin-right: 3px;

			a {
				background-image: url("../images/sprite_social_icons.png");
				background-repeat: no-repeat;
				display: block;
				height: 28px;
				width: 29px;
			}

			a:hover {
				opacity: .8;
			}

			a.icon_twitter {
				background-position: -33px 0;
			}

			a.icon_linkedin {
				background-position: -68px 0;
			}

			a.icon_youtube {
				background-position: -102px 0;
			}

			a.icon_pinterest {
				background-position: -135px 0;
			}

			a.icon_vimeo {
				background-position: -169px 0;
			}

			a.icon_instagram {
				background-position: -204px 0;
			}
		}
	}
}

.cont-contactBtn {
	height: 359px;
  margin: 0 auto;
	width: 574px;
	position: relative;

	@include perspective(800px);

	.cont-flip {
		position: absolute;
		@include transition(.5s);
		@include transform-style();
		height: 100%;
		width: 100%;

		.front, .back {
			display: block;
			margin: 0;
			height: 100%;
			width: 100%;
			position: absolute;

			@include backface-visibility;
		}

		.front {
			background-color: $red;
		}

		.back {
			background-color: $white;
			@include transform(180);
		}
	}

	.btn {
		margin-top: 155px;
	}

	.cont-flip.flipped {
		@include transform(180);
	}

	.contact-form {
		padding: 0 10%;
		margin-top: 50px;
		width: 80%;

		input, textarea {
			border: 1px solid #808080;
			font-size: 12px;
			padding: 10px 0;
			text-transform: uppercase;
		}

		input[type="text"] {
			float: left;
			margin-bottom: 8px;
			padding-left: 3%;
			width: 44.9%;
		}

		.gutter {
			margin-right: 2.8%;
		}

		textarea {
			height: 106px;
			padding-left: 3%;
			margin-bottom: 22px;
			width: 96.2%;
		}

		input[type="submit"] {
			background-color: $red;
			border: none;
			color: $white;
			height: 45px;
			width: 100%;
			max-width:93px;
			text-align: center;
		}

	}

	.close {
		display: block;
		height: 19px;
		width: 19px;
		background-image: url('http://i.imgur.com/WoKg12q.png');
		background-repeat: no-repeat;
		background-position: center;
		position: absolute;
		top: 15px;
		right: 3%;
	}
}

.btn {
	border: 3px $white solid;
  color: $white;
	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%;
}