Original Contact Form

Developer
Francesca
Size
2,187 Kb
Views
10,120
  1. Original Contact Form Previews
  2. Original Contact Form HTML Codes
  3. Original Contact Form CSS Codes

How do I make an original contact form?

What is a original contact form? How do you make a original contact form? This script and codes were developed by Francesca on 20 November 2022, Sunday.

Original Contact Form Previews
IQ Test

Original Contact Form - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Original Contact Form</title> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="wrapper">
<div class="round-top"> <div class="row" >	<input type="text" class="required" id="name" placeholder="NAME*" name="Name"/> </div> <div class="row" > <input class="required" type="email" name="YourEmail" placeholder="EMAIL*" id="YourEmail"/> </div> <div style="clear: both"></div>
</div>
<div class="row fullwidthh" >
<textarea class="required messagebox" name="message" placeholder="YOUR MESSAGE*"></textarea>
</div>
</div>
<div class="bottomarea">
<button type='button' id='SubmitB' onclick='SendCustomForm(this);'>Submit</button>
<div style="clear: both"></div>
</div>
</body>
</html>

Original Contact Form - Script Codes CSS Codes

.error{ color: red;}
.row{margin-bottom: 10px; display: inline-block; }
label{width: 30%; display: inline-block; float: left; min-width: 100px}
.round-top .row:first-child input{width: 99%;margin-left: 0%; margin-right: 1%; float: left; height: 40px; border-radius: 0px; text-indent: 20px }
.round-top .row:nth-child(2) input{width: 99%;margin-left: 1%; margin-right: 0%; float: left; height: 40px; border-radius: 0px; text-indent: 20px }
.messagebox{padding-top: 10px;text-indent: 20px; width: 100%; border-radius: 0px; min-height: 100px; border: 1px solid black}
.round-top .row{width: 50%; float: left; display: block}
.round-top{width: 80%; margin-left: 10%}
.round-top input{border: 1px solid black;}
.fullwidthh{width:80%; margin-left: 10%;}
.bottomarea{width: 100%}
.bottomarea .row{width: 80%;margin-left: 10%; display: block}
.bottomarea label{float:left}
.bottomarea button{position: relative;float: none; border-radius: 0px; display: inline-block; color: #fff!important; background: black!important; border: none!important; font-size: 20px; padding-top: 10px; padding-bottom: 10px; padding-left: 50px; padding-right: 50px; text-transform: uppercase }
.bottomarea button:before{
position: absolute; content: ''; width: 0; height: 0; border-style: solid; border-width: 24px 25px 0 25px; border-color: #000000 transparent transparent transparent; margin-bottom: -22px; bottom: 0px; left: 65px;
}
.bottomarea {border-bottom: 3px black solid; }
.optionto #HowContact, .optionto #WhereHearAbout{height: 30px!important; border-radius: 10px!important}
.optionto label{width: 60%!important; }
select{margin-left: 1%;width: 39%; height: 30px!important; border-radius: 10px!important}
.bottomarea {text-align: center!important}
Original Contact Form - Script Codes
Original Contact Form - Script Codes
Home Page Home
Developer Francesca
Username francescaedits
Uploaded November 20, 2022
Rating 3
Size 2,187 Kb
Views 10,120
Do you need developer help for Original 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!

Francesca (francescaedits) Script Codes
Name
Heating Circ Template
Extended Warranty
Smart Overlay Pop Up
Test Contact Form
International Shipping Form
Superpro Template
Become a Stockist Form
PW Stylesheet
Cancellation Form
Thumbnail Slideshow Appearance
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!