WordPress의 드래그 앤 드롭 양식 작성기 사용

양식은 항상 인터넷의 필수적인 부분이었습니다. WordPress 웹사이트 소유자로서 사용자가 귀하와 소통하기를 원한다면 이를 사용할 수밖에 없습니다. 그러나 모범 사례를 따르고 웹 사이트의 모양과 느낌에 맞는 현대적인 양식을 만드는 것은 특히 코딩에 능숙하지 않은 경우 어려운 작업이 될 수 있습니다.

다행히도 이제 직관적인 WYSIWYG 인터페이스와 드래그 앤 드롭 지원을 제공하는 몇 가지 강력한 WordPress 양식 빌더가 CodeCanyon에서 제공됩니다. CodeCanyon Elite Author nCrafts가 개발한 FormCraft는 그러한 양식 작성 도구 중 하나입니다.

FormCraft는 몇 분 만에 웹 사이트에 대한 아름다운 양식을 만들 수 있는 프리미엄 GDPR 준수 WordPress 플러그인입니다. AJAX 요청, 트리거, 팝업 메시지 및 조건부 논리에 대한 지원을 포함하여 수많은 고급 기능이 내장되어 있습니다. 추가 기능을 통해 MailChimp 및 reCAPTCHA와의 통합과 같은 추가 기능을 제공합니다.

이 튜토리얼에서는 이 플러그인을 설치하고 가장 중요한 기능 중 일부를 사용하는 방법을 보여 드리겠습니다.

1. FormCraft 설치

Envato 계정에 로그인하고 CodeCanyon으로 이동하여 FormCraft 사용 라이선스를 구매할 수 있습니다. 16,000개가 넘는 판매량을 기록하며 가장 인기 있는 제품 중 하나입니다.

구매가 성공적으로 완료되면 플러그인 설치에 사용할 수 있는 ZIP 파일에 액세스할 수 있습니다.

WordPress 인스턴스의 관리자 패널에 로그인하고 플러그인 > 새 플러그인 추가 로 이동하세요. 그런 다음 플러그인 업로드 버튼을 누르세요. 다음 화면에서 먼저 찾아보기... 버튼을 눌러 ZIP 파일을 선택한 다음 지금 설치 버튼을 눌러 설치를 시작하세요.

플러그인 크기는 2.3MB라는 점에 유의하세요. WordPress 인스턴스에서 플러그인 크기가 업로드된 파일에 허용되는 최대 크기를 초과한다고 불평하는 경우 php.ini中的 upload_max_filesize 변수 > 파일 값을 늘려야 합니다.

플러그인을 설치한 후 플러그인 활성화 버튼을 눌러 사용을 시작하세요.

2.템플릿을 사용하여 양식 만들기

이제 WordPress 관리자 패널에 FormCraft라는 새 섹션이 있습니다. 그것을 열고 새 양식 버튼을 누르면 첫 번째 양식 만들기를 시작할 수 있습니다.

팝업 대화 상자에서 템플릿 옵션을 선택하세요. FormCraft에는 일반적인 양식 유형에 대해 세심하게 디자인된 거의 12개의 템플릿이 제공되므로 템플릿을 사용하는 것이 양식을 만드는 가장 쉽고 빠른 방법입니다.

이제 문의 양식을 만들어 보겠습니다. 따라서 Contact 템플릿을 선택하고 양식에 이름을 지정한 다음 Create Form 버튼을 누르세요. Contact (2) 템플릿을 사용하겠습니다.

양식이 준비되면 양식을 편집할 수 있는 인터페이스로 자동으로 리디렉션됩니다.

FormCraft로 양식을 편집하는 것은 쉽습니다. 일반적으로 사용자가 해야 할 일은 변경하려는 양식 필드를 클릭하고 해당 속성을 업데이트하는 것뿐입니다. 예를 들어 Name 필드의 레이블을 변경하려면 해당 필드를 클릭하고 나타나는 대화 상자에서 Label 속성 값을 업데이트하세요.

