아임웹 입력폼 디자인 커스텀 (코드)

1. 시작하며

아임웹 홈페이지를 제작할 때 입력폼 위젯은 많이 사용되는 요소 중 하나입니다.
간단한 문의 양식부터 상담 신청, 예약 접수까지 다양한 목적으로 활용됩니다.

하지만 아임웹 디자인 모드에서 제공하는 기본 설정만으로는 세세한 디자인 설정이 어려운 경우가 많습니다.
특히 사이트 전체 분위기와 입력폼의 디자인이 어울리지 않으면 통일감이 떨어지게 됩니다.

그래서 이번 글에서는, 입력폼을 좀 더 정돈된 형태로 커스터마이징할 수 있는 코드 5가지를 소개해 드리겠습니다.

2. 아임웹 입력폼 커스터마이징 코드 5가지

1. 입력칸 모서리 둥글기 변경

<style>
#섹션ID .form-control {
  border-radius: 10px; /* 모서리 둥글기 */
}
</style>

• 입력칸의 분위기를 부드럽게 조정할 수 있습니다.
• 사이트 전체에 모서리 둥근 디자인이 적용됐다면 함께 사용해 보세요.

아임웹 섹션ID, 위젯ID, 모달창ID 찾는 방법 | 아임웹 홈페이지 지식 저장소, 웹카이브

아임웹에서 섹션 ID, 위젯 ID, 모달창 ID를 확인하는 방법을 자세히 안내합니다.

웹카이브웹트너

2. 버튼 텍스트 크기, 굵기, 자간 조정

<style>
#섹션ID div.form .btn-primary {
  font-size: 16px; /* 버튼 텍스트 크기 */
  font-weight: 600; /* 버튼 텍스트 굵기 */
  letter-spacing: -0.025em; /* 버튼 텍스트 자간 */
}
</style>

• 텍스트 가독성 향상과 버튼 디자인 통일성에 효과적입니다.

3. 입력칸 높이 변경 (내용 입력칸 제외)

<style>
#섹션ID .form-group:not(#내용입력칸ID) .form-control {
  height: 48px;
}
</style>

• 기존 입력칸 높이가 좁아 답답할 수 있는데, 입력폼의 입력칸 높이를 적당히 늘려서 시원한 느낌을 줄 수 있습니다.
• '내용' 입력칸을 제외한 입력칸에 대해 높이를 설정하는 코드입니다.
• 내용입력칸ID는 크롬 개발자 도구(F12)로 확인 후 변경합니다.

4. 연락처 입력칸 하이픈(-) 색상 변경

<style>
#섹션ID .phonenumber_wrap .line {
  color: #DC3626 !important;
}
</style>

• 기본 하이픈 색상이 웹사이트 전체 색상과의 통일성이 맞지 않을 수 있습니다.
• 브랜드 컬러 또는 포인트 색상으로 조정해보세요.

5. 연락처 입력칸 너비 조정

<style>
#섹션ID .phonenumber_wrap .form-control {
  width: 80px !important;
}
</style>

• 좁은 연락처 입력 필드의 너비를 넓게 조정할 수 있습니다.
• 너무 좁거나 넓은 입력창은 사용자 경험에 영향을 줍니다.

3. 마무리

이번 글에서는 아임웹에서 많이 사용되는 입력폼 위젯의 디자인을 개선할 수 있는 5가지 CSS 코드를 소개해 드렸습니다.

• 사이트의 톤앤매너에 맞춘 입력폼 디자인 가능
• 간단한 코드 추가만으로 세련된 사용자 경험 구현
• 입력폼의 디테일이 전체 사이트 인상을 결정

입력폼은 사용자와의 직접적인 상호작용이 일어나는 접점입니다.
소개해 드린 코드를 활용하여 완성도 높은 폼 디자인을 적용해 보시기 바랍니다.

[함께 읽으면 좋은 글]

* 아임웹 입력폼 위젯 소개 (기능 설명, 활용 팁)

아임웹 입력폼 위젯 소개 (기능 설명, 활용 팁) | 아임웹 홈페이지 지식 저장소, 웹카이브

아임웹 입력폼 위젯의 주요 기능과 활용 방법을 소개합니다. 다양한 설정 옵션으로 효과적인 데이터 수집과 사용자 맞춤형 폼을 쉽게 만들 수 있습니다.

웹카이브웹트너

* 아임웹 입력폼 버튼 텍스트 스타일 변경 (코드)

아임웹 입력폼 버튼 텍스트 스타일 변경 (코드) | 아임웹 홈페이지 지식 저장소, 웹카이브

아임웹 입력폼 버튼의 텍스트 크기, 굵기 등 스타일을 변경하는 방법을 소개합니다. 코드를 활용하여 공통 디자인 설정을 건드리지 않고도 버튼 스타일을 커스터마이징할 수 있는 유용한 팁을 확인해 보세요.

웹카이브웹트너

* 아임웹 입력폼 항목명 스타일 꾸미기 (코드)

아임웹 입력폼 항목명 스타일 꾸미기 | 아임웹 홈페이지 지식 저장소, 웹카이브

아임웹 입력폼 위젯의 항목명을 간단한 코드로 세련되게 꾸미는 방법과 다양한 스타일링 팁을 소개합니다.

웹카이브웹트너