Elementor 문의 양식 작성에 대한 궁극적인 가이드

게시 됨: 2020-09-04

청중과 장기적인 관계를 구축할 수 있는 손쉬운 솔루션을 찾고 계십니까? 그렇다면 웹사이트에 문의 양식을 추가해야 합니다.

WordPress는 사용자를 위해 전체 프로세스를 쉽게 만들었습니다. 반면에 Elementor 사용자는 이 분야에서 한 걸음 더 나아갔습니다. Elementor 연락처 양식 위젯을 사용하면 모든 유형의 연락처 양식을 웹사이트에 즉시 포함하고 개인화할 수 있습니다. 방문자가 귀하의 웹 사이트와 쉽게 상호 작용할 수 있도록 모든 필수 필드와 기능이 포함되어 있습니다.

오늘 우리는 Elementor Contact Form 위젯을 사용하여 몇 단계로 양식을 만드는 방법을 보여줄 것입니다.

자, 함께 점프합시다!

Elementor로 연락처 양식을 만드는 방법(7가지 쉬운 단계)

시작하기 전에 Elementor의 Pro 기능임을 언급해야 합니다. 따라서 Elementor Pro를 사용하고 있고 비용이 약 49$인 경우 작동합니다.

한편, Elementor를 처음 사용하는 경우 이 초보자 가이드를 확인하여 여정을 더 원활하게 만드십시오.

1단계: 원하는 페이지에 Elementor 연락처 양식 위젯 추가

먼저 Elementor Widgets의 바다에서 Form 위젯을 찾습니다. 이제 구독자 또는 리드와 소통하기 위해 연락처 양식이 필요한 페이지를 엽니다.

Find elementor Contact form

끌어서 놓기 옵션이 있으므로 Elementor의 모든 페이지에 위젯을 매우 쉽게 추가할 수 있습니다.

혼동을 일으키지 않도록 과정을 자세히 설명합니다. 아래 GIF를 확인해주세요.

drag and drop contact form

2단계: Elementor 연락처 양식 필드 사용자 지정

Elementor가 양식을 미리 채우는 것을 이미 보았습니다. 모든 문의 양식에 반드시 있어야 하는 필수 필드가 포함되어 있습니다.

  • 이름
  • 이메일
  • 메세지

기본적으로 이 3개의 필드를 얻은 후에는 이제 요구 사항에 따라 사용자 정의할 시간입니다.

이를 위해서는 양식 설정의 내용 섹션을 확인해야 합니다.

여기에서는 Form Field 를 소개합니다. 그리고, 그것은 포함합니다-

양식 이름: 양식 의 이름입니다.

양식 필드: 이 필드에는 원하는 만큼 필드를 추가할 수 있습니다. 또한 복제 및 삭제 옵션이 있습니다. 각 필드의 설정을 보려면 해당 필드를 클릭하십시오. 여기서 얻을 수 있는 아이템은-

유형: 필드 유형을 선택합니다. 많은 옵션이 있습니다-

  • 텍스트
  • 이메일
  • 텍스트 영역
  • URL
  • 전화
  • 라디오
  • 고르다
  • 체크박스
  • 수락
  • 숫자
  • 날짜
  • 시간
  • 파일 업로드
  • 비밀번호
  • HTML
  • 숨겨진
  • reCAPTCHA
  • reCAPTCHA V3
  • 꿀단지

레이블: 양식에 표시할 필드의 이름입니다. 또한 고객이나 리드로부터 받은 이메일에 표시됩니다.

자리 표시자: 해당 필드의 프런트엔드 표시 이름입니다.

필수: 필수 필드로 필드를 켜거나 끌 수 있습니다. 이는 사용자가 양식을 제출하기 전에 해당 섹션을 작성해야 함을 의미합니다.

열 너비: 이 부분에서 필드의 너비를 설정할 수 있습니다.

Step 2: Setting Up Elementor Contact Form and Adding Fields

