プラグインを使用して連絡先フォームを追加する方法– P1：連絡先フォーム7を使用する

あなたがプロのウェブサイトを持ちたいならば、連絡フォームは最も重要な要素の1つです。 専用のプラグインを使用している場合は、お問い合わせフォームを作成して設定することも難しくありません。 プラグインを使用した連絡フォームを簡単かつ迅速に作成できるように、最も人気のある連絡フォームプラグインの使用方法に関する説明をまとめて作成しました。

シリーズ「お問い合わせフォーム」の最初の部分で、調べてみましょう。

• お問い合わせフォームとは何ですか？
• お問い合わせフォームのメリット
• Contact Form 7プラグインを使用してフォームを作成するにはどうすればよいですか？

お問い合わせフォームとそのメリットは何ですか？

お問い合わせフォームとは何ですか？

お問い合わせフォームは、マーケターによく知られている用語です。 お問い合わせフォームを使用すると、ユーザーはメールを送信したり、メールアドレスを知らなくてもウェブサイトで直接連絡したりできます。

お問い合わせフォームには通常、ユーザーがメール、電話番号、名前、メールの内容などの必要な情報を入力するための多くのフィールドがあります。さらに、通常、お問い合わせページまたは顧客の連絡先情報を取得する必要がある領域に配置されます。 。 次に例を示します。

お問い合わせフォームのメリット

ユーザーは連絡フォームを使用して、サイト所有者に情報を送信（連絡先情報を残す、サポートリクエストやその他のリクエストを送信するなど）できるため、連絡がはるかに便利で迅速になります。

さらに、連絡フォームを使用すると、電子メールを非公開に保つだけでなく、スパムやセキュリティの脅威を減らすことができます。 したがって、毎日スパムやゴミでいっぱいのメールボックスを処理する必要はありません。

また、お問い合わせフォームは、ユーザーがフォームに要求した情報を入力する必要があるため、ユーザーの情報をより簡単に収集するのに役立ちます。 これは、より多くのリードを獲得するための戦略の1つです。

一般的に、専門的なWebサイトを構築し、ビジネスにより多くの利益を得るには、お問い合わせフォームを使用する必要があります。

お問い合わせフォームの作成方法

必要に応じてフィールドとフォームを作成するようにコーディングできます。 ただし、あなたがコーダーでない場合、これは不可能です。 または、これを行うためにコーダーを雇う金額を支払う必要があります。

したがって、技術者以外のユーザー、または開発者（時間と労力を節約するため）の連絡フォームを作成するための最も便利なソリューションは、プラグインを使用することです。 現在、シンプル、簡単、高速、無料の連絡フォームプラグインがたくさんあります。 だから、お問い合わせフォームを作成するためにそれらを使用しない理由はありませんよね？

このシリーズのすべての記事では、次のように大学登録フォームを作成する方法を紹介します。

お問い合わせフォーム7を使用してフォームを作成する

シリーズ「プラグインを使用した連絡先フォームの作成」のこの最初の記事では、今日利用できる最も人気のある無料の連絡先フォームプラグインの1つである連絡先フォーム7を使用します。

まず、wordpress.orgのプラグインリポジトリからこのプラグインをダウンロードしてインストールするか、[ダッシュボード] > [プラグイン] > [新規追加]に移動してインストールしてアクティブ化します。

お問い合わせフォーム7

著者：三好隆行

現在のバージョン： 5.5.3

最終更新日： 2021年11月28日

contact-form-7.5.5.3.zip

82％の評価5,000,000+インストールWP5.7 +必要

このプラグインを使用して上記の大学登録フォームを作成するための具体的な手順は次のとおりです。

インターフェース

[ダッシュボード] > [連絡先] > [新規追加]に移動して、新しい連絡先フォームを作成します。 使用するインターフェースは次のとおりです。

（1）：お問い合わせフォームの名前を入力してください
（2）：お問い合わせフォームを作成および設定するためのタブ。

• [フォーム]タブ：お問い合わせフォームのフィールドを作成します
• [メール]タブ：お問い合わせフォームから受信するメールを設定します
• [メッセージ]タブ：データの代入エラー、フォームを送信できない、フォームを正常に送信するなどのエラーが発生したときにユーザーが受信する通知を含めます。
• [追加の設定]タブ：お問い合わせフォームに他の要素を追加します。

