Divi로 인라인 연락처 양식을 만드는 방법

게시 됨: 2017-07-14

홈페이지의 영웅(또는 스크롤 없이 볼 수 있는 부분) 섹션은 주요 부동산입니다. 그리고 대부분의 부동산 개발자와 마찬가지로 공간을 최대화하기를 원합니다. 인라인 문의 양식이 유용한 곳입니다. 인라인 양식은 기본적으로 모든 필드 또는 컨트롤이 나란히, 인라인으로, 왼쪽으로 정렬된 양식입니다. 이 간결한 레이아웃은 홈페이지나 방문 페이지에서 전환수를 늘리는 데 적합합니다.

오늘은 Divi의 Visual Builder를 사용하여 웹사이트에 대한 인라인 문의 양식을 만드는 방법을 보여 드리겠습니다. 이 작업을 수행하는 데 필요한 작업은 실제로 양식 필드의 너비와 정렬을 모두 조정하는 것입니다. 이를 달성하기 위해 연락처 모듈의 디자인 기능을 활용하고 고급 탭에 일부 사용자 지정 CSS를 추가합니다.

Divi를 처음 사용하는 경우 고급 탭이 이 튜토리얼을 진행하는 데 방해가 되지 않도록 하십시오. 나는 일을 간단하고 명확하게 유지하기 위해 최선을 다했습니다.

즐기다.

다음은 인라인 문의 양식이 어떻게 생겼는지에 대한 예입니다.

인라인 문의 양식

개념 및 영감

자동차 보험에 가입하거나 온라인으로 새 집을 찾아야 하는 경우 최소한의 입력 필드로 의도적으로 압축된 인라인 양식을 보았을 것이므로 사용자(사용자)는 새로운 견적. 그래서 Divi 사용자에게 비슷한 기능을 제공하는 간단한 인라인 문의 양식을 만들고 싶었습니다. 이 연락처 양식은 견적을 생성하거나 주택 목록을 불러오는 것과 같은 작업을 수행할 수 없지만 클라이언트 또는 사용자가 쉽게 연락할 수 있는 방법을 제공하려는 비즈니스 소유자 또는 블로거의 요구에는 적합합니다.

Divi로 디자인 구현하기

YouTube 채널 구독

단일 열 구조 행이 있는 일반 섹션을 추가하는 것으로 시작합니다.

인라인 문의 양식

나머지 요소는 흰색 배경에서 보기 어려울 것이므로 섹션 설정 으로 이동하고 다음을 업데이트하여 섹션에 배경색을 추가해 보겠습니다.

콘텐츠 옵션

배경색: #006ea5

인라인 문의 양식

설정 저장

이제 연락처 양식 모듈을 행에 추가할 수 있습니다.

인라인 문의 양식

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

콘텐츠 옵션

제출 버튼 텍스트: "견적 받기"
이메일: [메시지를 보낼 이메일 주소 입력]
보안 문자 표시: 아니요
양식 배경색: rgba(255,255,255,0)

인라인 문의 양식

디자인 옵션

양식 필드 글꼴: Lato
양식 필드 글꼴 크기: 24px
양식 필드 텍스트 색상: #ffffff
입력 테두리 반경: 3px
테두리 사용: 예
테두리 색상: #ffffff
테두리 너비: 1px
버튼 텍스트 크기: 24px 데스크탑, 20px 태블릿, 20px 스마트폰
버튼 텍스트 색상: #0c71c3
버튼 배경색: #f4f11f
버튼 테두리 너비: 3px
버튼 테두리 반경: 3

인라인 문의 양식

설정 저장

콘텐츠 탭으로 돌아가서 필드 표시줄 오른쪽에 있는 휴지통 아이콘을 클릭하여 메시지 필드를 삭제합니다. 그런 다음 개별 필드 막대 아래에 흰색 더하기 기호가 있는 회색 원 버튼을 클릭하여 새 필드를 추가합니다. 이것은 전화 필드가 될 것입니다.

인라인 문의 양식

다음과 같이 필드 설정 을 업데이트합니다.

콘텐츠 옵션

필드 ID: "전화"
제목: 전화

인라인 문의 양식

디자인 옵션

전각 만들기: 아니요
허용되는 기호: 숫자만(0-9)

인라인 문의 양식

고급 옵션

기본 요소 상자에 다음 사용자 정의 CSS를 입력합니다. 

Max-width: 18%;
Float: left;
Margin-top: -1.5%;
Clear: none !important;

인라인 문의 양식

설정 저장

이제 Contact Form Settings의 Content 탭으로 돌아가서 방금 생성한 Phone 필드를 복제 하고 Zip Code 필드로 바꿉니다.

인라인 문의 양식

다음과 같이 필드 설정 을 업데이트합니다.

콘텐츠 옵션

필드 ID: "Zip"
제목: 우편번호

인라인 문의 양식

고급 옵션

기본 요소 상자에 다음 사용자 정의 CSS를 입력합니다. 

Max-width: 17%;
Margin-top: -1.5%;

인라인 문의 양식

설정 저장

지금까지 전화 및 우편 번호 필드의 너비와 정렬을 조정했습니다. 이제 이름 및 이메일 필드에 대해 동일한 작업을 수행해야 합니다.

이름 필드 설정으로 이동하여 기본 요소 상자 내에서 다음 사용자 정의 CSS로 고급 옵션 을 업데이트하십시오. 