대화 상자를 닫으려면 대화 상자 바깥쪽 아무 곳이나 클릭하세요.

마지막으로 모든 변경 사항에 만족하면 저장 버튼을 눌러 영구적으로 만들 수 있습니다.

3.표시 양식

두 가지 방법을 사용하여 FormCraft로 생성된 양식을 표시할 수 있습니다. 첫 번째 방법은 고유한 URL이 있고 양식 외에는 아무 내용도 표시하지 않는 전용 양식 페이지를 사용하는 것입니다. 이 방법을 사용하면 최소한의 노력만 필요하며 양식을 쉽게 공유할 수도 있습니다.

기본적으로 FormCraft는 각 양식에 대한 전용 양식 페이지를 자동으로 생성합니다. 이전 단계에서 생성한 양식의 URL을 확인하려면 설정 버튼을 클릭하고 일반 탭으로 전환하세요.

두 번째 방법은 양식을 게시물이나 페이지에 삽입하는 것입니다. 이 방법은 양식과 함께 추가 텍스트나 이미지를 표시할 수 있으므로 더욱 유연합니다.

FormCraft 양식을 삽입하려면 단축 코드가 필요합니다. 그것이 무엇인지 알아보려면 설정 > 삽입 > 단축 코드로 이동하세요.

FormCraft로 만드는 모든 양식에는 고유하고 기억하기 쉬운 단축 코드가 있습니다.

이 시점에서 새 게시물을 작성하고 단축 코드를 입력하여 양식을 삽입할 수 있습니다. 다음은 FormCraft 양식이 포함된 샘플 게시물입니다.

4.양식 제출 처리

사용자가 양식을 작성한 후 당연히 제출하게 됩니다. 작성된 양식은 두 가지 방법으로 받을 수 있습니다. 첫 번째 방법은 WordPress 서버에서 이메일을 받는 것입니다. 프로그래밍이 필요하지 않으며 소량의 양식 제출을 처리하는 데 적합합니다.

양식 제출을 이메일로 받으려면 설정 > 이메일 > 이메일 설정으로 이동하세요.

FormCraft는 기본 WordPress 이메일 설정 또는 사용자 정의 SMTP 구성을 사용하여 이메일을 보낼 수 있습니다. 일반적으로 기본 설정이면 충분합니다. 따라서 WP Mail 탭으로 전환하고 원하는 대로 Sender Name 및 Sender Email 필드를 입력하세요. 짐작하셨겠지만 여기에 제공하는 이메일 주소는 모든 양식 제출을 받는 이메일 주소가 됩니다.

다음으로 이메일 알림 섹션을 확장하세요. 여기에는 작성된 모든 양식을 보낼 이메일 주소를 입력해야 합니다. 이전에 입력한 것과 동일한 이메일 주소를 사용해 주시기 바랍니다.

나머지 구성은 그대로 두고 저장 버튼을 누르세요.

첫 번째 양식 제출 처리기가 준비되었습니다. 이제부터 사용자가 양식을 제출할 때마다 이메일을 받게 됩니다.

그러나 수천 개의 양식 제출을 받을 것이라고 생각한다면 보다 프로그래밍적인 접근 방식이 더 나을 것입니다. FormCraft는 제출된 양식 데이터를 지정한 사용자 정의 URL로 보낼 수 있습니다. 이 접근 방식을 사용하려면 설정 > 일반으로 이동하여 맞춤 URL을 입력하세요. 또한 양식 제출을 JSON 문서로 받으려면 POST(JSON) 옵션을 활성화하세요.

맞춤 URL에서 양식 제출을 처리하는 데 어떤 논리를 사용하는지는 귀하에게 달려 있습니다. 다음 예제 코드는 각 커밋을 서버의 파일 시스템에 고유한 이름을 가진 파일로 저장하는 방법을 보여줍니다.