お問い合わせフォームのフィールドを作成する

前述したように、連絡フォームには、ユーザーが情報を入力したり、情報を操作したりできるフィールドが含まれています。 これらのフィールドを作成するために使用される[フォーム]タブは次のとおりです。

（1）名前、メールアドレス、番号、送信ボタンなど、フォームに追加するフィールドで構成されています。…任意のフィールドを追加するには、対応するフィールドの名前をクリックするだけです。

（2）は、フォーム構造をHTML形式で表示するための領域です。 新しいお問い合わせフォームを作成すると、メール、名前、件名、送信ボタンなどの単純なフィールドを持つ基本フォームのデフォルトの構造になります。 このフォームをすぐに使用することも、それに基づいて新しいフォームを作成することもできます。

フィールドの一般的な説明

目的のフィールドを選択すると、フィールドに必要な情報を入力するポップアップが表示されます。 各フィールドには異なる情報が必要ですが、一般に、すべてのフィールドに次のセクションがあります。

名前：名前属性
デフォルト値：フィールドのデフォルト値
Id属性：フィールドのID
クラス属性：フィールドのクラス

注： ID属性とClass属性はオプションであり、そこにカスタム情報を入力できます。 お問い合わせフォームのスタイルを簡単にする次の手順が必要な場合は、これら2つのセクションに入力する必要があります。

この情報を入力すると、このボックスの下部に作成したフィールドのタグが表示されます。 [タグの挿入]をクリックして、このフィールドをフォームのHTMLに挿入します。

通常、Contact Form 7で作成されたContactFormの各フィールドのタグは、次の構造になります。

 [field * name_attribute id：field_id class：field_class "フィールドのデフォルト値"]

説明：

• field *は、選択したフィールドのタイプです。 これは、フィールドの最も重要で必須の部分です。
• *は、このフィールドが必須であることを意味します。 ユーザーに強制的に入力させたくない場合は、 *削除してください。

Contact Form 7のフィールドタグの構造の詳細については、このドキュメントを参照してください。 お問い合わせフォームの意味とHTML構造を理解すると、コードを使用して新しいフィールドを編集、作成、追加するのが簡単になります。 特にコーダーの場合、上記の構文に従ってフォームを作成するためのHTMLコードを記述できます。 ただし、非コーダーでは難しい場合があるので、以下の手順に従うことをお勧めします。

このシリーズの連絡フォームでは、次のフィールドを選択する必要があります。

すべてのフィールドには、上記で述べた共通の情報があります。 したがって、ここでは各フィールドの特定の部分をガイドします。

以下は、各フィールドの詳細な手順です。

名前を入力するためのフィールドを作成する

テキストフィールドを選択し、フィールドの基本情報をボックスに入力します。

フィールドタイプのセクションでは、（これはオプションです）このフィールドが満たされることが義務付けられているように必要に選択することができます。

注：「デフォルト値」セクションで、 「このテキストをフィールドのプレースホルダーとして使用」を選択して、ユーザーがデータを入力する前にこのコンテンツをフィールドに表示します。 このモードを使用して、フィールドに入力する必要があるものをユーザーに説明する必要があります。

Akismetセクションは、スパム対策プラグインであるAkismetプラグインに関連しています。 このプラグインがない場合は、このセクションを気にしないでください。

電話番号を入力するためのフィールドを作成する

番号フィールドを選択し、フィールドの基本情報を入力します。

[フィールドタイプ]セクションで、このフィールドのタイプを選択します。 フィールドには、 SpinboxとSliderの2種類があります。

スライダーには、次のように数値を選択するための目盛りが表示されます。

このスタイルは、特定のスケールに基づいてスコアを付けたり、数字を選択したりするのに適しています。

一方、 Spinboxでは、電話番号、カード番号、IDカード番号など、任意の番号をフィールドに入力できます。この例では、Spinboxを選択します。

[範囲]セクションでは、数の制限を選択できます。 この例では、このセクションは必要ないので、何も入力しませんでした。

