WordPress Webサイトまたはブログに連絡先フォームを追加する方法


お問い合わせフォームを追加する方法Webサイトの所有者は、WordPressに連絡先フォームを追加する方法を確実に学ぶ必要があります。あなたのウェブサイトは匿名の実体ではありません。ほとんどの人は、自分が読んだコンテンツの背後にいる人を知り、時には対話することを望んでいます。なぜ著者のプロフィールとブログのコメントがあると思いますか?


そのため、この記事では、WordPress Webサイトに連絡先フォームを追加する方法を学びます。投稿では、まずそれが良いアイデアである理由が説明され、次にプラグインを介してサイトに連絡先フォームを含める方法のステップバイステップガイドが表示されます.

また、フォームのデザインを変更してスパム対策を実装する方法についても説明します。さらに、お問い合わせフォームと個人データ保護についても検討します。これは、最近ますます注目されているものです。最後に、WordPressで連絡先フォームを追加するために使用できるプラグインのリストがあります。.

かなり聞こえるかもしれませんが、心配しないでください。シンプルに保ちます。!

WordPressサイトでお問い合わせフォームを使用する理由?

なぜそれが必要なのかを検討する方法に入る前に。たとえば、メールアドレスを直接投稿するのではなく、サイトでお問い合わせフォームを使用する多くの理由があります。.

  • メールスパムからの保護 —スパムは害虫です。ブログのコメントを使用するWordPress Webサイトがあると、すぐに気づくでしょう。スパマーが行うことの1つは、保護されていない電子メールアドレスをWebサイトで自動的にスキャンして、メーリングリストに追加できるようにすることです。連絡先フォームは、訪問者にあなたの住所をオンラインで公開することなく連絡を取る機会を与えることにより、それを防ぎます.
  • 正しい情報を求める —あなたと連絡をとる人々は、あなたが必要とするすべての情報を常に送るとは限りません。お問い合わせフォームを使用すると、具体的に事前に問い合わせることができます。また、たとえばタイプ別に照会をフィルタリングする方法も提供します。これはあなたの人生を楽にし、前後の多くを減らします.
  • クライアントに知らせる —逆に、お問い合わせフォームは情報の最初のポイントとしても機能します。発信者が予想される応答時間と、問い合わせに対処するために事前に実行できる手順について知らせるための情報を含めることができます。これにより、同じせっかちな人からの複数の電子メールの可能性が減少します.

お問い合わせフォームは便利だと思いますか?次に、このチュートリアルの実際の部分に行きましょう.

Contact Form 7を使用してWordPressに連絡フォームを追加する方法

無料とプレミアムの両方で、お問い合わせフォームをサイトに追加するための多くのWordPressプラグインがあります。これらのいくつかについては、この記事の後半で説明します。次のチュートリアルでは、 お問い合わせフォーム7.

プラグインはWordPressディレクトリで無料で利用可能で、一貫して 最も人気のあるプラグイン 常に(実際、この記事を書いている時点では、そもそもそれが最初です)。それに加えて、それは使いやすく、素晴らしい機能リストと賢明なアドオンを持っています.

WordPressに連絡先フォームを追加する方法を教えるために選択したのはそのためです.

ステップ1. Contact Form 7プラグインをインストールする

Contact Form 7のインストールは、他のWordPressプラグインと同じくらい簡単です。サイトにログインするだけで、 プラグイン>新規追加 検索ボックスにその名前を入力します.

連絡先フォーム7をインストールして、WordPressに連絡先フォームを追加する

最初に表示されます。クリック 今すぐインストール サイトにダウンロードします。完了したら、 活性化 プラグインの使用を開始するには.

ステップ2.新しいお問い合わせフォームを作成する

インストール後、次の名前の新しいメニュー項目が見つかります 連絡先 WordPressサイドバー。クリックするとこの画面に移動します.

お問い合わせフォーム7メインメニュー

スパム保護の使用など、連絡先フォームを改善するための多くのツールチップが表示されます。後でそのことについて説明します.

