본문으로 건너뛰기

연락 Form 만들기

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