Divi의 문의 양식 모듈로 견적 양식을 만드는 방법

견적 양식(견적 요청 양식이라고도 함)은 전화를 받는 번거로움 없이 자격을 갖춘 리드를 확보하려는 소규모 비즈니스에 훌륭한 솔루션입니다. 좋은 견적 양식은 적절한 자격을 갖춘 질문을 함으로써 서비스를 받을 준비가 되지 않은 나쁜 달걀을 분류할 수 있습니다. 또한 효과적인 응답/제안을 준비하고 전화를 받으면 판매를 종료할 수 있도록 클라이언트의 요구 사항을 정확히 파악하는 데 도움이 될 수 있습니다.

양식 처리 전용인 훌륭한 양식 플러그인이 많이 있습니다. 그러나 Divi 사이트를 위한 간단하고 효과적인 솔루션을 찾고 있다면 Divi의 업데이트된 문의 양식 모듈이 바로 당신에게 필요한 것입니다.

오늘은 조건부 논리를 사용하여 리드를 더 잘 검증하는 간단하면서도 강력한 견적 양식을 작성하는 과정을 안내해 드리겠습니다. 또한 양식을 더욱 깔끔하고 읽기 쉽게 만드는 사용자 지정 CSS를 사용하여 몇 가지 고급 디자인 기능을 추가할 것입니다.

시작하자.

Divi로 디자인 구현하기

전체 화면 헤더 섹션 만들기

견적 양식은 모든 페이지에 추가할 수 있지만 이 예에서는 견적 양식 전용 페이지를 사용하겠습니다.

방문자를 환영하기 위해 사용자가 버튼을 클릭하거나 양식을 보기 위해 스크롤하도록 하는 전체 화면 헤더를 사용하고 있습니다. 이것은 보다 개인적인 경험을 제공하고 사용자가 양식을 보기 전에 스크롤하고 클릭하는 아이디어를 제공하는 멋진 기능입니다. 어떤 경우에는 작성해야 할 긴 양식 외에는 아무것도 없는 페이지에 도달했을 때 다소 초대받지 못하고 압도적으로 보입니다. 이것은 물론 선택 사항이며 전체 화면 헤더 없이 더 잘 변환되는지 확인하기 위해 확실히 테스트합니다.

Visual Builder를 사용하여 전체 너비 섹션과 전체 너비 헤더 모듈을 페이지 상단에 추가합니다.

다음과 같이 전체 너비 헤더 설정을 업데이트합니다.

콘텐츠 옵션

제목: [제목을 입력하십시오. "인용 양식"과 같은 지루한 제목보다 더 개인적인 것을 시도하십시오]
소제목 텍스트: [소제목 텍스트 입력]

버튼 #1 텍스트: [버튼 텍스트 입력; "나에게 보여줘" 또는 "이것을 해보자"와 같은 것]
버튼 #1 URL: #quote(아래 양식이 포함된 섹션으로 스크롤되는 앵커 CSS ID에 사용됨)
로고 이미지 URL: [로고 이미지 입력]
배경 오버레이: rgba(0,0,0,0.7)
배경 이미지: [1920 x 1080 배경 이미지 업로드]

디자인 옵션

텍스트 및 로고 방향: 중앙
전체 화면 만들기: 예
아래로 스크롤 버튼 표시: 예
아이콘: [아이콘 선택]
아래로 스크롤 아이콘 색상: #999999
텍스트 색상: 라이트
제목 글꼴: Ubuntu
제목 글꼴 크기: 36px
부제 글꼴: Ubuntu
부제목 글꼴 크기: 22px
버튼 1에 사용자 정의 스타일 사용: 예
버튼 하나의 텍스트 크기: 20px
버튼 하나의 텍스트 색상: #ffffff
버튼 하나의 배경색: #e09900;
버튼 하나 테두리 색상: #e09900
버튼 한 글자 간격: 1px
버튼 원 글꼴: Ubuntu

설정 저장

견적 양식 작성

이제 견적 양식에는 Divi의 Contact Form Module을 사용할 것입니다. 먼저 전폭(1열) 행이 있는 일반 섹션을 추가해야 합니다. 그런 다음 행에 연락처 양식 모듈을 추가합니다.

다음과 같이 문의 양식 설정을 업데이트합니다.

콘텐츠 옵션?

