WordPressのお問い合わせページを作成する方法

公開: 2021-04-21

WordPressのお問い合わせページは、ビジネスサイト、個人ブログ、またはオンラインポートフォリオページの重要な部分です。お問い合わせフォームを使用すると、視聴者はあなたの製品やサービスの詳細を尋ねることができます。それはあなたがあなたのサイトの信頼性を高めそしてあなたの顧客基盤についてのより多くの詳細を集めることを可能にします。お問い合わせフォームの多くの利点に関係なく、WordPressにはデフォルトでこの要素が含まれていません。

このチュートリアルでは、お問い合わせページのWordPressプラグインを使用する場合と使用しない場合の、お問い合わせのWordPressページを作成する手順を説明します。

このガイドは誰に役立ちますか？

次のガイドには、WordPressの専門家でなくても、自分でWordPressの連絡先ページを作成する簡単な手順が含まれています。これは初心者のウェブマスターにとって特に便利です。このガイドを使用して、Web開発スキルを練習できます。また、WordPressサイトを独自に維持し、オンラインリソースを可能な限り使いやすく、有益なものにすることを楽しみにしているブロガーや零細企業にも役立ちます。あなたがどれほど熟練しているか経験を積んでいるかに関係なく、この記事で説明されているテクニックはあなたに役に立ちます。

WordPressのお問い合わせページをサイトに追加する必要があるのはなぜですか？

WordPressのお問い合わせページは、多くの理由でビジネスオーナーとその顧客の両方にとって有益です。

あなたのブログやビジネスサイトはよりプロフェッショナルに見えます。そうすれば、あなたの聴衆は、あなたのマイクロニッチに関連する質問や問題があるときはいつでもあなたに連絡できることを知るでしょう。
ユーザーがいつでもあなたにアクセスできるようにしながら、視聴者とのより良いコミュニケーションを確立できます。提供されたいくつかのフィールドに入力するだけで済みます。
WordPressのお問い合わせページは、ブランドにとって貴重な情報源です。ユーザーが共有する必要のある情報を自由に決定してください。それは、顧客の電子メールアドレス、ユーザー名、国などである可能性があります。
お問い合わせページを使用すると、スパム攻撃を防ぐことができます。

お問い合わせページのWordPressプラグインを使用することの上記のすべての利点を考慮して、以下について説明しましょう。

WordPressのお問い合わせページを作成するために選択するプラグイン。
テンプレートを使用してWordPressのお問い合わせページを作成する方法。

プラグインを使用してWordPressでお問い合わせページを作成する方法

利用可能な連絡先ページのWordPressプラグインはたくさんあるので、その豊富な豊富さに迷うのは簡単です。お問い合わせフォーム-WordPressお問い合わせフォームプラグインを選択して、サイトにお問い合わせフォームを簡単に追加できるようにする意思決定を容易にします。

これは、CodecanyonのプレミアムWordPressプラグインで、価格は24ドルです。 WPダッシュボードを介した簡単な検索で簡単に見つけることができる無料のWordPressプラグインとは異なり、プラグインのアーカイブをPCにダウンロードし、後でサイトにアップロードする必要があります。完了したら、お問い合わせフォームをサイトに追加するいくつかの方法から選択できます。

WordPressサイトの任意のページに追加できるWordPressショートコードを使用します。
プラグインには、ドラッグアンドドロップモードでお問い合わせページを作成するためのVisualComposer要素が含まれています。
ウィジェットを使用して、サイドバーまたはフッターに連絡先フォームを追加することもできます。

WordPressプラグインディレクトリで他の多くの連絡フォームプラグインに出くわすかもしれません。それらの多くは無料で使いやすいです。専用プラグインを使用してお問い合わせページを作成する場合は、問題は発生しません。

プラグインなしでWordPressでお問い合わせページを作成する方法

WordPressで完全に機能するお問い合わせページを作成する方法を見てみましょう。プラグインなしでお問い合わせフォームを追加します。代わりに、目的を達成するために、カスタムのお問い合わせページテンプレートを作成します。

WordPressページテンプレートとは何ですか？

WordPressでは、これらはWebページのレイアウトと機能を担当するphpファイルです（投稿ではなくページについて話します）。すべてのWordPressテーマには、デフォルトのページテンプレートであるPage.phpファイルが付属しています。ページテンプレートは、開発者がニーズに応じてテーマをカスタマイズできる非常に強力な機能です。このチュートリアルでは、カスタムのお問い合わせテンプレートを作成する方法を確認します。

