Skip to main content
Practice

Creating a Contact Form

A contact form is essential for a business page to facilitate communication with users. Through this, visitors can send inquiries, suggestions, or feedback, and businesses can use this information to improve services or meet user needs.


HTML

  • <form>: Starts the contact form, with all input fields and buttons located inside this tag.

  • .contact-input: A text input field allowing users to enter information like name or email address.

  • .contact-textarea: A text area where users can write detailed inquiries or feedback.

  • #send-button: The submit button for the contact form, which sends the entered data to the server upon clicking.

<form>
<!-- Name input field -->
<input type="text" class="contact-input" placeholder="Name" />

<!-- Email input field -->
<input type="email" class="contact-input" placeholder="Email" />

<!-- Inquiry and feedback area -->
<textarea
class="contact-textarea"
placeholder="Enter your message here."
></textarea>

<!-- Submit button -->
<button id="send-button">Send</button>
</form>

CSS

  • .form: Styles the contact form. Here, top margin and flexbox are used to define spacing and direction between items.

  • .contact-input and .contact-textarea: Basic styles for input fields and text area. Sets background color, padding, border-radius, etc.

  • #send-button: Styles the submit button. Sets button background color, text color, font size, letter spacing, and text transformation.

CSS
form {
margin-top: 20px;
flex: 1;
display: flex;
flex-direction: column;
gap: 18px;
}

.contact-input {
background: #f3f3f3;
padding: 16px 8px;
border-radius: 4px;
}

.contact-textarea {
background: #f3f3f3;
border-radius: 4px;
padding: 16px 8px;
height: 120px;
resize: none;
}

#send-button {
height: 50px;
display: flex;
justify-content: center;
align-items: center;
background: #000;
color: #fff;
font-size: 16px;
letter-spacing: 2.4px;
text-transform: uppercase;
cursor: pointer;
}

Want to learn more?

Join CodeFriends Plus membership or enroll in a course to start your journey.