さらに重要なことに、あなたはあなたのサイト上のすべてのお問い合わせフォームのリストを見つけるでしょう。理論的にはすぐに使用できるサンプルフォームが含まれています。クリックして編集を開始するか、 新しく追加する 画面上部にあります。どちらもあなたをここに連れて行きます:

お問い合わせフォーム7を使用してWordPressに連絡フォームを追加する方法

最初は少し不可解に見えますが、心配しないでください。すぐに理解できます。.

機能するには、お問い合わせフォームにフィールドが必要です。フィールドは、訪問者が自分の名前、電子メールアドレス、または送信したいメッセージ、またはあなたが追加してほしいと思うものを入力する場所です.

Contact Form 7は、少しのHTMLとカスタムタグでそれらを作成します。間のすべて お問い合わせフォームの1つのフィールドとそれに属するテキストの説明を示します。実際のフィールドは、角括弧の間にあるものによって作成されます.

それは、コンタクトフォームを作成するためにプログラミング言語を学ぶ必要があるということですか?幸い、プラグインにはこれらを自動的に生成するツールが付属しています.

ステップ3.フォームを構成する

現時点では、バックエンドにあるデフォルトのフォームは、このページのようになります.

お問い合わせフォームの設定
「WordPressに連絡先フォームを追加する」サンプルフォーム

それはすべて標準です。連絡する目的を選択するためのドロップダウンメニューを追加するとします。そうすれば、優先するメッセージをすぐに見ることができます.

これを行うには、まず、連絡先フォームのメニューを表示する場所にカーソルを置く必要があります。この場合、それはメールアドレスと件名の間にあります.

上部のツールバーのドロップダウンメニューをクリックします。次のメニューが表示されます。

お問い合わせフォーム7ドロップダウンメニューの作成

さまざまなフィールドに入力する方法は次のとおりです。

  • フィールドタイプ —お問い合わせフォームの送信にフィールドが必要かどうかを選択します.
  • 名前 —これは、タグで使用される名前を示します。訪問者には表示されませんが、タグの目的を覚えやすくなり、後でアカウントに送信されるメールを設定しやすくなります.
  • オプション —ドロップダウンメニューを使用して、訪問者が利用できるオプションを入力します。 1行に1つずつ入力してください。複数の選択を許可し、デフォルトとして空白のアイテムを使用するオプションもあります.
  • ID /クラス属性 —この場所では、CSSクラスまたはIDをフィールドに割り当てることができます。これはカスタムスタイリングに非常に役立ちます。それについては後で話します.

記入方法は次のとおりです。

フォームタグジェネレータの連絡フォーム7に記入

満足したら、クリックしてください タグを挿入 それをフォームに入れる.

連絡先フォーム7にドロップダウンメニューのフォームタグを追加する

タグの仕組みを理解したら、タグを作成したり、テキストフィールドに変更を加えたりすることもできます。たとえば、新しいドロップダウンメニューを必須フィールドにするには、後にアスタリスクを削除するだけです。 選択する. プラグインを使用すればするほど、プラグインの機能をよりよく理解できます.

あとは、ラベルを追加するだけです。それはそれが何をするかを説明するためにコンタクトフォームフィールドに付随するテキストです。他のフィールドから既存のコードをコピーして貼り付け、必要に応じて調整するだけです.

お問い合わせフォーム7のフォームタグにHTMLコードを追加する

ステップ4.メール設定を編集する

次に、お問い合わせフォームから送信されるメールを設定する必要があります。当然のことながら、これは 郵便物 上部のタブ.

お問い合わせフォーム7のメール設定を構成する

先ほどお問い合わせフォームと同様のタグが事前に入力されたフィールドがあります。また、以前に作成した新しいフィールドタグ(フォームを保存している場合)を含む、使用可能なフィールドタグも提供されます。これらを使用して、お問い合わせフォームからのメッセージの受信方法をカスタマイズできます.