고급 탭

이 탭에는 옵션이 많지 않습니다. 그러나 기존 것은 얻지 못하면 더 복잡합니다.

Advanced Tab
  • 기본값: 자리 표시자 및 필드의 기본값과 다릅니다. 값을 추가하지 않은 경우 이 값은 제출 시 전송됩니다.
  • ID: 필드의 데이터를 보호하므로 수정할 필요가 없습니다.
  • 단축 코드: 다른 페이지에서 필드를 검색하려는 경우 이 코드가 도움이 될 것입니다. 그렇지 않으면 사용할 필요가 없습니다.
happyaddons

3단계: 제출 버튼 디자인

여기에서 제출 버튼을 원하는 대로 사용자 지정할 수 있습니다.

  • 크기: 이 섹션에서는 제출 버튼의 크기를 설정할 수 있습니다.
  • 열 너비: 버튼 너비 사용자 지정
  • 정렬: 정렬 을 설정합니다.
  • 아이콘: 아이콘 라이브러리에서 아이콘 추가
  • 버튼 텍스트: 제출 버튼에 표시되는 텍스트를 선택합니다.
  • 버튼 ID: 선택 사항이며 추가 사용을 위해 버튼에 고유한 ID를 부여합니다.
Step 3: Setting the Button

당신은 또한 읽을 수 있습니다: Elementor로 스포츠 웹사이트를 구축하는 방법

4단계: 제출 후 작업 구성

누군가 Elementor 문의 양식을 디자인할 때 공통 질문이 있습니다. 그리고, 그것은- 왜 양식을 제출한 후 아무 일도 일어나지 않습니까? 자, 답을 알아봅시다.

당신은 Elementor Form을 아주 잘 설정했습니다. 문제가 없습니다. 그러나 내 친구, 제출 후 조치 섹션을 설정하지 않으면   당신은 어떤 반응도 얻지 못할 것입니다.

Elementor 형태의 작업을 사용하면 훌륭한 옵션을 얻을 수 있습니다. 타사 서비스와 결합하면 훨씬 쉬워집니다. 처럼-

  • 똑똑 떨어지는 물방울 소리
  • 허브스팟
  • 메일침프
  • 느슨하게
  • 컨버터킷 등

이러한 서비스로 작업하는 것은 Elementor의 통합 통합 기능이 내장되어 있기 때문에 수월합니다. 또한 Webhook 작업을 통해 Zapier 와 연결할 수도 있습니다. 재미있는 사실은 Zapier가 1000개 이상의 서비스에 연결할 수 있다는 것입니다. 따라서 서비스와 양식 사이의 다리 역할을 하여 도움이 될 것입니다.

지금 Elementor Forms Actions는 다음을 추가합니다.

  • 이메일
  • 이메일2
  • 메일침프
  • 리디렉션
  • 웹훅
  • 똑똑 떨어지는 물방울 소리
  • 액티브캠페인
  • 응답 받기
  • 컨버터킷
  • 메일러라이트
  • 느슨하게
  • 불화
  • 팝업

따라서 양식의 제출 후 작업 옵션을 클릭하십시오. 이제 작업 추가 필드를 클릭하면 위의 모든 옵션이 표시됩니다. 필요한 것을 선택하십시오.

이메일 작업을 선택했다고 가정합니다. 여기에는 이메일 탭이 포함되며 웹 사이트의 관리자에게 결과를 표시하는 데 사용됩니다.

Step 4: Set Actions After Submit

양식 사용자 또는 양식을 제출한 사람에게 이메일을 보내려면 Email2 옵션을 선택해야 합니다.

이메일에는 다음과 같은 옵션이 있습니다.

  • 에게
  • 이메일 제목
  • 이메일 콘텐츠
  • 이메일에서
  • 이름에서
  • 답장하다
  • 참조
  • 기원전
  • 메타 데이터
  • 다른 이름으로 보내기

