Elementor를 사용하여 WordPress에서 연락처 양식을 만드는 방법

소개

웹사이트에 연락처 양식을 만드는 것은 방문자가 이메일 주소를 뒤지거나 코드를 수정하지 않고도 실제로 연락할 수 있도록 하는 데 매우 중요합니다.어려운 내용은 아니지만, Elementor는 특히 처음 사용하는 경우 다소 까다로울 수 있습니다.그래서 Elementor를 사용하여 WordPress 사이트에 깔끔한 연락처 양식을 구축하고 실행하는 간단한 방법을 소개합니다.대부분 드래그 앤 드롭 방식이지만, 가끔씩 약간 불안정하게 작동하더라도 놀라지 마세요. WordPress와 Elementor는 사용하기 까다롭기 때문입니다.

시작하기 전에 다음 사항을 확인하세요.

• 실제로 작동하는 호스팅을 갖춘 WordPress 웹사이트.
• Elementor 플러그인을 설치하고 활성화했습니다(양식 위젯을 사용하려면 Elementor Pro가 필수입니다).아직 무료 플랜을 사용 중이시라면 Pro로 업그레이드하거나 다른 해결책을 찾아야 합니다.

1단계: Elementor 설치

Elementor가 아직 설치되지 않았거나 이상하게 작동하는 경우, 간단히 다음과 같이 설명해 드리겠습니다.

1. WordPress 관리자 대시보드에 로그인합니다.
2. 플러그인 > 새로 추가 로 이동합니다.
3. Elementor 를 검색하세요.팝업 창이 나타나면 지금 설치를 클릭한 후 활성화를 클릭 하세요.
4. 모든 기능을 원하신다면 Elementor 웹사이트 를 방문해 보세요.플랜을 선택하고 라이선스를 구매한 후, 안내에 따라 설치하세요.라이선스가 다소 불안정할 수 있으니, 활성화하는 데 몇 번 시도해야 하더라도 놀라지 마세요.

2단계: 연락처 양식을 위한 새 페이지 만들기

연락처 양식을 작성하려면 빈 캔버스가 필요합니다.간단한 설명은 다음과 같습니다.

1. 대시보드 > 페이지 > 새로 추가.
2. ‘문의하기’ 같은 이름으로 하세요.솔직히 간단하게 하세요.
3. ‘초안 만들기’ 를 클릭한 다음 ‘Elementor로 편집’을 클릭하세요.이제 재미있는 부분이 열립니다.

3단계: 새 섹션 추가

Elementor 편집기 내부:

1. 섹션을 추가하려면 더하기(+) 아이콘을 클릭하세요.
2. 양식을 깔끔하게 중앙에 배치하려면 단일 열 레이아웃을 선택하세요.

4단계: 연락처 양식 위젯 추가

무료 버전을 사용 중이시라면 이 부분에서 약간 답답함을 느끼실 수 있습니다. Form 위젯은 Pro 버전에서만 사용 가능하기 때문입니다. Pro 버전을 사용 중이시라면 다음 단계를 따르세요.

1. Elementor 패널에서 양식 위젯을 찾으세요(Elementor Pro에 있습니다).
2. 새로운 섹션으로 끌어다 놓으세요.간단하죠?

Pro가 없다면 타사 양식 플러그인이 필요하거나 다른 서비스(예: WPForms 또는 Contact Form 7)의 연락처 양식을 내장해 보세요.하지만 그건 별개의 문제입니다.

5단계: 양식 필드 사용자 지정

기본 양식에는 이름, 이메일, 메시지 등 기본적인 정보가 있어야 합니다.이 정보들을 다음과 같이 조정할 수 있습니다.

1. 각 필드를 클릭하여 라벨을 편집하고, 필수인지 여부를 전환하거나, 플레이스홀더 텍스트를 추가합니다.
2. 더 좋은 아이디어가 있으신가요? 전화번호, 제목, 또는 옵션 드롭다운 메뉴와 같은 필드를 추가하세요.필요에 따라 새 필드를 드래그하여 추가하기만 하면 됩니다.

6단계: 양식 설정 구성

중요한 부분은 사용자가 제출 버튼을 누른 후 실제로 양식이 작동하는 방식을 설정하는 것입니다.

