WordPressのウェブサイトまたはブログでカスタムフォームを作成する方法

公開: 2021-12-27

WordPressでカスタムフォームを作成する方法

最初のブログを設定したばかりの場合は、今では、デフォルトの連絡フォームが付属していることがわかります。ほとんどのプレミアムテーマには1つが付属しています。重要なのは、何らかの理由であなたと連絡を取ろうとしている聴衆に関しては、連絡フォームが不可欠であるということです。

さらに、お問い合わせフォームを使用すると、ユーザーエンゲージメントが急上昇するはずです。そのため、ブログで使用することが不可欠です。ただし、ここでも、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（ "名前フィールドに入力する必要があります。"）;
falseを返します。
} / *無効な形式がないかカスタマーメールを確認します* /
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＆lt; 1 || dot_position = customer_email.length）{
alert（「指定されたメールアドレスは無効です。」）;
falseを返します。
}
}

これにより、顧客の名前と電子メールアドレスがチェックおよび検証されます。の後にこのコードを追加します。したがって、WordPressの完全なコードは次のようになります-


あなたの名前：<br />
あなたのメールアドレス：<br />
性別：男性女性<br/>
あなたの年齢：<br />


関数form_validation（）{
/ *空白の送信がないか顧客名を確認します* /
var customer_name = document.forms [“ customer_details”] [“ customer_name”]。value;
if（customer_name ==“” || customer_name == null）{
alert（ "名前フィールドに入力する必要があります。"）;
falseを返します。
}
/ *無効な形式がないかカスタマーメールを確認します* /
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＆lt; 1 || dot_position = customer_email.length）{
alert（「指定されたメールアドレスは無効です。」）;
falseを返します。
}
}

さて、あなたがしなければならないのはページを公開することだけであり、それは効果的にトリックを行うはずです。

3.サーバー側スクリプト：

「customerdetails.php」について言及した部分を覚えていますか？さて、その部分にも参加する時が来ました。
メモ帳またはお気に入りのテキストエディタを開き、以下で説明するコードを書き留めて、ファイルをcustomer-details.phpとしてデスクトップに保存します。

まず、$ customer_name、$ customer_email、$ customer_sex、$ customer_ageという名前の変数を宣言し、HTMLフォームによって送信されたそれぞれのフィールドに値を割り当てます。

たとえば、$ customer_name = $ _POST [“ customer_name”]は、POSTメソッドによってHTMLフォームから値を取得し、それを変数$ 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_name”];
$ customer_email = $ _POST [“ customer_email”];
$ 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（ "場所："）;

お気に入りのFTPクライアントを使用して、このcustomer-details.phpファイルをテーマフォルダーにアップロードします。

4.成功：

成功ページは、ユーザーがフォームを送信した後に詳細を表示できるページです。このページを設定して、「詳細が正常に送信されました」などのカスタムメッセージを表示することができます。

重要なのは、以下に投稿されたコードを使用して、カスタムメッセージを備えた独自の成功ページを設定できることです。

WordPressページを作成し、「Success Page」のようなタイトルを付けます。必ず、ページスラッグを「success-page」またはヘッダー（「Location」）で指定したものと一致させてください。さあ、「ご協力ありがとうございます」などのメッセージを書いてください。

いつでもサイトをリロードして、お問い合わせフォームが想定どおりに機能しているかどうかを確認できます。ほとんどの場合、問題なく機能するはずです。ただし、いくつかの問題が発生した場合は、いつでもオンラインで確認するか、専門家にカスタムフォームを設定してもらうことができます。

お問い合わせフォームがあまりにも攻撃的または煩わしいように見えないようにすることが重要です。そうすることで、これらのコンバージョン率を高めることができます。

さらに、これらのカスタムフォームを使用して、顧客に関するデータと情報を収集し、マーケティングキャンペーンを合理化するためにさらに使用することもできます。

これが、フォーム、特に連絡先フォームがすべてのブログに不可欠である主な理由の1つです。さらに重要なことに、ここにリストされているコーディングを使用して、WordPressでカスタムフォームを作成するだけでなく、実際には、さまざまなパラメータ。

前に提案したように、コアファイルをいじくり回す前に、完全なバックアップを実行することをお勧めします。

フォームを起動して実行すると、データベースに入力する前に、問題のフォームがデータを検証するようにプログラムされているため、データが検証されているかどうかを確認できるはずです。

全体として、連絡フォームはブログやWebサイトにとって非常に重要です。これは、顧客があなたに連絡するのに役立ち、長期的にはコンバージョン率の向上につながる可能性があるためです。したがって、上記の手順を試してみてください。カスタムの連絡フォームが正常に機能するはずです。