ステップ1：お問い合わせテンプレートを作成する

テーマフォルダに移動し、空白のファイルを作成して、contact.phpという名前を付けます（別の名前を使用することもできます）。 phpファイルは、ユーザー入力を処理するためのフォームHTMLマークアップとPHPコードを保持します。 phpファイルの先頭に次のコードを記述します。

 <？php / *テンプレート名：お問い合わせ* /？>

WordPressはこのコメントブロックを使用して、カスタムページテンプレートを一意に識別します。次に、次のコードをコピーしてファイルcontact.phpファイルに貼り付けます。

 <？php
/ *
テンプレート名：お問い合わせ
 * /
get_header（）; ？>
<div id = "primary">
<div id = "content" role = "main">
</ div> <！-#content->
</ div> <！-#primary->
<？php get_footer（）; ？>

このコードを使用して、連絡先ページテンプレートに構造を追加します。これで、テンプレートにフッターセクションとヘッダーセクションができました。次のステップでは、コンテンツセクションをページに追加する方法を見てみましょう。

ステップ2：HTMLフォームを追加する

お問い合わせフォームは、標準フィールドを持つ単純な要素です。このガイドでは、スタイリングの部分には焦点を当てません。次のコードをContentDivie（div）に追加するだけです。

 <form method = "post" id = "contactus_form">
あなたの名前：<inputtype = "text" name = "yourname" id = "yourname" rows = "1" value = "" />
<br /> <br />
あなたのEメール：<inputtype = "text" name = "email" id = "email" rows = "1" value = "" />
<br /> <br />
件名：<inputtype = "text" name = "subject" id = "subject" rows = "1" value = ""> </ p>
<br /> <br />
メッセージを残す：<textareaname = "message" id = "message"> </ textarea>
<br /> <br />
<input type = "submit" name = "submit" id = "submit" value = "Send" />
</ form>

コードはかなり自明です。名前、電子メール、件名、テキストの4つのフィールドをフォームで使用しました。次のステップでは、フォーム入力を処理するためのphpコードを追加します。

ステップ3：フォーム入力を処理するためのPHPコードを追加します。

PHPコードは2つの部分を処理します。

検証。
実際のメールを送信します。

検証

2種類の検証を使用します。

必須フィールド：-これは、フィールドが入力されているかどうかを確認します。
フィールドフォーマット：これは、入力された値が目的のフォーマットであるかどうかをチェックします。

「LeaveusaMessage」を除いて、3つの入力フィールドすべてに両方の条件を適用します。

検証ロジック

検証ロジックでは、フラグ変数を使用しました。その値は0または1のいずれかになります。検証が成功すると、フラグは1に設定されます。問題が発生した場合、フラグの値は0に設定されます。かなり標準的なロジックです。このロジックを実装するためのコードは次のとおりです。

名前フィールドに適用される検証

if（$ _ POST ['yourname'] ==''）
{$ flag = 0;
echo"名前を入力してください<br>";
}
else if（！preg_match（'/ [a-zA-Z_x7f-xff] [a-zA-Z0-9_x7f-xff] * /'、$ _ POST ['yourname']））
{$ flag = 0;echo"有効な名前を入力してください<br>";}

電子メールフィールドに適用される検証

