WordPress 웹 사이트 또는 블로그에서 사용자 정의 양식을 만드는 방법
게시 됨: 2021-12-27
첫 번째 블로그를 설정했다면 지금쯤이면 기본 연락처 양식과 함께 제공된다는 것을 알게 될 것입니다. 대부분의 프리미엄 테마에는 기본 연락처 양식이 함께 제공됩니다. 요점은 어떤 이유에서든 당신과 연락하고자 하는 청중과 관련하여 연락 양식이 필수적이라는 것입니다.
또한 연락처 양식을 사용하면 사용자 참여가 급증해야 하므로 블로그에서 양식을 사용하는 것이 필수적입니다. 그러나 다시, Contact form 7과 같은 양식 플러그인을 사용하여 사용자가 귀하에게 연락하도록 할 수도 있습니다.
또한 이러한 문의 양식을 통해 청중과 직접 연결하고 마케팅을 간소화할 수 있습니다.
비디오 튜토리얼
하지만 문제는 대부분의 기본 문의 양식과 플러그인이 동일한 스테레오타입 형식으로 제공되기 때문에 WordPress에서 자신의 문의 양식을 설정하는 과정에서 보다 전문화된 것을 선택할 수 있다는 것입니다.
만약 당신이 php에 상당히 능숙하다면, 당신은 쉽게 그렇게 할 수 있을 것입니다. 그래서 당신의 사용자가 활용할 수 있도록 당신 자신의 사용자 정의 양식을 설정할 수 있도록 기사의 나머지 부분을 읽는 것이 필수적입니다. 당신과 연결합니다.
1. 양식 디자인:
이를 위해 별도의 페이지 템플릿을 만들거나 WordPress 페이지에 HTML 코드를 작성할 수 있습니다. 나중에는 훨씬 더 간단하므로 동일한 것을 선택하는 것이 더 합리적입니다.
아래 나열된 단계에 따라 WordPress에서 사용자 정의 양식을 만들 수 있습니다. 그리고 항상 그렇듯이 시작하기 전에 정보를 백업하는 것을 잊지 마십시오.
- WordPress 대시보드 아래에 있는 페이지 -> 새로 추가 옵션으로 이동합니다.
- '고객 정보' 또는 '고객 정보'와 같이 원하는 페이지의 제목을 입력하세요.
- 이제 'HTML' 탭으로 이동하여 HTML 코드를 작성합니다.
- 원하는 WordPress에서 사용자 정의 양식을 만듭니다.
- "POST" 메서드를 추가하고 이름을 "customer_details"로 지정합니다.
- onsubmit 속성에 "form_validation" 함수를 추가하여 나중에 일부 JavaScript 유효성 검사를 추가하고 작업을 제공합니다.
- 작업은 양식이 제출될 때 실행될 PHP 파일입니다.
- 이 시점에서 이름, 이메일, 성별, 나이 등과 같은 일부 필드를 양식에 추가하고 양식을 닫을 수 있습니다.
최종 코드는 다음과 같아야 합니다.
귀하의 이름: <br /> 귀하의 이메일: <br /> 성별: 남성 여성<br /> 나이: <br />
2. 검증:
이제 양식을 디자인했으므로 동일한 유효성을 검사할 차례입니다. 사용자 데이터를 '있는 그대로' 신뢰하지 말고 항상 데이터베이스에 데이터를 입력하기 전에 항상 유효성을 검사하십시오.
빠른 유효성 검사를 위해 아래에 나열된 코드를 따르십시오. 그러면 트릭을 수행해야 합니다. 이 유효성 검사 코드를 기록하고 마지막에 닫습니다.
함수 form_validation() {
/* 빈 제출에 대한 고객 이름 확인*/
var customer_name = document.forms[“customer_details”][“customer_name”].value;
if (customer_name == "" || customer_name == null) {
alert("이름 필드는 반드시 채워야 합니다.");
거짓을 반환합니다.
}/* 잘못된 형식의 고객 이메일 확인 */
var customer_email = document.forms[“customer_details”][“customer_email”].value;
var at_position = customer_email.indexOf("@");
var dot_position = customer_email.lastIndexOf(".");
if (at_position<1 || dot_position=customer_email.length) {
alert("입력한 이메일 주소가 유효하지 않습니다.");
거짓을 반환합니다.
}
}
이것은 고객 이름과 이메일 주소를 확인하고 확인합니다. 다음에 이 코드를 추가하십시오. 따라서 WordPress의 전체 코드는 다음과 같습니다.
귀하의 이름: <br />
귀하의 이메일: <br />
성별: 남성 여성<br />
나이: <br />
함수 form_validation() {
/* 빈 제출에 대한 고객 이름 확인*/
var customer_name = document.forms[“customer_details”][“customer_name”].value;
if (customer_name == "" || customer_name == null) {
alert("이름 필드는 반드시 채워야 합니다.");
거짓을 반환합니다.
}
/* 잘못된 형식에 대한 고객 이메일 확인 */
var customer_email = document.forms[“customer_details”][“customer_email”].value;
var at_position = customer_email.indexOf("@");
var dot_position = customer_email.lastIndexOf(".");
if (at_position<1 || dot_position=customer_email.length) {
alert("입력한 이메일 주소가 유효하지 않습니다.");
거짓을 반환합니다.
}
}
이제 페이지를 게시하기만 하면 효과적으로 트릭을 수행할 수 있습니다.
3. 서버 측 스크립트:
"customer details.php"를 언급한 부분을 기억하십니까? 자, 우리도 그 부분에 관심을 가질 때입니다.
메모장이나 즐겨 사용하는 텍스트 편집기를 열고 아래에 설명된 코드를 작성하고 파일을 바탕 화면에 customer-details.php로 저장합니다.
먼저 $customer_name, $customer_email, $customer_sex, $customer_age라는 이름의 변수를 선언하고 HTML 양식에서 제출한 각 필드에 값을 할당합니다.
예를 들어 $customer_name = $_POST[“customer_name”]은 HTML 양식에서 POST 메소드로 값을 잡아 $customer_name 변수에 할당합니다.
이제 다른 값에도 동일한 작업을 수행해야 합니다. 이제 mysqli_connect를 사용하여 PHP 파일을 데이터베이스와 연결해야 합니다. 데이터베이스 구성이 기억나지 않는 경우 WordPress 설치에서 이러한 설정을 찾을 수 있습니다.
FileZilla와 같이 즐겨 사용하는 FTP 클라이언트를 사용하여 WordPress 설치에서 wp-config.php를 데스크탑으로 다운로드하십시오. 메모장과 같은 즐겨 사용하는 텍스트 편집기를 사용하여 wp-config.php를 열면 필요한 데이터베이스 설정을 찾을 수 있습니다.
데이터베이스 연결 후 mysqli_query를 사용하여 양식에서 수집한 데이터를 WordPress 데이터베이스에 삽입합니다.
이 PHP 코드에는 선택적 단계가 있습니다.
양식 제출 후 사용자에게 일부 메시지를 표시하거나 사용자를 다른 페이지로 리디렉션하려는 경우 코드에 헤더("위치: ")를 추가할 수 있습니다. 나중에 이를 위한 성공 페이지를 만들어야 합니다.
따라서 완전한 customer-details.php는 다음과 같습니다.
// 데이터 가져오기
$customer_name = $_POST[“고객명”];
$customer_email = $_POST[“고객 이메일”];
$customer_sex = $_POST[“customer_sex”];
$customer_age = $_POST[“customer_age”];// 데이터베이스 연결
$conn = mysqli_connect("데이터베이스 호스트","데이터베이스 사용자 이름","데이터베이스 암호","데이터베이스 이름");
if(!$conn) {
die('데이터베이스 연결 문제: ' . mysql_error());
}
// 데이터베이스에 데이터 삽입
$query = "INSERT INTO '데이터베이스 이름'.'테이블 이름'( 'customer_name', 'customer_email', 'customer_sex', 'customer_age' ) VALUES( $customer_name, $customer_email, $customer_sex, $customer_age )";
mysqli_query($conn, $query);
// 성공 페이지로 리디렉션
header("위치: ");
이 customer-details.php 파일을 즐겨 사용하는 FTP 클라이언트를 사용하여 테마 폴더에 업로드하십시오.
4. 성공:
성공 페이지는 사용자가 세부 정보와 함께 양식을 제출한 후 볼 수 있는 페이지입니다. "세부 정보가 성공적으로 제출되었습니다" 또는 이와 유사한 것과 같은 사용자 지정 메시지를 표시하도록 이 페이지를 설정할 수 있습니다.
요점은 아래에 게시된 코드를 사용하여 사용자 지정 메시지가 포함된 자신만의 성공 페이지를 설정할 수 있다는 것입니다.
WordPress 페이지를 만들고 "Success Page"와 같은 제목을 지정하고 페이지 슬러그를 'success-page' 또는 헤더("Location")에 지정한 것과 일치하는지 확인하십시오. 이제 "협조해 주셔서 감사합니다"와 같은 메시지를 작성하거나 해당 라인에 따라 설정해야 합니다.
항상 사이트를 다시 로드하여 문의 양식이 예상대로 작동하는지 확인할 수 있으며 거의 모든 경우에 제대로 작동해야 합니다. 그러나 몇 가지 문제가 발생하면 언제든지 온라인으로 확인하거나 전문가에게 맞춤 양식을 설정하도록 요청할 수 있습니다.
문의 양식이 문제에 대해 너무 공격적이거나 방해가 되지 않도록 하여 전환율을 높이는 데 도움이 되도록 하는 것이 중요합니다.
또한 이러한 사용자 지정 양식을 사용하여 마케팅 캠페인을 간소화하는 데 사용할 수 있는 고객에 대한 데이터와 정보를 수집할 수도 있습니다.
이것이 양식, 특히 연락처 양식이 모든 블로그에 필수적인 주된 이유 중 하나이며 더 중요한 것은 여기에 나열된 코딩을 사용하여 WordPress에서 사용자 정의 양식을 만들 수 있을 뿐만 아니라 실제로 모든 종류의 문의 양식을 만들 수 있다는 것입니다. 다른 매개변수.
앞서 제안한 것처럼 코어 파일을 수정하기 전에 전체 백업을 수행하는 것이 좋습니다.
양식을 실행하고 나면 데이터베이스에 입력하기 전에 문제의 양식이 데이터를 검증하도록 프로그래밍되어 있는지 여부를 확인할 수 있어야 합니다.
전반적으로 문의 양식은 고객이 귀하에게 연락하는 데 도움이 되고 장기적으로 더 나은 전환율로 이어질 수 있기 때문에 블로그와 웹사이트 모두에서 매우 중요합니다. 따라서 위에 나열된 단계를 시도하고 사용자 지정 문의 양식이 제대로 작동하는지 확인하십시오.