Max-width: 20%;
Margin-top: -1.5%;

인라인 문의 양식

설정 저장

다음으로 이메일 필드 설정 으로 이동하여 기본 요소 상자 내에서 다음 사용자 정의 CSS로 고급 옵션 을 업데이트하십시오. 

Max-width: 20%;
Margin-top: -1.5%;

인라인 문의 양식

설정 저장

중요 참고 사항: 각 필드에 사용되는 사용자 정의 CSS에는 특정 백분율로 설정된 max-width 속성이 있습니다. 이 백분율은 필드가 콘텐츠 영역의 너비와 관련되는 너비를 나타냅니다. 예를 들어, Divi의 기본 콘텐츠 영역은 1080px이므로 이름 필드는 1080px의 20%입니다. 인라인 양식에 더 많은 공간을 만들고 싶은지 여부를 아는 것이 중요합니다. 필요에 따라 max-width 속성의 백분율 값을 조정하기만 하면 됩니다.

거의 끝났다. 이제 양식을 포함하는 섹션과 행의 간격을 정리하기만 하면 됩니다. 단면 설정 으로 이동하여 설계 탭 에서 다음을 업데이트합니다.

맞춤 패딩: 상단 12px, 하단 14px

인라인 문의 양식

설정 저장

이제 행 설정 으로 이동하여 디자인 탭 아래에서 다음을 업데이트합니다.

맞춤 패딩: 48px 상단, 0px 오른쪽, 0px 하단, 0px 왼쪽

인라인 문의 양식

설정 저장

반응형 만들기

이것은 가로 형식이기 때문에 모바일 장치에서 양식 필드를 조정해야 합니다. 이 문제를 해결하려면 사용자 정의 CSS의 작은 스니펫 하나만 있으면 됩니다. 페이지 설정 으로 이동하고 고급 탭 아래에서 사용자 정의 CSS 상자에서 다음을 입력합니다. 

@media (max-width: 767px) {

p.et_pb_contact_field {
max-width: 100% !important;
}
}

다음은 양식이 다양한 화면 크기에 응답하는 방식입니다.

인라인 문의 양식

3필드 인라인 문의 양식 만들기

인라인 문의 양식

이제 4개의 필드가 있는 인라인 양식을 만들었으므로 몇 가지 옵션을 업데이트하여 3개의 양식 필드로 쉽게 변환할 수 있습니다. 단계는 다음과 같습니다.

  1. 방금 만든 인라인 양식을 편집하거나 양식을 복제합니다.
  2. 우편번호 필드 삭제(이제 필드가 3개만 있음)
  3. 고급 탭에서 전화 필드(또는 세 번째 필드가 무엇이든) 설정을 업데이트하십시오. 
    Main Element box:max-width: 25%;
float:left;
margin-top: -1.5%;
clear: none !important;
  4. 기본 요소 상자에 다음 사용자 정의 CSS를 사용하여 고급 탭 아래의 이메일 필드(또는 두 번째 필드) 설정을 업데이트하십시오. 
    max-width: 25%;
margin-top: -1.5%;
  5. 기본 요소 상자에 다음 사용자 정의 CSS를 사용하여 고급 탭 아래의 이름 필드(또는 첫 번째 필드가 무엇이든) 설정을 업데이트하십시오. 
    max-width: 25%;
margin-top: -1.5%;

참고: 각 필드의 최대 너비 속성은 이제 필드 너비를 늘리기 위해 25%입니다.

2필드 인라인 문의 양식 만들기

인라인 문의 양식

몇 가지 옵션을 업데이트하여 인라인 양식을 2필드 양식으로 변환할 수도 있습니다. 단계는 다음과 같습니다.

  1. 방금 만든 인라인 양식을 편집하거나 양식을 복제합니다.
  2. 두 개의 필드(이름 및 이메일)만 있도록 우편 번호 필드와 전화 필드를 삭제합니다.
  3. 기본 요소 상자에 다음 사용자 정의 CSS를 사용하여 고급 탭 아래의 이름 필드(또는 첫 번째 필드가 무엇이든) 설정을 업데이트하십시오. 
    max-width: 37%;
margin-top: -1.5%;
  4. 기본 요소 상자에 다음 사용자 정의 CSS를 사용하여 고급 탭 아래의 이메일 필드(또는 두 번째 필드) 설정을 업데이트하십시오. 
    max-width: 37%;
margin-top: -1.5%;
clear: none !important;

다른 필드 유형 추가

이 튜토리얼은 주로 일반 입력 필드 유형을 위한 것이지만 다른 필드 유형으로 쉽게 변경할 수 있습니다. 예를 들어 선택 드롭다운 필드 유형을 사용하려는 경우 다른 필드에 적용한 것과 동일한 스타일을 모두 적용할 수 있습니다. 그러나 옵션을 보려면 해당 특정 필드에 배경색(#006ea5)을 추가해야 합니다.

드롭다운 필드는 다음과 같습니다.

인라인 문의 양식

마지막 생각들

내 경험상 인라인 문의 양식은 비즈니스를 위한 강력한 도구가 될 수 있습니다. 더 강력한 옵션이 포함된 고급 플러그인이 있지만 다른 플러그인이 마음에 들지 않고 더 간단한 솔루션이 이해가 된다면 이 플러그인을 사용해 보세요. 너가 좋아하길 바래.

귀하의 의견을 기다리겠습니다.