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.
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.