if（$ _ POST ['email'] ==''）
{{
$ flag = 0;echo"Eメールを入力してください<br>";
}
else if（！eregi（ "^ [_ a-z0-9-] +（。[_ a-z0-9-] +）* @ [a-z0-9-] +（。[a-z0-9-] +）*（。[az] {2,3}）$ "、$ _ POST ['email']））
{{
$ flag = 0;echo"有効な電子メールを入力してください<br>";
}

サブジェクトフィールドに適用される検証

if（$ _ POST ['subject'] ==''）
{{
$ flag = 0;echo"件名を入力してください<br>";
}

メッセージフィールドに適用される検証

すでに述べたように、メッセージボックスフィールドにフォーマットフィールド検証を適用する必要はありません。

 if（$ _ POST ['message'] ==''）
{{
$ flag = 0;echo"メッセージを入力してください";
}

すべてのコードは一目瞭然です。入力フィールドが空でなく、正しい形式を備えていることを確認してください（特殊文字は使用されていません）。

フォーム入力の処理

これで、入力が適切に検証されました。管理者に通知する必要があります。次のコードはフォームデータを処理し、名前、電子メールの件名、メッセージなどの詳細を管理者に電子メールで送信します。

メールの送信にはwp_mail関数を使用します。 wp_mailの詳細については、ここをクリックしてください。

 <？php
if（$ flag == 1）
{{
wp_mail（get_option（ "admin_email"）、trim（$ _ POST [yourname]）。 "は、"。get_option（ "blogname"）、stripslashes（trim（$ _ POST [message]））、 "From："からメッセージを送信しました。 trim（$ _ POST [yourname]）。 "<"。trim（$ _ POST [email]）。"> rnReply-To："。trim（$ _ POST [email]））;
echo"メールが正常に送信されました";
}
？>

お問い合わせテンプレートの最終コード

お問い合わせテンプレートphpファイルに含まれているコードの最終バージョンは次のようになります。

 <？php
/ *テンプレート名：お問い合わせ* /
get_header（）; ？>
<div id = "primary">
<div id = "content" role = "main">
<font color = "＃FF0000">
<？php
if（isset（$ _ POST ['submit']））
{{
$ flag = 1;
if（$ _ POST ['yourname'] ==''）
{{
$ flag = 0;
echo"名前を入力してください<br>";
}
else if（！preg_match（'/ [a-zA-Z_x7f-xff] [a-zA-Z0-9_x7f-xff] * /'、$ _ POST ['yourname']））
{{
$ flag = 0;
echo"有効な名前を入力してください<br>";
}
if（$ _ POST ['email'] ==''）
{{
$ flag = 0;
echo"メールアドレスを入力してください<br>";
}
else if（！eregi（ "^ [_ a-z0-9-] +（。[_ a-z0-9-] +）* @ [a-z0-9-] +（。[a-z0-9-] +）*（。[az] {2,3}）$ "、$ _ POST ['email']））
{{
$ flag = 0;
echo"有効な電子メールを入力してください<br>";
}
if（$ _ POST ['subject'] ==''）
{{
$ flag = 0;
echo"件名を入力してください<br>";
}
if（$ _ POST ['message'] ==''）
{{
$ flag = 0;
echo"メッセージを入力してください";
}
if（empty（$ _ POST））
{{
print'申し訳ありませんが、ノンスは確認しませんでした。';
出口;
}
そうしないと
{{
if（$ flag == 1）
{{
wp_mail（get_option（ "admin_email"）、trim（$ _ POST [yourname]）。 "は、"。get_option（ "blogname"）、stripslashes（trim（$ _ POST [message]））、 "From："からメッセージを送信しました。 trim（$ _ POST [yourname]）。 "<"。trim（$ _ POST [email]）。"> rnReply-To："。trim（$ _ POST [email]））;
echo"メールが正常に送信されました";
}
}
}
？>
</ font>
<form method = "post" id = "contactus_form">
あなたの名前：<inputtype = "text" name = "yourname" id = "yourname" rows = "1" value = "" />
<br /> <br />
あなたのEメール：<inputtype = "text" name = "email" id = "email" rows = "1" value = "" />
<br /> <br />
件名：<inputtype = "text" name = "subject" id = "subject" rows = "1" value = ""> </ p>
<br /> <br />
メッセージを残す：<textareaname = "message" id = "message"> </ textarea>
<br /> <br />
<input type = "submit" name = "submit" id = "submit" value = "Send" />
</ form>
</ div> <！-#content-> </ div> <！-#primary->
<？php get_footer（）; ？>

お問い合わせページの最終スクリーンショット。

お問い合わせフォームは次のようになります

WordPressの作成方法お問い合わせページ1

ステップ4：お問い合わせテンプレートを使用する

WordPressダッシュボードを開きます。新しいページを作成し、ページ属性ボックス内の「お問い合わせ」テンプレートを選択することを忘れないでください。以下のスナップショットを参照してください。

WordPressの作成方法お問い合わせページ2

次に、ページを公開してメニューに追加します。その結果、プラグインを使用せずに作成した、光沢のある完全に機能するお問い合わせページが表示されます。 WordPressのお問い合わせページに追加できるものは他にもたくさんあります。頭に浮かぶことの1つは、スパムを防ぐためにキャプチャまたはその他の検証を追加することです。