WordPress에서 페이지를 새로 고치지 않고 양식을 제출하는 방법

페이지를 새로 고치지 않고 양식을 제출하십시오.


방문자가 양식을 제출할 때 페이지가 새로 고치지 않게 하시겠습니까? 기본적으로 양식 제출 버튼을 클릭하면 전체 페이지가 다시로드됩니다. 그리고 양식에 입력 한 데이터가 서버에 전송되어 저장 될 때입니다.

이 기사에서는 WordPress 양식에서 Ajax 제출을 활성화하고 페이지가 다시로드되지 않도록하는 방법을 보여줍니다..

WordPress에서 Ajax 양식 제출을 사용하는 이유

Ajax 양식 제출은 모달 팝업에 양식을 임베드하려는 경우 특히 유용합니다. AJAX 양식 제출을 사용하지 않으면 전체 페이지를 새로 고쳐 팝업 창이 닫힙니다. 그렇게하면 사용자가 계속 참여하게하는 중요한 확인 메시지를 놓칠 수 있습니다.

AJAX 양식 제출을 사용하면 사용자는 동일한 페이지에서 양식을 제출할 때 다시로드하지 않고 확인 메시지를 볼 수 있습니다..

아약스 양식 제출

WordPress 사이트에서 아약스 양식 제출을 활성화하려면 다음을 권장합니다. WPForms, 워드 프레스를위한 최고의 양식 플러그인.

1 단계 : 새 양식 작성

양식 작성을 시작하려면 먼저 설치해야합니다 WPForms 플러그인 워드 프레스 웹 사이트에서.

어떻게 모르겠어요? 문제 없어요. WordPress 플러그인을 설치하여 모든 것을 정리하는 방법에 대한 가이드로 이동하십시오..

플러그인이 설치 및 활성화되면 WordPress 대시 보드로 이동하여 WPForms»새로 추가. 이제 양식의 템플릿을 선택할 수있는 페이지로 리디렉션됩니다.

WPForms는 7 가지 양식 템플릿 중에서 선택할 수 있습니다. 를 선택합시다 간단한 연락 양식 이 튜토리얼의 옵션을 선택한 다음 파일 업로드 필드를 양식에 추가하십시오..

WPForms 양식 설정

이제 화면에 양식 작성기가 나타납니다. 화면 왼쪽에는 필드 추가 그리고 필드 옵션 탭. 이 탭을 사용하여 연락처 양식을 구성 할 수 있습니다..

wpforms에서 필드를 삭제

WPForms를 사용하면 끌어서 놓기로 양식에 필드를 쉽게 추가 할 수 있습니다. 끌어서 놓아 필드의 위치를 ​​변경할 수도 있습니다. 필드를 제거하려는 경우에도 쉽습니다. 원치 않는 필드 위에 커서를 놓고 지우다 필드의 오른쪽 상단에 표시되는 아이콘.

아래의 필드 옵션 탭에서 입력란의 라벨을 변경하고 이름 입력란의 형식을 변경하고 글꼴 크기를 변경하며 라벨 및 하위 라벨을 사용 또는 사용 중지 할 수 있습니다. 또한 활성화 할 수있는 옵션이 있습니다 조건부 논리 선택권.

양식 작성기를 사용하여 양식 작성을 완료하면 저장 버튼으로 변경 사항을 그대로 유지.

간단한 연락처 양식을 만들었으므로 파일 업로드 기능을 추가해 보겠습니다..

파일 업로드 기능을 추가하려면 왼쪽 패널에서 파일 업로드 필드를 클릭하기 만하면됩니다. 또는 파일 업로드 양식 필드를 끌어서 양식 작성기에서 원하는 위치에 놓을 수도 있습니다..

파일 업로드 양식

3 단계 : Ajax 양식 제출 활성화

변경 사항이 저장되면 설정 페이지 빌더 왼쪽에있는 탭을 클릭하십시오. 여기 몇 가지 옵션이 있습니다. 로 이동 일반 선택권. 이 아래에는 많은 필드가 있습니다. 여기에서 양식 이름 변경, 양식 설명 추가, 버튼 텍스트 변경 등을 수행 할 수 있습니다..

화면을 더 아래로 스크롤하면 몇 개의 확인란이 나타납니다. 당신은 확인란을 선택할 수 있습니다 Ajax 양식 제출 사용. 를 클릭하여 프로세스를 완료하십시오 저장 화면 오른쪽 상단에있는 버튼.

아약스 양식 제출 활성화

이제 공고 아래의 탭 일반 탭. 이 옵션은 누군가가 양식을 제출할 때마다 알려줍니다. 따라서 첫 번째 필드에 관리자의 이메일 주소 또는 이메일 수신 담당자를 입력하십시오. 이메일 제목, 발신자 이름, 수신자 주소 및 자신의 메시지를 입력 할 수도 있습니다..

완료되면 변경 사항을 저장하십시오. 방문자가 제출 단추를 누른 후받을 확인 메시지를 설정할 수도 있습니다..

파일 업로드 양식 확인 설정

4 단계 : Ajax 제출로 양식 공개

마지막 단계는 웹 사이트에 Ajax 제출 가능 양식을 게시하는 것입니다. 이를 위해 양식을 표시하려는 페이지로 이동하십시오..

당신은로 이동하여 시작할 수 있습니다 페이지»새로 추가 워드 프레스 대시 보드에서 이제 페이지에 제목을 추가하십시오. 페이지의 텍스트 편집기에서 양식 추가 선택권. 화면에 새 창이 나타납니다.

wpforms 포함 양식

드롭 다운 화살표를 클릭하고 방금 만든 양식을 선택하십시오. 이제를 클릭하십시오 양식 추가 단추. 임베드 코드가 페이지의 텍스트 편집기에 반영되는 것을 볼 수 있습니다. 를 클릭하여 양식의 모양을 확인할 수 있습니다 시사 화면 오른쪽에있는 버튼.

그런 다음 게시 마지막으로 양식을 게시 할 수있는 버튼.

쉽지 않았어요?

연락처 양식에서 수신되는 버튼 클릭 수를 추적 할 수 있습니다. 이렇게하려면 가이드를 확인하십시오. 링크 및 버튼 클릭 추적.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map