제목: [연락처 양식의 제목을 정의하거나 추가 지침을 추가]
제출 버튼 텍스트: 견적 받기
이메일: [메시지를 보낼 이메일 주소 입력]
리디렉션 URL 활성화: 예(선택 사항이지만 좋은 생각입니다)
리디렉션 URL: [맞춤 감사 페이지로 리디렉션 URL 입력]

디자인 옵션

제목 글꼴: Ubuntu
제목 글꼴 크기: 30px
제목 글자 간격: 1px
양식 필드 글꼴: Ubuntu
양식 필드 글꼴 크기: 24px
양식 필드 텍스트 색상: #e09900
입력 테두리 반경: 5px
테두리 사용: 예
테두리 색상: #999999
테두리 너비: 1px
버튼에 사용자 정의 스타일 사용: 예
버튼 텍스트 크기: 24px
버튼 텍스트 색상: #ffffff
버튼 배경색: #e09900;
버튼 테두리 색상: #e09900
버튼 문자 간격: 1px
버튼 글꼴: 우분투

고급 옵션(사용자 정의 CSS)

보안 문자 필드:

Font-size: 24px;
Max-width: 60px;
Padding: 16px 14px 14px;

보안 문자 텍스트:

Font-size: 24px

설정 저장

견적 양식 필드 추가

설정한 것이 아니라 양식 항목을 추가할 때입니다. 기본적으로 양식에는 "이름", "이메일" 및 "메시지" 필드가 있습니다. "메시지"를 삭제할 수 있습니다.

회사 분야

"이메일" 필드 아래에 새 필드를 추가하고 다음과 같이 콘텐츠 옵션에서 설정을 업데이트합니다.

필드 ID : 회사
제목 : 귀사의 이름은 무엇입니까?
필수 필드 : 예

서비스 분야

"회사" 필드 아래에 새 필드를 추가하고 다음과 같이 콘텐츠 옵션에서 설정을 업데이트합니다.

필드 ID : 서비스
제목 : 오늘 어떻게 도와드릴까요?
유형 : 라디오 버튼
옵션 :

• 웹사이트 제작
• 앱 개발
• 아트 디렉션
• 비디오 제작

필수 필드 : 예

예술 목적 분야

"서비스" 필드 아래에 새 필드를 추가하고 다음과 같이 콘텐츠 옵션에서 설정을 업데이트합니다.

필드 ID : art_purpose
제목 : 어떤 아트 디렉션이 필요한가요?
유형 : 라디오 버튼
옵션 :

• 그래픽 디자인
• 광고하는
• 브랜딩
• 포장

필수 필드 : 예
조건부 논리 활성화
관계 : 아무
규칙 : 오늘 어떻게 도와드릴까요? > 같음 > 아트 디렉션

참고 : 이 논리는 사용자가 이전 질문에서 "아트 디렉션"을 선택할 때마다 이 필드를 표시합니다.

웹 목적 필드

"art_purpose" 필드 아래에 새 필드를 추가하고 다음과 같이 콘텐츠 옵션에서 설정을 업데이트합니다.

필드 ID : web_purpose
제목 : 어떤 웹사이트가 필요하세요?
유형 : 라디오 버튼
옵션 :

• 전자상거래
• 블로그
• 웹 앱
• 방문 페이지

필수 필드 : 예
조건부 논리 활성화
관계 : 아무
규칙 : 오늘 어떻게 도와드릴까요? > 같음 > 웹사이트 제작

참고 : 이 논리는 사용자가 이전 질문에서 "웹 프로덕션"을 선택할 때마다 이 필드를 표시합니다.

비디오 필드

"web_purpose" 필드 아래에 새 필드를 추가하고 다음과 같이 콘텐츠 옵션에서 설정을 업데이트합니다.

필드 ID : 비디오
제목 : 어떤 기기에서 동영상을 표시하시겠습니까?
유형 : 라디오 버튼
옵션 :

• 휴대전화
• 태블릿
• 모니터 또는 TV
• 영사기

필수 필드 : 예
조건부 논리 활성화
관계 : 아무
규칙 : 오늘 어떻게 도와드릴까요? > 같음 > 비디오 제작

참고 : 이 논리는 사용자가 이전 질문에서 "비디오 생성"을 선택할 때마다 이 필드를 표시합니다.

