워드프레스 Divi 테마에서 제공하는 컨택트 폼을 설정하는 방법

워드프레스 정보를 제공하는 블로그 Avada 2019. 8. 2. 17:07 • 댓글:

워드프레스에서는 Contact Form 7 같은 무료 컨택트 폼 플러그인이나 Quform 같은 유료 플러그인으로 문의 폼을 만들어 사용자나 고객으로부터 문의나 견적 또는 서비스 요청을 받을 수 있습니다.

[참고*아바다 테마엘리멘터 프로 등에도 자체적으로 문의폼 기능을 제공합니다. 테마에서 문의폼 기능을 제공하는 경우 Cotnact Form 7이나 WPForms와 같은 외부 컨택트 폼 플러그인을 사용하지 않고 자체 문의폼을 사용하는 것이 바람직합니다. 자체 문의폼으로 기능을 구현하기 어려운 경우에는 유료 컨택트 폼 플러그인을 고려할 수 있습니다.*]

워드프레스 Divi 테마에서 제공하는 컨택트 폼을 설정하는 방법

Divi 테마를 사용하는 경우 자체적으로 제공하는 컨택트 폼 모듈을 사용할 수 있습니다.

워드프레스 Divi 테마 컨택트 폼 모듈

미리 만들어진 Contact 페이지 레이아웃을 사용하면 보다 수월하게 컨택트 폼을 만들 수 있습니다.

워드프레스 Divi 테마 컨택트 레이아웃

Load From Library에서 Contact로 검색해보면 126개 레이아웃이 검색됩니다. 마음에 드는 레이아웃을 로드하여 컨택트 폼 부분만을 활용할 수 있습니다.

예를 들어, 다음은 Personal Stylist 레이아웃 팩에 포함된 컨택트 폼 페이지 디자인입니다.

워드프레스 Divi용 Personal Stylist 레이아웃 팩

컨택트 폼에 표시되는 필드, 라벨, 수신자 이메일 등의 옵션을 설정하려면 추가한 컨택트 폼 모듈에 마우스를 올리고 설정 아이콘을 클릭합니다. 

워드프레스 Divi 테마 컨택트 폼 설정

그러면 오른쪽 패널에 설정 페이지가 표시됩니다.

워드프레스 Divi 테마 컨택트 폼 Contact Form 모듈 설정

Content 탭에서 새로운 필드를 추가하고(1), 라벨과 메시지(2)를 설정할 수 있습니다. 그리고 이메일, Captcha, 리디렉션 등 다양한 옵션을 설정할 수 있습니다.

Text 부분에서 다음 항목을 설정할 수 있습니다.

  • Title - 컨택트 폼 제목
  • Success Message - 컨택트 폼 제출 후 표시할 메시지(성공 시)
  • Submit Button - 보내기 버튼 라벨

Email 섹션을 클릭하여 수신자 이메일 주소와 메시지 패턴을 설정할 수 있습니다.

워드프레스 Divi 테마 컨택트 폼 설정 - 이메일

Message Pattern에서는 "My message is %%message%% and phone number is %%phone%%"처럼 이메일 메시지를 사용자 정의할 수 있습니다. 직접 이메일 메시지의 형식을 지정하려는 경우 여기에 지정하고, 그렇지 않으면 빈 칸으로 두면 됩니다.

Elements에서는 Captcha를 표시할 지 여부를 지정할 수 있습니다. 스팸 문의가 많이 들어오면 이 옵션을 활성화할 수 있습니다.

Redirect에서는 양식 제출 후 사용자가 이동할 URL을 지정할 수 있습니다. 이 옵션을 활성화하면 Redirect URL에 문의 폼 제출 후 표시할 URL을 입력하도록 합니다.

워드프레스 Divi 테마 컨택트 폼 - Redirect 설정

Design 탭에서는 컨택트 폼의 텍스트 색상, 배경색 등의 디자인을 설정할 수 있습니다.

워드프레스 Divi 테마 컨택트 폼 - 디자인 설정

Divi 테마에서 간단하게 컨택트 폼을 만들려는 경우 자체적으로 제공하는 컨택트 폼을 이용하면 편리합니다.

하지만 자체적으로 제공되는 컨택트 폼 모듈에서는 사용자가 제출한 데이터를 이메일로만 전송하고 DB에 저장하는 기능은 없습니다. 고급 기능을 원하는 경우 Quform 같은 플러그인을 활용합니다.

워드프레스 Divi 테마

참고: