본문으로 건너뛰기

Creating a Contact Form

Creating a Contact Form

Contact forms are essential for business pages to communicate with users. Through these forms, users can send inquiries, suggestions, or feedback, and businesses can use this information to improve services or meet user needs.


HTML

  • <form>: The start of the contact form, containing all input fields and buttons.

  • .contact-input: Text input fields where users can enter information like their name or email address.

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

  • #send-button: A button to submit the contact form, sending the entered data to the server.

<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."
></textarea>

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

CSS

  • .form: Style for the contact form. Here, it defines the top margin and uses flexbox for spacing and direction between items.

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

  • #send-button: Style for the submit button. Configures the button's background color, text color, font size, and letter spacing.

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;
}

다음 내용이 궁금하다면?

월 12,500원 PLUS 멤버십 가입 or 강의를 등록해 주세요!