DEV Community

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

Posted on • Edited on

4 2

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!

AWS Security LIVE!

Join us for AWS Security LIVE!

Discover the future of cloud security. Tune in live for trends, tips, and solutions from AWS and AWS Partners.

Learn More

Top comments (0)

Qodo Takeover

Introducing Qodo Gen 1.0: Transform Your Workflow with Agentic AI

Rather than just generating snippets, our agents understand your entire project context, can make decisions, use tools, and carry out tasks autonomously.

Read full post

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay