ACF 프런트 엔드 양식을 만드는 방법 [코드 없음!]

게시 됨: 2022-12-14

WordPress 사이트에서 고급 사용자 지정 양식을 사용하려고 하지만 코딩 방법을 모르십니까? 이 가이드는 ACF 프런트 엔드 양식을 즉시 만드는 데 도움이 될 것입니다!

대략적인 읽기 시간: 6분

고급 사용자 지정 필드(ACF)는 강력한 도구입니다.

필드를 사용자 지정하고 원하는 방식으로 정확하게 양식을 작성하는 기능을 통해 가능성은 거의 무한합니다.

하지만 한 가지 문제가 있습니다. 웹사이트의 프런트 엔드에서 ACF 양식을 가져오려면 코딩 방법을 알아야 합니다.

Formidable Forms는 최고의 WordPress Form Builder 플러그인입니다. 무료로 받으세요!

아니면 당신은?

이 게시물은 WordPress에서 코드 없이 손쉽게 ACF 프런트엔드 양식을 만드는 방법을 보여줍니다! 그리고 이 모든 작업은 완벽한 ACF 양식 작성기인 Formidable Forms를 사용하여 수행됩니다.

그것에 들어가자.

고급 사용자 정의 필드 프런트 엔드 양식을 사용하는 데 어떤 문제가 있습니까?

실제로 ACF를 사용하여 고급 사용자 정의 필드 프런트엔드 양식을 만드는 데 아무런 문제가 없습니다!

ACF는 강력한 도구입니다. PHP로 코딩하는 방법을 알고 있다면 고유한 양식을 빠르게 만들 수 있습니다.

하지만 코딩할 줄 모르면 눈앞의 외국어에 머리를 긁적일 수밖에 없습니다.

아래에서 이 ACF 양식 예제 코드를 확인하세요.

따라서 두 가지 옵션이 있습니다.

ACF로 프런트엔드 양식을 작성하고 코딩하는 방법을 배웁니다.
Formidable Forms가 모든 노력을 대신해 드립니다.

Formidable에는 훌륭한 개발자 팀이 있지만 여러분은 그렇지 않을 것이라고 생각합니다.

따라서 오늘은 고급 사용자 지정 필드 프런트엔드 양식 자습서의 옵션 #2에 중점을 둘 것입니다.

Formidable로 ACF 프런트엔드 양식을 표시하는 방법

시작하려면 몇 가지가 필요합니다.

강력한 양식 사업 계획
ACF 플러그인(무료 또는 프로)

강력한 양식을 지금 받으세요!

ACF 프런트엔드에서 일부 고급 필드를 사용하려면 프로 버전이 필요합니다. 그러나 기본 필드의 경우 무료 버전을 사용할 수 있습니다.

더 많은 정보가 필요하면 ACF Knowledgebase 문서를 확인하십시오!

따라서 Formidable Forms가 설치되고 활성화되면 Formidable → Add-ons 로 이동하여 ACF Form WordPress 플러그인 의 설치 버튼을 클릭합니다.

그런 다음 몇 가지 간단한 단계만 거치면 됩니다.

ACF 양식 필드 만들기
Formidable에서 ACF 프런트엔드 양식 만들기
필드 매핑

시작하자.

1단계: ACF 양식 필드 만들기

예를 들어 Here Birdie Birdie 라는 조류 관찰 블로그가 있습니다.

우리는 사용자가 블로그에 사용자 정의 게시물 유형으로 자동 표시되는 조류 관찰 제출물을 가질 수 있는 방법을 원합니다.

따라서 사용자가 정보를 입력할 수 있는 몇 가지 필드를 생성하려고 합니다.

이름
날짜
시간
새들이 본 목록
추가 댓글

따라서 가장 먼저 할 일은 필드를 사용자 지정하기 위해 ACF로 이동하는 것입니다. 다행히 Formidable은 19가지 ACF 필드 유형에 대한 매핑을 지원합니다. 따라서 많은 옵션이 있습니다.

이렇게 하려면 사용자 지정 필드 → 필드 그룹 으로 이동하고 새로 추가 를 클릭합니다.

다음으로 필드 추가 버튼을 클릭하여 필드를 추가할 수 있습니다.

따라서 위에 나열된 필드를 만들고 필요에 맞게 사용자 지정합니다.

방문자가 본 모든 새를 보다 쉽게 표시할 수 있도록 ACF 반복기 필드를 사용합니다. repeater 필드를 사용하면 사용자가 원하는 만큼 항목을 추가하거나 제거할 수 있습니다.

방문자가 새 목록에서 선택할 수 있도록 이 필드에서 드롭다운 (ACF에서 선택 ) 필드를 사용합니다. 또한 각 새를 본 시간을 입력하는 숫자 필드를 추가합니다.

자신의 필요에 맞게 자유롭게 사용자 정의하십시오. 그러나 더 많은 고급 기능(예: 리피터 , ACF Pro를 구입해야 함)을 사용하려면.

완료되면 변경사항 저장 을 클릭합니다.

2단계: Formidable에서 ACF 프런트엔드 양식 만들기

이제 웹사이트의 프런트 엔드에 표시될 양식을 만듭니다.

따라서 WordPress 관리자 패널에서 Formidable → Forms 로 이동하십시오.

그런 다음 페이지 상단에서 새로 추가를 클릭한 다음 빈 양식 또는 Formidable의 템플릿 중 하나에서 시작하도록 선택합니다.

상황에 가장 적합한 옵션을 자유롭게 선택하십시오. 빈 양식 으로 시작하여 원하는 대로 사용자 지정합니다.

다음으로 양식에 이름을 지정한 다음 만들기를 클릭합니다.

플러그인은 양식 요소를 추가할 수 있는 Formidable의 끌어서 놓기 양식 작성기로 이동합니다. 이름, 이메일, 번호, 주소 — 이름을 지정하면 여기에 있습니다.

이미 ACF에서 양식 필드를 만들었으므로 쉽게 연결할 수 있도록 일치하는 필드를 추가하기만 하면 됩니다.

사용자가 블로그 게시물의 이름을 지정하여 고유하게 만들 수 있도록 상단에 필드를 추가했습니다!

양식 작성을 완료하면 업데이트를 클릭하여 변경 사항을 저장하십시오.

당신이 저장하지 않았기 때문에 당신이 만든 모든 것을 잃는 것보다 더 90년대를 생각나게 하는 것은 없습니다.

3단계: 필드 매핑

이제 양식을 만들었으므로 ACF 필드 매핑을 활성화해야 합니다.

따라서 페이지 상단의 설정 탭을 클릭하고 작업 및 알림 으로 이동합니다.

그런 다음 게시물 만들기 작업을 선택하여 양식 필드가 표시되는 방식을 사용자 지정합니다.

게시물 만들기 양식 작업에서 사용자 정의 필드 섹션까지 아래로 스크롤하고 고급 사용자 정의 필드에 양식 필드 매핑 토글을 클릭합니다.

드롭다운에서 ACF 필드 그룹을 선택하고 추가 를 클릭하여 Formidable 필드로 사용자 지정 필드 매핑을 시작합니다.

또한 반복 레이아웃 필드를 사용하는 경우 반복 레이아웃과 하위 필드를 올바르게 일치시켜야 합니다.

필드를 매핑했으면 업데이트를 클릭하여 변경 사항을 저장합니다.

그리고 그게 다야! 이제 사용자는 WordPress ACF 프런트엔드 양식에 항목을 제출할 수 있으며 ACF 및 Formidable Forms 필드는 정보를 매핑하고 보냅니다.

여기에서 뷰를 사용하여 프런트엔드에 정보를 표시하거나 ACF를 지원하는 테마를 사용한 다음 게시물, 게시물 제목, 콘텐츠 등을 편집할 수 있습니다!

이 ACF 프런트엔드 양식 플러그인은 또 무엇을 할 수 있습니까?

Formidable은 ACF를 위한 단순한 양식 작성기처럼 보일 수 있지만 그 이상입니다.

수십 개의 ACF 양식 기능, 템플릿 파일 및 모든 상위 테마(Elementor 포함)와의 호환성을 갖춘 Formidable은 모든 것을 수행합니다.

또한 양식을 강화할 수 있는 다양한 추가 기능과 옵션이 있습니다.

다단계 양식, 퀴즈 및 대화형 양식
다양한 스팸 보호 옵션
내장 비주얼 양식 스타일러
100개 이상의 양식 템플릿
무시무시한 전망

이것은 당신이 얻는 기능 중 일부에 불과합니다. 그리고 우리가 스스로 그렇게 말하면 그들은 꽤 훌륭합니다.

따라서 프런트엔드에 ACF 양식을 배치하는 것이 얼마나 쉽고 풍부한 기능을 제공하는지, 무엇을 기다리고 계십니까?

Formidable은 오늘 귀하의 웹사이트를 한 단계 끌어올릴 준비가 되어 있습니다 .

ACF 전면 양식을 만들 준비가 되셨습니까?

"프론트엔드에 ACF 필드를 추가하려면 어떻게 해야 합니까?" 이제 답을 얻었습니다.

Formidable의 단순한 노코드 솔루션을 사용하면 몇 분 안에 시작하고 실행할 수 있습니다. 그리고 이 포스트는 당신에게 그것을 하는 방법을 정확히 보여주었습니다.

WordPress ACF pro를 사용하든 무료 버전을 사용하든 Formidable은 완벽한 파트너 플러그인입니다.

따라서 시작할 준비가 되었으면 지금 Formidable Forms를 가져와서 웹사이트에 올리십시오.

지금 ACF 프런트 엔드 양식을 받으십시오!

Facebook, Twitter 및 YouTube에서 우리를 팔로우하여 더 놀라운 WordPress 팁과 요령을 확인하세요.