DEV Community

Cover image for Quick minimal contact form creation in React App
CiaraMaria
CiaraMaria

Posted on • Updated on

Quick minimal contact form creation in React App

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>
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

Result:

From here you can change up the styling to make it look how you want!

Top comments (0)