연락 Form 만들기

비즈니스 페이지에는 사용자와의 소통을 위한 연락(Contact) 양식이 필수적입니다. 이를 통해 방문자는 문의사항, 제안 또는 피드백을 보낼 수 있으며, 기업은 이러한 정보를 기반으로 서비스를 개선하거나 사용자의 요구를 충족시킬 수 있습니다.

HTML

• <form>: 연락 양식의 시작으로, 이 태그 내부에 모든 입력 필드와 버튼이 위치합니다.

• .contact-input: 사용자가 이름이나 이메일 주소와 같은 정보를 입력할 수 있는 텍스트 입력 필드입니다.

• .contact-textarea: 사용자가 자신의 문의사항이나 피드백을 자세히 작성할 수 있는 텍스트 영역입니다.

• #send-button: 연락 양식을 제출하는 버튼으로, 클릭하면 양식에 입력된 데이터가 서버로 전송됩니다.

<form>
  <!-- 이름 입력 필드 -->
  <input type="text" class="contact-input" placeholder="이름" />

  <!-- 이메일 입력 필드 -->
  <input type="email" class="contact-input" placeholder="이메일" />

  <!-- 문의사항 및 피드백 영역 -->
  <textarea
    class="contact-textarea"
    placeholder="메시지를 입력하세요."
  ></textarea>

  <!-- 제출 버튼 -->
  <button id="send-button">제출하기</button>
</form>

CSS

• .form: 연락 양식의 스타일. 여기서는 위쪽 여백과 flexbox를 사용하여 아이템 간 간격 및 방향을 정의합니다.

• .contact-input및.contact-textarea: 입력 필드와 텍스트 영역의 기본 스타일. 배경색, 여백, 테두리 모서리 반올림 등을 설정합니다.

• #send-button: 제출 버튼의 스타일. 버튼의 배경색, 텍스트 색상, 글꼴 크기, 텍스트 간격 등을 설정합니다.

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