専攻と研究場所を選択するためのフィールドを作成します

このフィールドで、ドロップダウンメニューを選択します。

ここで、[オプション]セクションに専攻と場所のオプションを入力します。各オプションは行であることに注意してください。

ユーザーが一度に複数のオプションを選択できるようにする場合は、[複数の選択を許可する]をクリックします。

登録の目的を選択するためのフィールドを作成する

チェックボックスフィールドを選択します。

[オプション]セクションは、上のドロップダウンメニューフィールドのセクションと似ています。 さらに、次のようにチェックボックスのオプションがあります

• 最初にラベルを配置し、最後にチェックボックスを配置します
• 各アイテムをラベル要素でラップします
• チェックボックスを排他的にします（1つのオプションのみを選択できます）。

送信ボタンを作成する

最後に、送信フィールドを選択し、次の要件として情報を入力します（ラベルはこのボタンに表示される単語であることに注意してください。たとえば、「送信」、「登録」、「確認」など）。

特に、新しいフォームを作成するとき、このプラグインはすでに送信済みフィールドを自動的に作成しています。 したがって、このフィールドは新しいフィールドを作成せずに使用できます。

フィールドのラベルを追加する

これで、お問い合わせフォームのフィールドの作成が完了しました。 ただし、次のように、フィールドに連絡フォームに表示する名前がありません。

したがって、フォームのHTML部分に次のコード構造を挿入して、フィールドにラベルを追加する必要があります。

 <label>フィールドラベル
[フィールドのタグ] </ label>

次に、[フィールドラベル]セクションにフィールドのラベルを書き込みます。 次に、上記のすべての情報を入力し、[保存]をクリックします。

フィールドを作成した後、連絡フォームは次のコード構造になります。フロントエンドの目的の位置にフィールドを表示するようにフィールドを配置したことに注意してください。

 <ラベル>あなたの名前（必須）
[text * your-name "enter your name"] </ label> 

<ラベル>あなたの電話番号
[電話番号プレースホルダー「電話番号を入力してください」] </ label> <label>メールアドレス（必須）
[email * your-email "enter your email"] </ label>

<レーベル>メジャー
[select * major "Computer science" "Linguistics" "Agriculture" "Engineering" "eCommerce"] </ label>
<ラベル>調査する場所 
[select *調査場所 "ニューヨーク" "シカゴ" "ロサンゼルス" "ワシントンDC" "ヒューストン" "フィラデルフィア"] </ label>

</ label>登録する
[チェックボックス*登録label_first "Study" "Take a tour" "Consult"] </ label>

[送信 "送信"]

今回は、お問い合わせフォームはまだウェブサイトに表示されません。 フロントエンドに表示するには、さらにいくつかの手順を実行する必要があります。

お問い合わせフォームの設定

メールを設定する

[メール]タブでは、ユーザーが連絡フォームを送信したときに受信するメールの内容をカスタマイズできます。 このセクションを設定するには、作成した連絡フォームにフィールドのメールタグを挿入する必要があります。 次に例を示します。

説明：

• 宛先：お問い合わせフォームの確認担当者のメールアドレスを入力してください。
• 差出人と件名：このお問い合わせフォームの送信者を決定するには、ここに名前を設定する必要があります。
• メッセージ本文：ここにメールタグを追加して、お問い合わせフォームからメールを受信したときに、ユーザーに要求するすべての情報が表示されるようにします。

その他の設定

[メッセージ]タブ

タブの説明に表示されているように、状況で使用されるメッセージを入力します。 たとえば、ユーザーがフォームを正常に送信した後、または送信に失敗した後、メッセージを追加してユーザーに通知する必要があります。 または、ユーザーが必須フィールドを忘れた場合は、メッセージを追加して、ユーザーが戻ってそのフィールドに入力できるようにする必要があります。 これらは小さな詳細ですが、ユーザーエクスペリエンスを向上させるために注意を払う必要があります。

[追加設定]タブ

このタブは、以下をインストールするためのコードスニペットを追加するのに役立ちます。

