Postcard Contact Form

Developer
Calvin
Size
2,361 Kb
Views
34,408
  1. Postcard Contact Form Previews
  2. Postcard Contact Form HTML Codes
  3. Postcard Contact Form CSS Codes

How do I make an postcard contact form?

What is a postcard contact form? How do you make a postcard contact form? This script and codes were developed by Calvin on 11 August 2022, Thursday.

Postcard Contact Form Previews
IQ Test

Postcard Contact Form - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Postcard Contact Form</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <body> <div id="wrapper"> <form> <div id="postcard"> <section class="group" id="form_top"> <div id="contact_info"> <input id="name" type="text" name="name" placeholder="name"> <input type="text" name="email" placeholder="email address"> </div> </section> <textarea name="message" placeholder="Your message here..."></textarea> </div> <div id="button"> <input type="submit" id="submit" value="contact"> </div> </form> </div>
</body>
</body>
</html>

Postcard Contact Form - Script Codes CSS Codes

body { background:#638FA4; background-size: cover; font: 1.6em Helvetica, Arial; color:#000;
}
#wrapper { width: 45%; margin: 50px auto;
}
/* Main Elements */
#postcard { color:#000; background:transparent; background-size: cover; padding: 30px; border: 3px solid #000; height: 300px; width: 100%;
}
#button { width: 100%; padding: 30px; text-align: center;
}
/* Postcard */
#form_top { width: 75%; color:#000;
}
#contact_info { width:90%; float: left; outline: none; }
input { padding: 5px; width: 100%; background:transparent; outline: none; text-transform:capitalize; font: 1.6em Helvetica, Arial, sans-serif; color:#000; border:none; border-bottom:3px solid #000;
}
#name { margin-bottom: 30px; background: transparent; outline: none; border-bottom:3px solid #000; padding: 5px; font: 1.6em Helvetica, Arial, sans-serif; color:#000;
}
textarea { color:#000; margin-top: 30px; width: 100%; min-height: 45%; background: transparent; border: none; padding: 10px; box-sizing: border-box; font: 12px Helvetica, Arial, sans-serif; outline: none;
}
textarea:first-letter{text-transform:capitalize;}
/* Clearfix */
.group { display: table; clear: both; color:#000;
}
/* Submit Button */
#submit { padding: 9px 0 8px 0; width: 100%; background:transparent; border: 3px solid #000; font: 1.6em Helvetica, Arial, sans-serif; color:#000; text-transform:capitalize;
}
/* Hover and Focus Effects */
#submit:hover { color:#000; background: #fff;
}
#name:hover,#email:hover { color:#000; border-bottom:3px solid #000; background: #fff;
}
input:hover,
input:focus
{ color:#000; background: #fff; outline: none; border:none; border-bottom:3px solid #000;
}
textarea:focus,textarea:hover { color:#000; background: #fff; outline: none; border:none;
}
#wrapper { -webkit-animation: scaleForm 1.25s ease-out 1; animation: scaleForm 1.25s ease-out 1;
}
/* Keyframes */
@-webkit-keyframes movePlane { from { opacity: 1; -webkit-transform: rotate(-40deg); } to { opacity: 1; -webkit-transform: rotate(-60deg) translate(-400%, -550%) skew(10deg, 10deg); -webkit-transform-origin: 100%, 100%; }
}
@-webkit-keyframes scaleForm { 0% { opacity: 0; -webkit-transform: scale(0.1,0.1); } 70%{ opacity: 0; -webkit-transform: scale(0.1,0.1); } 100% { -webkit-transform: scale(1,1); }
}
@keyframes movePlane { from { opacity: 1; -ms-transform: rotate(-40deg); transform: rotate(-40deg); } to { opacity: 1; -ms-transform: rotate(-60deg) translate(-400%, -550%) skew(10deg, 10deg); transform: rotate(-60deg) translate(-400%, -550%) skew(10deg, 10deg); -ms-transform-origin: 100%, 100%; transform-origin: 100%, 100%; }
}
@keyframes scaleForm { 0% { opacity: 0; -ms-transform: scale(0.1,0.1); transform: scale(0.1,0.1); } 70%{ opacity: 0; -ms-transform: scale(0.1,0.1); transform: scale(0.1,0.1); } 100% { -ms-transform: scale(1,1); transform: scale(1,1); }
}http://codepen.io/mbower191/full/mzGsD
Postcard Contact Form - Script Codes
Postcard Contact Form - Script Codes
Home Page Home
Developer Calvin
Username CalvinMorett
Uploaded August 11, 2022
Rating 3
Size 2,361 Kb
Views 34,408
Do you need developer help for Postcard Contact Form?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Calvin (CalvinMorett) Script Codes
Name
The word good is bad.
Sectioned-bootstrap-portfolio
R
Portfolio Idea
Port
Fixed-width Single Page Portfolio
Sidebar Nav
Staff
Showcase 1 Gallery
Image Stack Test SCSS
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!