아임웹 문의폼 둥글게 만들기 | 입력폼 디자인 커스텀 코드

아임웹 문의폼 둥글게 만들기 | 입력폼 디자인 커스텀 코드

홈페이지에서 문의폼은 방문자가 상담 문의를 남기는 가장 중요한 영역입니다.

하지만 아임웹 기본 입력폼은 다소 딱딱한 느낌이 있어 전체 디자인과 어울리지 않는 경우가 많습니다.

 

이번 글에서는 HTML/CSS 커스텀 코드를 활용해

입력창, 연락처, 이메일, 문의 내용, 작성 버튼까지 모두 둥글게 디자인하는 방법을 소개합니다.

 

실제 적용 예시

믓아 스튜디오

 

---

 

이 코드로 구현되는 기능

해당 코드를 적용하면 다음과 같은 디자인 효과를 만들 수 있습니다.

✔ 입력창 모서리 둥글게 적용

✔ 문의 내용(Textarea) 둥글게 적용

✔ 연락처 입력칸 3개 모두 둥글게 적용

✔ 이메일 입력칸 둥글게 적용

✔ 작성 버튼을 알약(Pill) 형태로 변경

✔ 전체 문의폼을 부드럽고 고급스러운 느낌으로 개선

별도의 플러그인 없이 CSS만으로 적용 가능합니다.

---

사용하면 좋은 상황

다음과 같은 홈페이지에서 특히 활용도가 높습니다.

• 병원 홈페이지 제작
• 법률사무소 홈페이지 제작
• 기업 홈페이지 제작
• 랜딩페이지 제작
• 상담 신청 페이지
• 예약 문의 페이지
• 견적 문의 페이지

문의 전환이 중요한 페이지라면 간단한 디자인 개선만으로도 사용성이 좋아질 수 있습니다.

---

 

적용 방법

1. 아임웹 관리자 접속
2. 디자인 모드 진입
3. 코드 위젯 추가
4. 아래 코드를 붙여넣기
5. 위젯 ID를 자신의 문의폼 ID로 변경
6. 저장 후 확인

---

전체 코드

<style>
/* 입력칸 */
#w202606099561bc8ab2881 .form-control{
  border-radius:18px !important;
  overflow:hidden;
}

/* 내용 textarea */
#w202606099561bc8ab2881 textarea.form-control{
  border-radius:18px !important;
  resize:none;
}

/* 연락처 3개 input */
#w202606099561bc8ab2881 .phonenumber_wrap input{
  border-radius:18px !important;
}

/* 이메일 */
#w202606099561bc8ab2881 .email_wrap input{
  border-radius:18px !important;
}

/* 작성 버튼 */
#w202606099561bc8ab2881 .btn,
#w202606099561bc8ab2881 .btn-primary{
  border-radius:999px !important;
  padding:14px 32px !important;
}
</style>

---

코드 수정 포인트

1. 입력창 둥글기 조절

현재

border-radius:18px;

더 둥글게 만들고 싶다면

border-radius:24px;

 

 

2. 버튼을 완전 동그랗게 만들기

현재

border-radius:999px;

이미 가장 둥근 상태입니다.

원형 버튼이 아니라면

border-radius:12px;

처럼 수정 가능합니다.

 

3. 버튼 크기 변경

현재

padding:14px 32px;

더 크게 만들고 싶다면

padding:18px 40px;

로 변경하면 됩니다.

---

자주 발생하는 오류와 해결 방법

1. 적용이 안될 때

문의폼 위젯 ID가 다를 가능성이 높습니다.

현재 코드의

#w202606099561bc8ab2881

부분을 자신의 문의폼 위젯 ID로 변경해야 합니다.

 

2. 연락처 입력칸만 적용이 안될 때

아임웹 버전에 따라 구조가 다를 수 있습니다.

개발자 도구(F12)에서 실제 클래스명을 확인한 뒤 수정하면 해결됩니다.

 

3. 버튼만 변경되지 않을 때

폼에 별도 버튼 스타일이 적용되어 있는 경우입니다.

추가 CSS가 우선 적용되고 있는지 확인해 보세요.

---

문의폼은 홈페이지에서 실제 상담 문의가 발생하는 가장 중요한 영역 중 하나입니다.

아임웹 기본 폼도 충분히 사용할 수 있지만, HTML/CSS 커스텀 코드를 활용하면

훨씬 세련되고 전문적인 느낌의 문의폼을 만들 수 있습니다.

 

홈페이지 제작 시 작은 디자인 차이가 사용자 경험과 문의 전환에

영향을 줄 수 있으니, 문의폼 디자인도 함께 신경 써보시기 바랍니다.

 

홈페이지 제작 상담문의

믓아 스튜디오

 

입력폼 항목 두줄 배치

https://meztahstudio.tistory.com/49

 

아임웹 기본 입력폼으로 예약폼 만들기

https://meztahstudio.tistory.com/46