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

公開: 2020-11-02

「お問い合わせフォーム」シリーズの前回の記事では、お問い合わせフォームとは何か、お問い合わせフォーム7プラグインの使用方法を学びました。 約束どおり、WPFormsを使用して別のチュートリアルを作成しました。この記事では、このチュートリアルを紹介します。

目次を隠す
  1. 1.ステップ1：WPFormsプラグインをインストールしてアクティブ化する
  2. 2.ステップ2：新しいお問い合わせフォームを作成し、テンプレートを選択します
  3. 3.ステップ3：お問い合わせフォームのフィールドを追加する
    1. 3.1。 フィールドを追加
    2. 3.2。 各フィールドの一般オプションをカスタマイズする
    3. 3.3。 「あなたの名前」フィールドをカスタマイズする
    4. 3.4。 「あなたの電話番号」フィールドをカスタマイズする
    5. 3.5。 「あなたのメール」フィールドをカスタマイズする
    6. 3.6。 「調査する場所」と「主要な」フィールドをカスタマイズする
    7. 3.7。 「登録先」フィールドをカスタマイズする
  4. 4.ステップ4：お問い合わせフォームを設定する
    1. 4.1。 一般設定を構成する
    2. 4.2。 通知を構成する
    3. 4.3。 確認を構成する
  5. 5.ステップ5：ページ/投稿にフォームを表示する
  6. 6.ステップ6：フォームのスタイルを設定する
  7. 7.最後の言葉

WPFormsは、リアルタイムプレビューを備えたフリーミアムのドラッグアンドドロップコンタクトフォームプラグインです。 私の経験では、このプラグインを使用するのは簡単で便利です。

このシリーズのパート1で作成したこの大学登録フォームのサンプルを覚えていますか？ 次に、WPFormsを使用して同じものを作成します。

WPFormsプラグインを使用して大学登録連絡フォームを作成する

ステップ1：WPFormsプラグインをインストールしてアクティブ化する

このプラグインはwordpress.orgに無料バージョンがあるため、管理ダッシュボードでプラグインをインストールしてアクティブ化する必要があります。

WPFormsによるお問い合わせフォーム–WordPress用のドラッグアンドドロップフォームビルダー WPFormsによるお問い合わせフォーム–WordPress用のドラッグアンドドロップフォームビルダー

著者：WPForms

現在のバージョン： 1.7.1.2

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

wpforms-lite.1.7.1.2.zip

98％の評価5,000,000+インストールWP4.9 +必要

ステップ2：新しいお問い合わせフォームを作成してテンプレートを選択する