各フィールドの意味は次のとおりです。

  • —メッセージの送信先の電子メールアドレス。通常、これはそのままにしておくことができます.
  • から —メールの送信者。デフォルトでは、お問い合わせフォームを使用している人の名前に設定されています.
  • 追加ヘッダー —追加のメッセージヘッダーフィールド用のスペース。標準設定では、ヒットしたときに送信されたメール(サイトなど)ではなく、連絡先のメールに返信が送信されます 応答. することも可能です そこにCCまたはBCCの宛先を置く.
  • メッセージ本文 —受信するメールの本文.
  • メールタグが空白の行を出力から除外する —これをチェックすると、使用されているタグのいずれかが空の場合、プラグインはそれらをメッセージから除外します.
  • HTMLコンテンツタイプを使用する —デフォルトでは、メッセージはプレーンテキストで送信されます。代わりにHTMLを使用するには、このボックスをチェックしてください.
  • 添付ファイル —フォームでファイルのアップロードが許可されている場合、これらのファイルのタグはここに含まれます。それを使用することもできます サーバーでホストされているファイルを添付する.
  • メール(2) —自動応答としてよく使用される追加のメールテンプレート。チェックして有効化.

標準オプションはかなり良いです。この例で変更する必要があるのは件名だけです.

メールプログラムでフィルターを設定する

上記のフォーマットを使用して、メールプログラムにフィルターを設定して、件名でメッセージをソートし、ビジネスの問い合わせを優先することができます。今のところ、メール設定はこれですべてです.

ステップ5.フォームメッセージを追加する

次は メッセージ タブ。フォームの使用中に訪問者が遭遇する可能性のあるメッセージを設定することができます.

お問い合わせフォーム7のフォームメッセージを設定する

これらは、エラーメッセージ、成功メッセージ、またはフォームを正しく使用するためのヒントです。これらは既にかなり良いことがわかっているので、通常はすべてをそのままにします。それらのいずれかを変更する理由がある場合(たとえば、Webサイトのトーンに合わせるため)、自由に変更してください。.

ステップ6.追加設定をカスタマイズする

最後に、追加設定に進みます.

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

デフォルトでは、これらは空です。ログインしたユーザーのみが連絡フォームを送信してテスト目的でフォームをデモモードに設定する機能を制限することから、さまざまなことを行うことができます。それは私たちの目的にとって重要ではありませんが、すべての異なるオプションを ドキュメンテーション.

ステップ7.フォームをWebサイトに追加する

フォームの構成が完了したので、今度はそれをサイトに配置します。最初に行う必要があるのは、同じ名前のボタンを使用してフォームを保存することです.

その前に、名前を上部に追加することをお勧めします。これにより、複数のフォームを作成する場合に、フォームがより見やすくなります。.

フォームを保存すると、画面にショートコードが表示されます。

連絡先フォーム7ワードコードに連絡先フォームを追加するショートコード

これを使用して、フォームを好きな場所に配置します。まず最初に、マークを付けてコピーします。完了したら、フォームを配置するページに移動します。たとえば、単に新しいページを作成して名前を付けることができます 連絡先. WordPressエディターにショートコードを貼り付けます.

お問い合わせフォーム7ワードプレスエディターのショートコード

ページを公開してフロントエンドに移動すると、次のようになります。

お問い合わせフォーム7ページのフォーム

そこにそれがある。前に作成したドロップダウンメニューに注目してください。必要に応じて、お問い合わせフォームの一部になりました.

シンプルでしょ?さらに、同じ方法を使用してフォームを他の場所に配置できます.

ステップ8.サイドバーに連絡先フォームを含める(オプション)

お問い合わせフォームをサイドバーに配置することほど簡単なことはありません。に行くだけ 外観>ウィジェット. コンタクトフォームを表示させたいウィジェット化された領域にテキストウィジェットを追加し、ショートコードを貼り付けます.

WordPressウィジェットに連絡フォームを追加する

ウィジェットを保存することを忘れないでください!サイトのフロントエンドに戻ると、次のようになります。