위의 코드를 사용하면 각 양식 제출이 다음과 같은 내용의 파일에 저장됩니다.

5. 맞춤 양식 만들기

내장된 템플릿 중 요구 사항을 충족하는 템플릿이 없다고 판단되면 처음부터 새 양식을 만들 수 있습니다. 실제적인 예를 들기 위해 이제 사용자가 영화 리뷰를 제출할 수 있는 양식을 만들어 보겠습니다.

먼저 FormCraft 대시보드로 이동하여 New Form 버튼을 다시 누르세요.

이번에는 Blank 옵션을 선택하고 양식에 이름을 지정한 다음 Create Form 버튼을 누르세요.

이제 양식 필드가 없는 빈 캔버스가 표시됩니다. 기본적으로 너비는 420 px 로 설정됩니다. 고정된 너비를 원하지 않으면 자유롭게 백분율 값으로 변경할 수 있습니다.

다음으로 Add Field 버튼을 눌러 첫 번째 양식 필드를 추가하세요.

보시다시피 FormCraft는 선택할 수 있는 15가지 이상의 다양한 유형의 양식 필드를 제공합니다.

양식에 제목을 추가하려면 제목 필드를 클릭하세요. 제목을 추가한 후 제목을 클릭하여 속성을 수정합니다.

팝업 대화 상자에서 필드에 표시되는 텍스트를 변경하고, 패딩을 조정하고, 글꼴을 변경하고, 배경색을 지정할 수도 있습니다.

다음으로 영화 제목을 수락하려면 필드 추가 버튼을 클릭하고 한 줄 입력 옵션을 선택하세요.

새로 추가된 필드를 클릭하여 속성 대화 상자를 엽니다. 여기에서 필드에 적절한 레이블과 하위 레이블을 제공합니다. 원하는 경우 icon 속성을 클릭하여 필드 옆에 아이콘을 표시할 수 있습니다.

사용자가 이 필드를 비워두지 않도록 하려면 필수 필드 속성을 확인하세요. 또한 영화 이름에는 공백이 포함될 수 있으므로 Allow Spaces 필드를 확인하세요.

최소 문자 및 최대 문자 속성을 사용하면 사용자 입력 텍스트의 길이를 제어할 수도 있습니다.

속성 대화 상자 외부를 클릭하여 닫습니다. 그런 다음 필드 추가 > 설문조사 > 별 을 선택하세요. 이름에서 알 수 있듯이 이 필드를 사용하면 사용자가 영화를 평가할 수 있습니다.

마찬가지로 사용자가 영화에 대한 생각을 입력할 수 있도록 텍스트 영역 양식을 추가하세요.

마지막으로 필드 추가 > 제출 을 선택하여 양식에 제출 버튼을 추가합니다. 버튼을 더 넓게 만들고 싶다면 Wide Buttons 옵션을 확인하세요.

이제 사용자 정의 양식이 준비되었습니다. Save 버튼을 클릭하여 저장하세요.

이를 보려면 설정 > 일반을 통해 해당 URL을 확인할 수 있는 전용 양식 페이지에 직접 액세스할 수 있습니다.

양식은 다음과 같습니다.

결론

이 튜토리얼에서는 FormCraft WordPress 플러그인을 사용하여 WordPress 웹사이트용 템플릿 기반 및 사용자 정의 양식을 만드는 방법을 배웠습니다. 이제 약간의 창의력만 발휘하면 이메일 주소 수집, 설문 조사 또는 퀴즈 수행, 예약 수락과 같은 기본 작업을 수행하는 양식을 빠르게 만들 수 있습니다.

FormCraft에는 작성자의 6개월 무료 지원이 제공됩니다. 사용 중 문제가 발생하면 CodeCanyon의 댓글 페이지를 사용하여 도움을 받으세요.

양식 플러그인에 대해 자세히 알아보려면 Envato Tuts+에서 WordPress 양식 플러그인에 대한 다른 게시물을 확인하세요.