조건을 설정하고 웹사이트와 원활하게 작동할 수 있도록 양식 작업을 사용자 지정합니다.

사람들이 Elementor에서 자주 묻는 질문을 확인하세요.

5단계: Elementor 연락처 양식 메시징 사용자 지정

Elementor 양식 편집기는 항상 필요에 따라 양식을 사용자 정의할 수 있습니다. 양식에 오류와 같은 문제가 발생하거나 성공적으로 제출하면 사용자에게 메시지가 표시되어야 합니다.

여기에서 해당 메시지를 사용자 정의할 수 있습니다. 이것은 Elementor 문의 양식의 고급 기능입니다.

따라서 추가 옵션 을 클릭하고 사용자 정의 메시지 를 아니오로 설정하십시오.

Step 5: Setting Elementor Contact Form for Custom Messaging

이제 4개의 다른 메시지를 편집할 수 있습니다.

  • 성공 메시지: 이 메시지는 양식을 성공적으로 작성하고 제출한 사용자에게 표시됩니다.
  • 오류 메시지: 양식을 제출하는 동안 알 수 없는 오류가 발생하면 양식 사용자에게 표시됩니다.
  • 필수 메시지: 양식 필드가 필수이지만 사용자가 채우지 않고 양식을 제출할 때 표시됩니다.
  • 잘못된 메시지: 사용자가 잘못된 휴대폰 번호 또는 이메일 주소를 추가한 경우 표시됩니다.

6단계: Elementor 연락처 양식의 스타일 사용자 지정

귀하의 웹사이트와 일치하는 단조로운 형태의 양식을 제공해야 합니다. 일치하지 않으면 얼마나 지루할지 생각하십시오. 다행히 Elementor에는 사용자 지정 스타일 옵션이 있습니다. 아주 쉽습니다.

스타일 탭을 클릭합니다 . 연락처 양식의 전체 스타일을 변경할 수 있는 다양한 설정과 옵션이 있습니다.

Step 7: Set the Styling of Your Elementor Contact Form

7단계: Elementor 문의 양식 게시

당신은 모든 것을 아주 잘 설정했습니다. 이제 사이트 사용자를 위해 양식을 공개할 차례입니다. 아래 이미지와 같이 양식 세트 하단에 있는 업데이트 버튼을 클릭합니다.

Step 8: Publishing the Elementor Contact Form

축하합니다! 성공적으로 완료했습니다. 이제 이 페이지에 실시간으로 표시되며 더 많은 리드와 구독자를 수집할 수 있습니다.

연락처 양식의 최종 보기를 살펴보겠습니다.

Final-View-of-Elementor-Contact-Form

체크 아웃..

무료로 Happy Form 위젯을 사용하여 Elementor에서 양식 디자인을 개인화하는 방법!

Elementor 문의 양식에 대한 최종 생각

휴! 이 튜토리얼을 통해 모든 혼란이 명확해지기를 바랍니다. 실제로 연락처 양식을 만들고 디자인하는 것은 요구 사항과 선택 사항에 따라 다릅니다.

양식을 페이지 보기와 일치시키는 것을 잊지 마십시오. 그렇지 않으면 청중에게 이상하게 보일 것입니다.

양식의 제출 후 작업추가 옵션 부분 을 확실히 사용자 지정하는 것이 좋습니다. 이 섹션을 편집하지 않으면 완전히 실망스러운 작업에 대한 반영을 얻을 수 없습니다.

또한 아래 의견 섹션에서 Elementor 문의 양식을 만드는 데 어려움이 있으면 알려주십시오.


몇 분 안에 완전히 새로운 웹사이트를 만들기 위해 HappyAddons를 사용해 보셨습니까? 이 Elementor 애드온의 기능을 확인하여 웹사이트를 멋지게 꾸며보세요.

모든 놀라운 행복한 기능을 확인하겠습니다