In my last 3 projects, I've needed to add a contact form. So I decided to write up a simple and speedy base layout for a form that can be customized easily.
First our JSX which consists of our main <div>, a header, and a few <input> tags:
<div className='contact'>
<h2 className='contactus'>Contact Us</h2>
<input type="text" id="name" name="name"
placeholder="Name"/>
<input type="text" id="email" name="email"
placeholder="Email"/>
<textarea id="subject" name="subject" placeholder="Tell us
about you!" />
<input type="submit" value="Send"/>
</div>
Next, in our CSS file we will add some styling to the main <div>, our text input, and our submit input or button:
.contact {
margin-top: 50px;
margin-left: 400px;
width: 500px;
height: auto;
padding: 10px;
border: 8px solid transparent;
}
input[type=text], select, textarea {
width: 90%;
padding: 12px;
border: 1px solid #262626;
box-sizing: border-box;
margin-top: 5px;
margin-bottom: 5px;
resize: vertical;
font-size: medium;
background-color: transparent;
}
input[type=submit] {
background-color: transparent;
border: none;
color: #262626;
width: 100px;
padding: 4px;
cursor: pointer;
font-size: medium;
margin-left: 35%;
}
input[type=submit]:hover {
color: #262626;
transform: scale(1.2);
transition: 500ms;
border: 1px solid #262626;
}
Result:
From here you can change up the styling to make it look how you want!
Top comments (0)