WordPressウィジェットのお問い合わせフォーム

WordPressに連絡先フォームを追加する基本をマスターしました。まだ終わりではありません。フォームをさらに改善するためにやるべきことはまだたくさんあります.

WordPressの連絡フォーム–次のステップ

サイトにフォームを作成したら、作業は終わりません。フォームのスタイル設定、メールのスパマーからの保護、個人データの保護対策の実装など、注意すべき重要なことがまだいくつかあります。これを順番に実行してみましょう。

フォームデザインの変更

理想的には、お問い合わせフォームのスタイルを変更する必要はありません。これは、Contact Form 7が次のような標準HTMLコードを使用しているため、おそらく私たちのケースです。 ラベル または input [type = "text"] フォームフィールドを作成する.

適切なWordPressテーマでは、これらはスタイルシートで定義されています。その結果、お問い合わせフォームは自動的にサイトのデザインに適合します。上記のサンプルWebサイトでこれを確認できます。それでも調整が必要な場合に備えて、いくつかのオプションがあります.

前述のように、Contact Form 7フォームには標準のHTMLマークアップがあります。関連するCSSを変更するだけで、フォームの外観を変更できます。これは、同じマークアップを共有するサイトの他の入力フィールドにも影響を与えることに注意してください.

さらに、Contact Form 7で作成されたすべてのフォームには、プラグイン固有のコードが付属しています。ブラウザの開発者ツールを使用してコードを見つけることができます.

CSS経由で連絡先フォームのデザインを変更する

たとえば、フォームのスタイルを変更するには、 .wpc7-form CSSクラス。 Contact Form 7で作成されたすべてのフォームに影響があることに注意してください。ただし、サイトの他の入力フィールドは変更されません。.

さらに具体的にし、特定のフォームのみのスタイルを変更したい場合は、運がいいです。上のスクリーンショットからわかるように、すべてのContact Form 7フォームは独自のCSS IDを取得します.

これを使用して、フォームごとに要素をターゲットにできます。さらに、フォーム上の要素に独自のCSSクラスとIDを与えることができます.

お問い合わせフォーム7フォームにCSSクラスとIDを追加

それらを使用すると、さらに具体的にそれらをターゲットにすることができます.

つまり、フォームのデザインを変更したい場合は、そのためのツールがすべて揃っています。.

スパム保護の実装

スパムは、WebおよびWebサイト全般に関して大きなトピックです。あなたのメールアドレスをあなたのサイトで保護しないままにしておくと、それらを拾ってあなたに迷惑なオファー、釣りのメールなどを送ることを始める多くの自動プログラムがあります.

残念ながら、同じことがコンタクトフォームにも当てはまります。防止策を講じていない限り、お問い合わせフォームからスパムを送信するプログラムもあります。.

さいわい、Contact Form 7はこれを防ぐ簡単な方法を提供します。それらの1つは単純です:単純な方程式のように、ボットが答えられないクイズをフォームに含めます.

お問い合わせフォーム7によるクイズによるスパム保護

クイズタグはそれを可能にします。 Contact Form 7の他のすべてのタグと同じくらい簡単に使用でき、追加情報を見つけることができます。 ここに.

それとは別に、reCAPTCHAがあります。これはスパムと戦うためのGoogleサービスです。 APIキーが必要であり、それをContact Form 7と統合します。 ここに. これは、個人情報の保護に影響を与える可能性があります。詳しくは次のセクションで.

reCAPTCHAタグを使用して、フォームに追加できます。 Contact Form 7のメーカーには、Captchaプラグインと呼ばれるものもあります。 本当にシンプルなCAPTCHA 同じ目的に使用できる.

また、スパム防止のためにサードパーティのプラグインを使用することもできます。もちろん、最も有名なのは, Akismet お問い合わせフォーム7では、 2つを一緒に使用する方法.

他にもあります。 お問い合わせフォーム7ハニーポット または WPBruiser. 後者の場合は、 有料延長 Contact Form 7と連携するために必要なオプションもあります。.