• サブスクライバー専用モード
• デモモード
• メールをスキップする
• 検証としての受け入れ
• フラミンゴの設定
• メッセージストレージの抑制
• JavaScriptコード

次のような非常に便利なパーツを使用する必要があります。

• サブスクライバー専用モード：このモードでは、Webサイトにログインしているユーザーのみが連絡フォームを送信できます。 これによりスパムメッセージが排除され、本当にあなたに連絡したい人だけが対象になります。
• 検証としての承認：ユーザーがこのボックスをチェックせずに別のフィールドに移動した場合に、[承認]チェックボックスの通知を表示する機能を追加します。 デフォルトでは、ユーザーが[承認]チェックボックスをオンにしない場合、エラーメッセージはフォームを送信した後にのみ表示されるためです。 この[承認]チェックボックスは、「ウェブサイトの利用規約に同意します」などのフィールドを作成するためによく使用されますが、他のコンテンツタイプを作成する場合は、検証として[承認]を追加する必要があります。

[追加設定]タブの他の機能の詳細については、こちらをご覧ください。

ウェブサイトに連絡フォームを表示する

最後のステップは、Webサイトで作成したばかりの連絡フォームを表示することです。

引き続き新しいフォームを作成するためのインターフェースで、ショートコードをコピーして目的のページまたは投稿に貼り付けます。

これが私の最終結果です：

ただし、お問い合わせフォームは見栄えがよくないので、少しスタイルを設定する必要があります。

この記事の冒頭で示したテンプレートのように連絡先フォームのスタイルを変更する場合は、フォームのHTMLを次のように編集して、スタイルを簡単にする必要があります。

 <div class = "form__field form__full-width">
<label>あなたの名前（必須）
[テキスト*あなたの名前のプレースホルダー「あなたの名前を入力してください」]
</ label>
</ div>
<div class = "form__field">
<label>あなたの電話番号
[電話番号プレースホルダー「電話番号を入力してください」]
</ label>
</ div>
<div class = "form__field">
<label>あなたのEメール（必須）
[メール*あなたのメールプレースホルダー「あなたのメールを入力してください」]
</ label>
</ div>
<div class = "form__field">
<ラベル>メジャー
[選択*主要な「コンピュータサイエンス」「言語学」「農業」「工学」「eコマース」]
</ label>
</ div>
<div class = "form__field">
<ラベル>調査する場所
[選択*調査場所「ニューヨーク」「シカゴ」「ロサンゼルス」「ワシントンDC」「ヒューストン」「フィラデルフィア」]
</ label>
</ div>
<div class = "form__field form__full-width">
<label>登録先
[チェックボックス*登録use_label_element "調査" "ツアーに参加" "相談"]
</ label>
</ div>
<div class = "form__field form__full-width">
[送信 "送信"] </ div>

次に、テーマのカスタマイザー>追加のCSSに移動し、次のコードを貼り付けます。

 #wpcf7-f330-p104-o1 .wpcf7-form { display: flex; flex-wrap: wrap; margin: 0 -15px; padding: 20px; background: #eeeeee; } .form__field { width: 50%; padding: 0 15px; margin-bottom: 20px; } .form__field.form__full-width { width: 100%; } .form__field input:focus::placeholder { opacity: 0; } .form__field input, .form__field select { width: 100%; color: #77818e; font-style: italic; } .form__field input::placeholder, .form__field select::placeholder { color: #77818e; } .form__field input[type="submit"] { color: #4299e1; width: auto; background: #fff; border: 1px solid #4299e1; } .form__field span.wpcf7-list-item { margin: 10px 20px 0 0; display: block; } .form__field span.wpcf7-list-item input { width: auto; } .wpcf7-checkbox { display: flex; justify-content: space-between; }

最後に、[公開]をクリックして保存します。

最後の言葉

Contact Form 7を初めて使用するとき、コーダーでない場合はHTMLに慣れていないことに気付くかもしれません。 しかし、このチュートリアルを読んだ後は、すべてが簡単になったと思いますよね？

他のツールを使用してお問い合わせフォームを作成してみたい場合は、このシリーズの次の記事を楽しみにしてください。 どのプラグインを提案しますか？ この記事の下にコメントを残してください！