• 제출 후 작업 에서 이메일이 선택되어 있는지 확인하여 알림을 받으세요.
• 톱니바퀴 아이콘을 눌러 설정을 열고 제출물을 받을 이메일 주소를 입력하세요.주의하세요.오타는 메시지를 받지 못했음을 의미합니다.예를 들어, .을 사용하세요 [email protected].
• 문제가 발생하면 서버의 이메일 설정을 다시 확인해 보세요(호스팅 버그가 있는 경우도 있습니다).일부 호스트에서는 SMTP 설정을 구성하지 않으면 WordPress에서 보내는 이메일이 불안정할 수 있습니다.필요한 경우 WP Mail SMTP와 같은 플러그인을 검색해 보세요.
• 확인 메시지를 추가하거나 방문자가 메시지를 보낸 후 감사 페이지로 리디렉션할 수도 있습니다.공유 호스팅에서는 이 기능이 아무 소리도 나지 않고 작동하지 않는 경우가 있으므로, 꼼꼼히 테스트해 보세요.

7단계: 연락처 양식 스타일 지정

과하지 않으면서도 괜찮아 보이도록 하세요:

• 스타일 탭 에서 색상, 글꼴, 테두리 등 사이트에 어울리는 요소를 조정하세요.
• 솔직히 말해서, 모바일 반응성이 가끔 불안정할 수 있습니다. Elementor의 반응형 보기 모드( 하단 패널의 반응형 모드 )를 사용하여 휴대폰과 태블릿에서 어떻게 보이는지 조정하세요.

8단계: 휴대폰에서 잘 보이는지 확인하세요

모바일에 관해 말하자면, 양식이 너무 뭉쳐져 있거나 읽을 수 없는지 확인하세요.

1. Elementor 내에서 데스크톱, 태블릿, 모바일 보기를 전환합니다.
2. 필요에 따라 간격, 글꼴 크기 또는 버튼 크기를 조정하세요.바로 적용 가능한 경우도 있고, 그렇지 않은 경우도 있습니다.물론 WordPress에서 필요 이상으로 어렵게 만들었기 때문입니다.

추가 팁 및 일반적인 문제

가끔 저를 곤란하게 만드는 몇 가지 사항은 다음과 같습니다.

• 양식에서 이메일이 전송되지 않으면 WP Mail SMTP 와 같은 SMTP 플러그인을 설치해 보세요.일부 호스팅 환경에서는 PHP mail() 함수가 불안정하기 때문에 이 단계가 종종 중요합니다.
• 방문자 이름이 포함된 동적 이메일 제목을 사용하시나요? 이메일 템플릿을 수정하거나 사용자 지정 필드 문자열을 추가하면 됩니다.왜 효과가 있는지는 잘 모르겠지만, 이메일을 체계적으로 정리하는 데 도움이 됩니다.
• 게시한 후에는 항상 테스트하세요.잘 작동한다고 생각했는데, 그렇지 않다는 걸 깨닫는 것만큼 짜증나는 일은 없습니다.

결론

여기까지 오셨다면 축하드립니다.보기에도 좋고 알림도 보내는 제대로 작동하는 연락처 양식이 완성되었습니다. Elementor는 특히 호스팅 문제나 플러그인 충돌로 인해 예상치 못한 문제를 일으킬 수 있지만, 보통은 몇 가지만 수정하면 됩니다.만약 문제가 있다면 이메일 설정, 플러그인 충돌 또는 호스팅 제한 사항을 확인해 보세요.

자주 묻는 질문

Elementor 무료 버전을 사용해서 연락처 양식을 만들 수 있나요?

그렇지 않아요.무료 버전에는 양식 위젯이 포함되어 있지 않아서 외부 플러그인이나 임베드 코드에 의존해야 해요.완전히 다른 문제죠.

누군가 양식을 제출했을 때 알림을 받으려면 어떻게 해야 하나요?

양식 설정에서 이메일 주소가 정확하고 이메일 작업이 활성화되어 있는지 다시 한번 확인하세요.그래도 작동하지 않으면 WP Mail SMTP처럼 SMTP 설정을 고려해 보세요.이메일 호스팅은 불안정할 수 있습니다.

연락처 양식에서 이메일이 전송되지 않으면 어떻게 해야 하나요?

대부분의 경우 서버 문제나 이메일 설정 문제입니다. SMTP 플러그인을 설치하면 도움이 되는 경우가 많습니다.또한, 수신자 이메일이 스팸으로 분류되거나 차단되지 않았는지 확인하세요.