重要な付記:お問い合わせフォームとGDPR

最近、ヨーロッパのインターネットプライバシー法にいくつかの変更があったことをご存じかもしれません。 2018年5月25日、 一般データ保護規則(GDPR) 発効した.

オンラインでの個人情報の使用に関する法律にいくつかの変更が加えられました。また、規制に違反した場合、多額の罰金が科せられる.

なぜそれが重要なのですか?お問い合わせフォームは個人データを収集します。そのため、規制の管轄下にある場合(そして現在ほとんどの人がそうしています)、いくつかのことに注意する必要があります.

まず最初に:私たちは法律事務所ではありません!

以下に、お問い合わせフォームをGDPRに準拠させるためのヒントをいくつかご紹介します。これらのヒントは、私たちの能力を最大限に発揮するように編集されています.

ただし、websitesetup.orgの誰も弁護士ではなく、テレビで弁護士もしていません。そのため、以下は専門的な法律相談に代わるものではなく、法的助言と見なすべきではありません。.

わかりました。「問題が発生した場合は、戻って私たちを訴えないでください」の部分はこれで終わりです。ヒントに行きましょう!

お問い合わせフォームをGDPRに準拠させるためのヒント

プライバシーに配慮したお問い合わせフォームを作成する方法は次のとおりです。

  1. 不要なデータを収集しない —お問い合わせフォームでは、含めるフィールドを選択できます。実際に必要のないデータがある場合は、収集を停止します。そうすれば、違反があったとしてもそれを失うことはできません.
  2. 追跡を無効にする — Cookie、ユーザーエージェント、ユーザーIPを追跡するお問い合わせフォームを使用している場合は、GDPRに準拠するためにこれを無効にする必要があります。 Contact Form 7はどちらも見かけ上そうではないので、何もする必要はありません。他に何か使用する場合は、選択したお問い合わせフォームを確認してください.
  3. 完全な同意を得る —データを収集することに人々が同意する方法をフォームに追加します。たとえば、Contact Form 7は 受け入れボックス. 重要:チェックボックスをデフォルトで有効に設定しないでください。ユーザーが自分で行う必要があります。また、収集したものと目的を説明するメッセージと、プライバシーポリシーへのリンクを含めます。.
  4. プライバシーポリシーを実施する — GDPRの下では、どのプロフェッショナルウェブサイトも、収集するデータとその使用方法を説明するプライバシーポリシーを表示する必要があります。また、訪問者が自分の個人データを要求して削除できるようにする必要もあります。これは、ここで説明しきれないほど複雑なトピックです。詳細については、以下のリンクを使用してください.
  5. HTTPSを実装する — SSL / HTTPSを使用すると、ブラウザとサーバー間のデータ交換が暗号化されます。これは、連絡先フォームが個人データを安全に保つために重要です。現在では、これも一般的な方法と見なされています。実装方法についてはガイドをご覧ください.

私たちが読んだすべてのことから、お問い合わせフォームを新しい法律に準拠させるには、上記で十分です。もちろん、このトピックには、ウェブサイトの所有者向けの他にもあります。あなたはもっと知ることができます ここに そして ここに.

WordPress用のその他のお問い合わせフォームプラグイン

Contact Form 7の他に、WordPressで連絡先フォームを作成するためのプラグインが他にもたくさんあります。ここにいくつかの他の良い候補があります.

Jetpackフォーム (自由)

ジェットパックフォーム

Jetpackは、WordPress.comによって作成された強力なプラグインのスイートです(WordPress.orgとWordPress.comの比較をご覧ください)。これらには、連絡先フォームを作成するためのモジュールが含まれます。オンにすると、投稿およびページエディターからWordPress Webサイトへのフォームの入力を開始できます.

ここにいくつかの傑出した機能があります:

  • 迅速で使いやすい
  • フォームの送信について通知するメールアラート
  • WordPressエディター内から調整を行う
  • シンプルなフォームを作成するための優れたソリューション