앱 플랫폼 분야

"비디오" 필드 아래에 새 필드를 추가하고 다음과 같이 콘텐츠 옵션에서 설정을 업데이트합니다.

필드 ID : app_platform
제목 : 어떤 플랫폼에서 앱을 개발하시겠습니까?
유형 : 라디오 버튼
옵션 :

• iOS
• 기계적 인조 인간
• 창
• 블랙베리

필수 필드 : 예
조건부 논리 활성화
관계 : 아무
규칙 : 오늘 어떻게 도와드릴까요? > 같음 > 앱 개발

참고 : 이 논리는 사용자가 이전 질문에서 "앱 개발"을 선택할 때마다 이 필드를 표시합니다.

예산 필드

"app_platform" 필드 아래에 새 필드를 추가하고 다음과 같이 콘텐츠 옵션에서 설정을 업데이트합니다.

필드 ID : 예산
제목 : 예산이 있다면 알려주세요.
유형 : 라디오 버튼
옵션 :

• $1,000 미만
• 약 $5,000
• $10,000 이상

필수 필드 : 아니오
조건부 논리 활성화
관계 : 아무
규칙 :
오늘 어떻게 도와드릴까요? > 같음 > 앱 개발
오늘 어떻게 도와드릴까요? > 같음 > 비디오 제작
오늘 어떻게 도와드릴까요? > 같음 > 웹사이트 제작
오늘 어떻게 도와드릴까요? > 같음 > 아트 디렉션

설정 저장

앵커 CSS ID 추가

돌아가서 양식이 포함된 섹션의 섹션 설정을 편집합니다. 고급 탭에서 CSS ID "따옴표"를 입력합니다.

이것은 전체 너비 헤더의 버튼 URL에 해당하므로 버튼을 클릭하면 해당 섹션으로 스크롤됩니다.

견적 양식 열에 대한 사용자 정의 너비 설정

그런 다음 견적 양식이 포함된 행의 행 설정으로 이동하여 다음과 같이 디자인 옵션을 업데이트합니다.

사용자 정의 너비 사용: 예
사용자 정의 너비: 556px

추가 디자인 사용자 정의

이 견적 양식의 경우 라디오 버튼을 사용하고 있습니다. 라디오 버튼/원을 클릭하면 원형 필러의 색상이 테마 사용자 정의 > 일반 설정 > 레이아웃 설정 > 사이트 테마 강조 색상에 해당합니다.

라디오 버튼 채우기 색상에 대한 사이트 전체의 테마 강조 색상을 변경하지 않으려면 페이지 설정으로 이동하여 CSS 탭에서 다음 사용자 정의 CSS를 입력하십시오.

.et_pb_contact p input[type="radio"]:checked + label i:before { background: #e09900; } 

또한 다음 CSS를 추가하여 라디오 버튼이 포함된 질문의 제목 텍스트를 사용자 정의할 수 있습니다.

.et_pb_contact_field_radio_wrapper .et_pb_contact_field_radio_title { font-size: 24px; font-family: 'ubuntu'; font-weight: 400; } 

마지막으로 라디오 버튼 목록에 스타일이 지정된 테두리를 추가하여 다음 CSS와 양식의 스타일을 일치시킬 수 있습니다.

.et_pb_contact_field_radio_wrapper .et_pb_contact_field_radio_list { float: left; overflow: hidden; border: 1px solid #999999; padding: 20px; border-radius: 4px; width: 100%; margin-top: 10px }

그게 다야

최종 결과 확인:

마지막 생각들

이 견적 양식은 견적 양식으로 수행할 수 있는 작업의 간단한 예입니다. 자체 견적 양식의 경우 리드에게 다시 전화를 걸 수 있도록 "전화 번호"와 같은 추가 필드를 추가할 수 있습니다. 더 많은 조건부 논리를 사용하여 고객의 요구 사항에 대한 보다 구체적인 정보를 얻을 수도 있습니다.

이 기사의 시작 부분에서 말했듯이 더 고급 플러그인이 있습니다. 견고한 문의 양식 솔루션을 전문으로 하는 전체 회사가 있는 데는 이유가 있습니다. 이 게시물이 Contact Form Module이 표준 연락처 양식 요구 사항의 대부분을 처리할 수 있는 방법을 보여주는 데 도움이 되었기를 바랍니다.