WordPressでカスタムフォームを作成するには？

Question

私はWordpressサイトを持っていて、フォーム（入力 - >データベース）を作成したいと考えています。

• How you can easily create customized form in WordPress
• How to create custom forms in WordPress without using plugins?

彼らは両方とも非常によく似だ：

私は2つのチュートリアルを見てきました。 htmlとjsでフロントエンドを作成し、phpを使ってdbに情報を処理します。

私の問題は、フォームを送信するたびに、「Oops！そのページが見つかりません」という404ページが表示されることです。私はprocess.phpファイルを配置する必要があります

1）：

今、私の問題がある（または、私が知りたいですか）？ （私はfileZillaを使用しています）。 public_html/wp-contentフォルダーに複数の場所を試しました。

2）名前とメールフィールドが検証されないのはなぜですか？ （空の名前フィールドのアラートしない、など...）

おかげで、と私は何かが欠けてるかどうかを知りましょう:)

フォーム構造：

あなたのお名前：[ TEXT]、あなたのメールアドレス：[TEXT]、セックス：[*男性*女性]、あなたの年齢：[TEXT]、[送信ボタン]

フォームページ：

<form name="myForm" method="POST" onsubmit="return form_validation()" action="../process.php"> 
    Your Name: <input id="customer_name" name="customer_name" type="text" /> 
    Your Email: <input id="customer_email" name="customer_email" type="text" /> 
    Sex: <input name="customer_sex" type="radio" value="male" />Male <input name="customer_sex" type="radio" value="female" />Female 
    Your Age: <input id="customer_age" name="customer_age" type="text" /> 
    <input type="submit" value="Submit" /> 
</form> 

<script type="text/javascript"> 
function form_validation() { 
    /* Check the Customer Name for blank submission*/ 
    var customer_name = document.forms["myForm"]["customer_name"].value; 
    if (customer_name == "" || customer_name == null) { 
     alert("Name field must be filled."); 
     return false; 
    } 

    /* Check the Customer Email for invalid format */ 
    var customer_email = document.forms["myForm"]["customer_email"].value; 
    var at_position = customer_email.indexOf("@"); 
    var dot_position = customer_email.lastIndexOf("."); 
    if (at_position < 1 || dot_position < at_position + 2 || dot_position + 2 >= customer_email.length) { 
     alert("Given email address is not valid."); 
     return false; 
    } 
} 

process.php：（編集されていない）

<?php 
$customer_name = $_POST["customer_name"]; 
$customer_email = $_POST["customer_email"]; 
$customer_sex = $_POST["customer_sex"]; 
$customer_age = $_POST["customer_age"]; 

$conn = mysqli_connect("Database Host","Database Username","Database Password","Database Name"); 
if(!$conn) { 
    die(‘Problem in database connection: ‘ . mysql_error()); 
} 

$query = "INSERT INTO ‘Database Name’.’Table Name’ (‘customer_name’, ‘customer_email’, ‘customer_sex’, ‘customer_age’) VALUES ($customer_name, $customer_email, $customer_sex, $customer_age)"; 
mysqli_query($conn, $query); 

header("Location: my-site.com/success"); // redirects to success page 
?> 

Answer 1

質問1に答えるために：ワードプレスのアクションを提供し、開発者は自分のカスタムPHPコードまたは機能を追加するためのフックをフィルタリングします。それは、スニペットを生成するプラグインを使用すると、フォームをロードせずにPHPが実行されるため、成功ページが表示されるので、あなたのケースでは役立たないため、そのことを調べる必要があります。アクションとフィルターフックの詳細についてはvisit here

アクション/フィルターフックの代わりに、あなたのテーマフォルダにあなたのPHPファイルをアップロードすることができます。しかし、そこには欠陥があります。 WordPressの更新時にファイルが失われることがあります。

質問2に答えるには：JavaScriptを使用しているとフォームを検証するのが簡単です。入力タグ内に「必須」という単語を追加するだけです。必要なキーワードと共に入力タイプ「電子メール」を使用して、電子メールを検証することもできます。以下の例を参照してください。

<form name="myForm" method="POST" action="../process.php"> 
    Your Name: <input id="customer_name" name="customer_name" type="text" required/> 
    Your Email: <input id="customer_email" name="customer_email" type="email" required/> 
    Sex: <input name="customer_sex" type="radio" value="male" />Male <input name="customer_sex" type="radio" value="female" />Female 
    Your Age: <input id="customer_age" name="customer_age" type="text" /> 
    <input type="submit" value="Submit" /> 
</form> 

それでもdocument.forms代わりにのdocument.getElementById（ 'CUSTOMER_NAME'）とのdocument.getElementById（ 'CUSTOMER_EMAIL'）を使用してみてくださいあなたのJavaScript関数を使用したい場合。また、最後にスクリプトタグを閉じてください。例えば以下を参照してください。

<script type="text/javascript"> 
function form_validation() { 
    /* Check the Customer Name for blank submission*/ 
    var customer_name = document.getElementById('customer_name').value; 
    if (customer_name == "" || customer_name == null) { 
     alert("Name field must be filled."); 
     return false; 
    } 

    /* Check the Customer Email for invalid format */ 
    var customer_email = document.getElementById('customer_email').value; 
    var at_position = customer_email.indexOf("@"); 
    var dot_position = customer_email.lastIndexOf("."); 
    if (at_position < 1 || dot_position < at_position + 2 || dot_position + 2 >= customer_email.length) { 
     alert("Given email address is not valid."); 
     return false; 
    } 
} 
</script>