Jetpackフォームを使用する場合は、必ず何らかのタイプのスパム保護を実装してください。私たちは経験から話しています。前述の WPBruiser 無料のオプションです.

HappyForms (自由)

HappyFormロゴHappyFormsは、市場では比較的新しいものです。 WordPressカスタマイザーと統合されているため、簡単に始めることができます。それを除いて、それは次の特徴を持っています:

  • 軽量で高速
  • 完全に無料で使用できます(ただし、ブランドが付属しています)
  • ドラッグアンドドロップでフォームを作成できます
  • WordPressダッシュボードにフォーム送信を表示します
  • 組み込みのスパム保護が付属しています

お問い合わせフォーム7 (自由)

お問い合わせフォーム7

Contact Form 7を使用すると、基本的な使いやすいインターフェースで複数の異なるお問い合わせフォームを管理できます。プレミアム版もありますが、寄付を目的としています。プレミアムは実際には何もしません、または何もしません(新しいマウス読み込みアニメーション以外).

  • 迅速で使いやすい
  • WordPress内で調整できます
  • お問い合わせフォームの条件付きロジック

素晴らしい無料オプション.

忍者フォーム (フリーミアム)

忍者フォーム

このプラグインを使用すると、ユーザーフレンドリーなインターフェースを通じてフォームを作成できます。無料版がありますが、 プレミアムエディション 追加機能、アドオン、サポート、レイアウトなどを備えています。これらには以下が含まれます:

  • 一般的なメールマーケティングサービスに簡単に接続
  • フォームを介して支払いを受け入れる機能
  • SalesforceのようなCRMとフォームを同期する

Ninja Formsのメンバーシップの費用は年間$ 99以上です.

重力フォーム (プレミアム)

重力ロゴ

重力フォームはおそらく最も人気のあるプレミアムソリューションです。それはかなり高度で、優れたユーザーインターフェイスと優れたサポートシステムを備えています。このリストの他のエントリとは異なり、このプラグインはプレミアムのみですが、あなたはあなたのお金のためにたくさん得ます.

  • 30種類以上のフォームフィールド
  • 広範囲の アドオン
  • ファイルのアップロード
  • ユーザー送信がフロントエンドに表示される機能
  • 複数ページのフォーム
  • 条件付きロジックと高度な計算

重力フォームに興味がある場合、それらの計画は年間59ドルから始まります。.

カルデラフォーム (フリーミアム)

カルデラフォーム

このリストの最後のエントリでは、グラフィックインターフェイスを使用してフォームを作成することもできます。それを除いて、それは次の特徴を持っています:

  • 訪問者が自分の投稿を送信できるようにする
  • 自動応答
  • スパム対策機能
  • 完全に応答するWebフォーム

無料版の他に、 スターター版 $ 6.24 /月から– $ 74.99 /年.

一言で言えばWordPressのお問い合わせフォーム

WordPressに連絡先フォームを追加することを学ぶことは、ウェブサイトを所有している人なら誰でもすべきことです。これは、人々があなたと連絡を取るための最も重要な方法の1つです。お問い合わせフォームは、サイトをより専門的に見せ、スパマーから保護し、必要な情報を入手し、ドアマンのように振る舞います。.

この記事では、Contact Form 7を使用してWordPressに連絡フォームを追加する方法について説明しました。フォームの高度なスタイルとスパム保護について説明しました。そのほか、この投稿では、お問い合わせフォームのGDPRコンプライアンスの重要なトピックと、それを達成するためのヒントを取り上げました。最後に、WordPressサイトに連絡先フォームを追加するために使用できる他の多くの優れたプラグインを調べました。.

これで、自分のWebサイトにフォームを追加するために必要なすべてがわかりました。それが素晴らしい機会と興味深い新しい連絡先につながることを願っています.

お問い合わせフォームをサイトに追加する方法について質問がありますか?その場合は、下のコメントセクションでお知らせください。.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map