あなたの管理ダッシュボードで、[新規追加> WPFormsに進みます。

WPFormsプラグインを使用して新しい連絡先フォームを作成する

使用する必要のあるインターフェイスは次のとおりです。

WPFormsプラグインの連絡フォームインターフェイス

左側のサイドバーには、次の5つのセクションがあります。

  1. 設定：お問い合わせフォームに名前を付け、そのテンプレートを選択します。
  2. フィールド：お問い合わせフォームのフィールドを追加およびカスタマイズします。
  3. 設定：通知、確認、および一般設定を構成します。
  4. マーケティング：Constant Contact、Campaign Monitor、MailchimpなどのEメールマーケティングツールとリンクします…
  5. 支払い：PayPal Standard、Stripe、およびAuthorize.Netからの支払いを追加します。

注：私はメールマーケティングキャンペーンを実行しておらず、フォームに支払い情報は必要ありません。 したがって、マーケティングと支払いのセクションは必要ありません。

[設定]セクションで、フォーム名を入力し、目的のテンプレートを選択します。

お問い合わせフォームに必要なテンプレートを選択します。

デフォルトのテンプレートは4つあります。

  • 簡単な連絡フォーム
  • ニュースレター登録フォーム
  • の提案
  • 空白のフォーム

空白のフォームを除いて、他のテンプレートには、連絡先フォームをより速く作成するために利用できる独自の作成済みフィールドがあります。 さらに、WPFormsアドオン（有料バージョンでのみ使用可能）をインストールして、より多くのテンプレートを取得できます。

この記事では、空白のフォームテンプレートを選択して、最初からお問い合わせフォームを段階的に作成します。 これにより、すべてをより簡単かつ深く理解することができます。

空白のフォームで大学登録連絡フォームを作成する

ステップ3：お問い合わせフォームのフィールドを追加する

フィールドを追加

手順2で空白のフォームテンプレートを選択すると、[フィールド]セクションに移動します。

WPFormsプラグインのフィールドセクション

お問い合わせフォームにフィールドを追加するには、[フィールドの追加]タブから目的のフィールドをドラッグし、お問い合わせフォームにドロップします。

フィールドをお問い合わせフォームにドラッグアンドドロップします

次に、フィールドをカスタマイズするには、フィールドをクリックしてから、[フィールドオプション]タブでそのパラメーターを編集します。

WPFormsプラグインを使用して大学登録フォームのフィールドをカスタマイズします

また、フィールドにカーソルを合わせて目的のボタンをクリックすると、フィールドを削除または複製できます。

WPFormsプラグインを使用して、連絡先フォームのフィールドを複製および削除します

この記事では、次のフィールドを追加する必要があります。

フィールド名フィールドタイプ
あなたの名前1行のテキスト
あなたの電話番号数字
あなたのEメールEメール
勉強する場所落ちる
選考科目落ちる
登録するチェックボックス

これらすべてのフィールドを追加したら、次の手順で各フィールドをカスタマイズする必要があります。

各フィールドの一般オプションをカスタマイズする

一般に、各フィールドをカスタマイズするための2種類のオプションがあります。

基本オプション：すべてのフィールドにこれらのオプションが含まれているため、連絡フォームを明確でわかりやすくするために、これらのオプションを絶対に使用する必要があります。

  • ラベル：表示するフィールド名を入力します。
  • 説明：これは、ユーザーに何をすべきかを伝えるためのフィールドの下のテキスト表示です。
  • 必須：オプションです！ このフィールドを強制的に入力するには、チェックマークを付けます。

次のステップで「基本情報」と言うとき、それはあなたがこれらの基本的なオプションに対処する必要があることを意味します。

高度なオプション：各フィールドにいくつかの高度な機能があります。 それらに対処することはオプションですが、注意すべき重要なことがいくつかあります。

  • プレースホルダーテキスト：ユーザーがデータを入力する前に、フィールド内にテキストを表示します。 このテキストは、ユーザーが入力する必要がある内容を簡単に理解できるようにするためのガイドまたは例として使用できます。たとえば、電子メールフィールドのプレースホルダーテキストを「電子メールを入力」に設定できます。
  • デフォルト値：同じ回答を持つ人が多い場合は、デフォルトの回答を設定して、ユーザーの時間と労力を節約できます。 たとえば、ニューヨークに住む人々の連絡フォームを作成すると、[場所]フィールドにデフォルト値の「ニューヨーク」を入力できます。
  • CSSクラス：このボックスにCSSクラスを入力して、フィールドのスタイルを設定します。 次のステップでは、このセクションに連絡先フォームのスタイルを設定するコードを含めます。

注：

  • お問い合わせフォーム7では、デフォルト値をプレースホルダーテキストとして使用できます。 ただし、プレースホルダーテキストセクションが分離されているため、WPFormsの方が便利です。 さらに、WPFormsには、フィールドの下にテキストを表示する[説明]セクションがあります。 お問い合わせフォームの見栄えが良くなるので、この方法を使用します。

WPFormsには、フィールドの下にテキストを表示する[説明]セクションがあります。

  • オプション/フィールドの横にある疑問符ボタンをクリックして、WPFormsの説明を読むことができます。

疑問符ボタンをクリックして、WPFormsの説明を読んでください

さらに、各フィールドに応じていくつかの異なるオプションがあります。 それらが何であるかを調べましょう！

「あなたの名前」フィールドをカスタマイズする

Simple Line Textフィールドを選択し、基本情報を入力するだけです。

「あなたの名前」フィールドをカスタマイズする

このフィールドでは、[詳細オプション]セクションにさらに2つのオプションがあります。

  • 制限長：チェックすると、フィールドに入力できる最大文字数の制限が選択されます。
  • 入力マスク：入力マスクを入力して、フィールドに特定の形式を要求します。 詳細については、こちらをご覧ください。

1行のテキストフィールドの詳細オプション

「あなたの電話番号」フィールドをカスタマイズする

このフィールドには特別なことは何もありません。 [数値]フィールドを選択して、基本情報を入力するだけです。

「あなたの電話番号」フィールドをカスタマイズする

「あなたのメール」フィールドをカスタマイズする

[電子メール]フィールドを選択し、フィールドの基本情報を入力します。

「あなたのメール」フィールドをカスタマイズする

このフィールドには、もう1つの基本的なオプションがあります。Eメール確認を有効にする。 これをチェックして、ユーザーにメールアドレスを2回入力するように依頼できます。 これは彼らの電子メールが正しいことを確認します。

「調査する場所」と「主要な」フィールドをカスタマイズする

まず、[ドロップダウン]フィールドを選択します。 [選択肢]セクションで、フィールドのオプションを入力します。 （+）（-）をクリックして、選択肢を追加/削除できます。

「調査する場所」と「主要な」フィールドをカスタマイズする

さらに、[一括追加]ボタンをクリックして、一度に多くの選択肢を追加することもできます。 [選択肢の追加]ボックスで、希望の順序で選択肢を入力し（各選択肢は行です）、[新しい選択肢の追加]をクリックします。

お問い合わせフォームのドロップダウンメニューに選択肢を追加します

さらに、このフィールドには、注意が必要な2つの高度なオプションがあります。

  • スタイル：ドロップダウンメニューには、クラシックとモダンの2つのオプションを使用してスタイルを設定できます。 モダンなスタイルでキーワードで検索できます。 したがって、多くのオプション（10以上のオプション）があるメニューでうまく機能します。
  • 動的な選択肢：ユーザーが投稿の種類または分類法から選択肢を選択できるようにします。 たとえば、[投稿]として[動的投稿タイプソース]を選択した場合、ドロップダウンメニューの各選択肢はWebサイト上の投稿になります。

ドロップダウンフィールドの詳細オプション

「登録先」フィールドをカスタマイズする

[チェックボックス]フィールドを選択し、[ドロップダウン]フィールドなどの選択肢を入力します。

「登録先」フィールドをカスタマイズする

このフィールドには、注意が必要な2つの高度なオプションがあります。

  • 画像の選択肢を使用する：画像の選択肢を説明し、連絡先フォームをより魅力的で視覚化するために使用できます。
  • ランダムな選択：これにより、最初の選択肢であるという理由だけで、人々が選択肢を選択するのを防ぐことができます。

ステップ4：お問い合わせフォームを設定する

お問い合わせフォームを作成したら、設定する必要があります。 WPFormsの無料バージョンでは、以下の3つのセクションを構成できます。

一般設定を構成する

WPFormsプラグインには、このパートの各オプションに関する特定の手順があります。 疑問符ボタンをクリックして注意深く読み、次のフィールドに注意してください。

  • [送信]ボタンのテキスト：お問い合わせフォーム7で、[送信]フィールドを作成する必要があります。 ただし、WPFormsには、送信ボタンが組み込まれています。 このセクションのこのボタンのテキストは、[登録]、[メールの送信]など、好きなように変更できます。
  • スパム対策保護を有効にする：スパマーが大量の「ゴミ箱」を介して迷惑をかけることがあります。 その場合は、スパム対策のこの機能をオンにする必要があります。

WPFormsの一般設定を構成する

通知を構成する

ユーザーが連絡フォームを送信するたびに電子メール通知を受信する場合は、 [設定] > [通知]に移動します。

このセクションのフィールドに「スマートタグ」またはテキストを追加して、ユーザーが連絡フォームを送信したときに受信する電子メールをより簡単に管理できます。

注：スマートタグを使用すると、連絡先フォームの通知に情報を自動的に追加できます。

これは私の設定の例です：

WPFormsプラグインの通知を構成します

確認を構成する

[確認]セクションでは、ユーザーが連絡フォームを送信した後に受信するメッセージを構成できます。

WPFormsプラグインの確認を構成します

すべての構成が完了したら、[保存]をクリックするだけです。

WPFormsの設定を保存します

ステップ5：ページ/投稿にフォームを表示する

ページ/投稿にフォームを表示するには、2つの方法があります。

最初の方法は、[埋め込み]をクリックしてフォームをページに表示することです。

WordPressウェブサイトのページ/投稿に大学登録フォームを表示します

その後、お問い合わせフォームをサイトの新しいページまたは既存のページに埋め込みます。

WordPressWebサイトのページに連絡フォームを埋め込みます

2番目の方法は、お問い合わせフォームのショートコードをページ/投稿に挿入することです。 投稿とページの両方に連絡フォームを表示できるため、2番目の方法を選択することをお勧めします。 これを行うには、管理ダッシュボードで、[ WPForms] > [ All Forms ]に移動し、連絡先フォームを見つけて、そのショートコードをコピーします。

大学登録フォームのショートコードをコピーする

次に、このショートコードを目的の投稿/ページに貼り付けます。

WordPressウェブサイトの投稿にショートコードを貼り付けます

そしてここに結果があります：

大学登録フォーム

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

ステップ6：フォームのスタイルを設定する

管理ダッシュボードで、[ WPForms] > [ All Forms ]に移動し、連絡先フォームを見つけて、[編集]をクリックします。

お問い合わせフォームのスタイルを設定する

次に、各フィールドをクリックし、[詳細オプション] > [ CSSクラス]に移動して、次の値を追加します。

  • あなたの名前と登録先： ip-100
  • あなたの電話番号、電子メール、勉強する場所、専攻： ip-50

次に、[カスタマイザー] > [追加CSS]に移動し、次のコードを追加します。

 .wpforms-field-container {
    表示：フレックス;
    フレックスラップ：ラップ;
		justify-content：space-between
}

.ip-50 {
    幅：48％！重要;
}

.ip-100 {
		幅：100％！重要;
}

div.wpforms-container-full .wpforms-form input.wpforms-field-medium、
div.wpforms-container-full .wpforms-form select.wpforms-field-medium {
	最大幅：100％;
}

.ip-100 ul {
	表示：フレックス;
	justify-content：space-between;
}

div.wpforms-container-full {
    margin-bottom：24px;
    背景：#eeeeee;
    パディング：20px;
}

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

そして、これが最終結果です：

スタイリング後のお問い合わせフォーム

お問い合わせフォームの見栄えが良くなりましたね。 さて、私のサンプルと完全に類似したフォームを作成するための最後のステップを完了しました。

最後の言葉

私の経験では、WPFormsのようにドラッグアンドドロップインターフェイスを使用する方が、Contact Form 7を使用するよりも簡単で高速です。さらに、作成済みの送信ボタンと、プレースホルダーテキストと説明として2つの便利なセクションがあります。 ライブプレビューもとても便利です。 フォームを作成およびカスタマイズするときに、間違いをより簡単に検出するのに役立ちます。

より多くの連絡フォームプラグインを使用する方法を学ぶために、このシリーズの次の記事に従ってください！ WPFormsについて質問がある場合、またはお問い合わせフォームプラグインを提案する場合は、コメントセクションに残してください。