아임웹 문의폼 2단 배치 만들기 | 문의폼 2열 구성 커스텀 코드

아임웹 문의폼이 너무 길어 보인다면?

 

아임웹 기본 문의폼은 대부분 모든 항목이 세로로 배치됩니다.

항목이 많아질수록 화면이 길어지고 사용자는 입력 과정에서 피로감을 느끼게 됩니다.

 

특히 홈페이지 제작, 상담 신청, 견적 문의 페이지처럼

전환이 중요한 페이지에서는 입력폼의 구조도 매우 중요합니다.

이번 커스텀 코드는 전화번호와 이메일 항목을 한 줄에 배치하여 폼을 더욱 깔끔하게 정리할 수 있는 방법입니다.

 

실제 구현 예시

믓아 스튜디오

 

---

 

이 코드로 구현되는 기능

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

✔ 전화번호 + 이메일을 한 줄에 배치

✔ PC에서는 2단 구조

✔ 모바일에서는 자동으로 1단 구조

✔ 문의폼 높이 감소

✔ 입력 과정이 간결해 보이는 효과

✔ 별도 플러그인 없이 CSS만으로 적용 가능

홈페이지 제작 시 문의 전환율을 높이기 위해 자주 사용하는 방식입니다.

---

 

이런 상황에서 사용하면 좋습니다

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

특히 모바일 사용자가 많은 업종에서는 입력폼 길이를 줄이는 것만으로도 사용자 경험이 크게 개선됩니다.

---

적용 방법

1단계 아임웹 관리자 접속

디자인 모드 → 코드 위젯 추가

2단계 항목 입력폼 ID 확인

개발자도구(F12) 항목 입력폼 ID를 확인합니다.

 

 

3단계 아래 코드를 코드 위젯에 붙여넣기

문의폼보다 아래쪽에 배치하면 적용됩니다.

---

전체 코드

<style>
#w20260609ea54d4bc51d23 #addFormw20260609ea54d4bc51d23{
  display:flex !important;
  flex-wrap:wrap !important;
  gap:0 16px !important;
}

#w20260609ea54d4bc51d23 .form-group{
  width:100% !important;
}

#w20260609ea54d4bc51d23 #phonenumber_1b67c87f9a077,
#w20260609ea54d4bc51d23 #email_53Qyxs2720{
  width:calc(50% - 8px) !important;
}

#w20260609ea54d4bc51d23 .phonenumber_wrap{
  display:flex !important;
  align-items:center !important;
  gap:6px !important;
}

#w20260609ea54d4bc51d23 .phonenumber_wrap input{
  flex:1 !important;
  width:100% !important;
  min-width:0 !important;
}

#w20260609ea54d4bc51d23 .phonenumber_wrap .line{
  flex:0 0 auto !important;
}

#w20260609ea54d4bc51d23 #email_53Qyxs2720 .email_wrap input{
  width:100% !important;
}

@media (max-width:768px){
  #w20260609ea54d4bc51d23 #addFormw20260609ea54d4bc51d23{
    display:block !important;
  }

  #w20260609ea54d4bc51d23 #phonenumber_1b67c87f9a077,
  #w20260609ea54d4bc51d23 #email_53Qyxs2720{
    width:100% !important;
  }
}
</style>

---

코드 수정 포인트

1. 간격 조정

현재

gap:0 16px;

숫자를 변경하면 두 항목 사이의 간격을 조정할 수 있습니다.

 

2. 모바일 전환 시점 변경

현재

@media (max-width:768px)

768px 이하에서 모바일 레이아웃으로 변경됩니다.

원하는 경우

@media (max-width:991px)

등으로 수정 가능합니다.

 

3. 다른 항목으로 변경하기

현재는

• 전화번호
• 이메일

항목이 2열로 구성됩니다.

원한다면

• 이름 + 연락처
• 회사명 + 연락처
• 지역 + 연락처

등으로 변경할 수 있습니다.

단, 해당 필드 ID를 확인한 후 수정해야 합니다.

---

 

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

1. 적용이 안되는 경우

대부분 위젯 ID가 다르기 때문입니다.

#w20260609ea54d4bc51d23

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

 

2. 모바일에서 깨지는 경우

캐시 문제일 가능성이 높습니다.

브라우저 새로고침(Ctrl + Shift + R)을 진행해 보세요.

 

3. 이메일 입력창 폭이 이상한 경우

이메일 필드 구조가 기본 폼과 다를 수 있습니다.

개발자도구로 실제 클래스를 확인한 뒤 선택자를 수정해야 합니다.

---

 

마무리

아임웹 기본 문의폼도 충분히 사용할 수 있지만, 입력 항목의 배치만 조금 바꿔도 훨씬 전문적인 느낌을 만들 수 있습니다.

특히 홈페이지 제작이나 상담 중심 랜딩페이지에서는 문의 버튼만큼 입력폼 구조도 중요합니다.

HTML/CSS를 활용한 간단한 커스텀 코드만으로도 전환율과 사용자 경험을 함께 개선할 수 있으니 한 번 적용해 보시기 바랍니다.

 

홈페이지 제작 상담 문의

믓아 스튜디오

 

아임웹 입력폼 하단 고정

아임웹 입력폼 커스텀 | 입력폼을 하단 고정 문의바로 만드는 방법 (HTML/CSS/JS)