WordPressは、柔軟性とカスタマイズ性から、多くのサイト運営者に選ばれています。具体的にどのようにしてお問い合わせフォームを作成するのかを知りたい方も多いのではないでしょうか。
「WordPressでお問い合わせフォームを自作したい」
「WordPressでお問い合わせフォームを自作する方法を知りたい」
こんな疑問に答えるために、本記事では、WordPressでお問い合わせフォームを自作するための具体的な方法を4つ紹介し、それぞれの方法で使用するおすすめのプラグインも詳しく解説します。
プラグインの導入やHTML・CSSのコーディング、Googleフォームの活用など、さまざまな方法を学ぶことで、自社のサイトに最適なお問い合わせフォームを作成しましょう。
お問い合わせフォームを作成したい方には、フォーム作成ツール「formrun（フォームラン）」がおすすめです。
「formrun（フォームラン）」は、デザイン性や機能、セキュリティ面で優れており、次の特徴があります。
- デザイン性の高いテンプレートが120種類以上あり、さまざまなニーズに対応
- セキュリティに強く、大企業もビジネスシーンで利用可能
- お問い合わせ管理やメール対応、通知設定などの機能も充実
無料でほとんどの機能を試せるため、興味がある方はぜひチェックしてみてください。
目次
WordPressでお問い合わせフォームを自作する4つの方法
WordPressでお問い合わせフォームを自作する方法は、主に次の4つです。
- プラグインを導入する
- HTML・CSSを使ってコーディングする
- Googleフォームを埋め込む
- フォーム作成ツールを活用する
それぞれ解説します。
プラグインを導入する
1つ目の自作方法は、プラグインを導入する方法です。
WordPressのプラグインを使用すれば、コードを書く必要がなく、簡単にフォームを作成できます。特に「Contact Form 7」や「WPForms」などの人気プラグインを利用すれば、短時間で高機能なフォームを作成可能です。
メール通知やデータの保存、スパム対策などにも対応しています。また、プラグインは更新やサポートが定期的に行われるため、セキュリティも安心です。
一方で、プラグインが増えるとサイトの読み込み速度に影響が出る可能性があり、プラグインの競合や更新によるバグが発生する場合もあります。
HTML・CSSを使ってコーディングする
2つ目の自作方法は、HTML・CSSを使ってコーディングする方法です。
プログラミングに慣れている方には、HTMLやCSSを使って自作する方法もあります。デザインや機能を自由にカスタマイズでき、自分のサイトに最適なフォームを作成可能です。
この方法のメリットは、デザインや機能を完全にカスタマイズできる点と、プラグインに依存しないため、サイトのパフォーマンスに影響を与えにくい点です。
一方で、プログラミングの知識が必要で初心者には難易度が高く、セキュリティやバリデーションの実装が手間になるデメリットもあります。
HTMLやCSSをコピーするだけで簡単にお問い合わせフォームを作成したい方はこちらの記事をご覧ください。
>> 問い合わせフォームのデザイン9選！コピペで使えるhtmlとCSSを紹介
Googleフォームを埋め込む
3つ目の自作方法は、Googleフォームを埋め込む方法です。
Googleフォームは、簡単にフォームを作成でき、データはGoogleスプレッドシートに自動的に保存されます。作成したフォームを埋め込みコードでWordPressに組み込むだけで設置できます。
Googleフォームを使うメリットは、無料で簡単にフォームを作成できることや、データが自動的にGoogleスプレッドシートに保存されるため管理が楽であることです。
一方で、デザインのカスタマイズが難しい点や、広告が表示される場合があるデメリットもあります。
GoogleフォームをWordPressに埋め込む方法はこちらを参考にしてください。
>> GoogleフォームをHTMLに埋め込み・カスタマイズして自由にデザインする方法
フォーム作成ツールを活用する
4つ目の自作方法は、フォーム作成ツールを活用する方法です。
フォーム作成ツールを利用すれば、より簡単に高機能なフォームを作成可能です。ドラッグ＆ドロップでフォームを作成でき、レスポンシブデザインにも対応しています。
フォーム作成ツールの活用は、デザイン性が高いフォームを簡単に作成でき、各種統計データや解析機能が充実しているメリットがあります。
一方で、月額料金がかかる場合が多いです。また、外部サービスにデータを預けることになるため、セキュリティ面での確認が必要になります。
formrunは基本無料で利用でき、WordPressを含めた外部ツールとの連携時のセキュリティも万全で安心して利用できます。詳細はこちらからご覧ください。
【プラグインなし】WordPressのお問い合わせフォームをHTMLで自作する方法
プラグインを使用せずにHTMLとCSSを使って直接お問い合わせフォームを作成する場合、デザインの自由度が大きく向上します。フォームの背景色やフォント、ボタンのスタイルなど、細部にわたるデザインを自分好みにカスタマイズ可能です。
例えば、特定のブランドカラーを使用した背景色の設定や、独自のフォントを適用できます。また、ボタンの形状やホバーエフェクトなどもCSSで簡単に調整可能です。
以下では、実際にコピペして使えるシンプルな問い合わせフォームのHTMLコードを紹介しています。以下を参考に、サイトに合ったデザインにカスタマイズしてみましょう。
コピペで作れるシンプルな問い合わせフォームのHTMLはこちらを参考にしてください。
>> htmlコピペでOK！シンプルかつおしゃれな問い合わせフォームの作り方
WordPressでお問い合わせフォームを作る際におすすめプラグイン3選
WordPressでお問い合わせフォームを作る際におすすめプラグインは、主に次の3つです。
- Contact Form 7
- MW WP Form
- Jetpack Contact Form
それぞれ解説します。
Contact Form 7
1つ目のプラグインは、Contact Form 7です。
Contact Form 7は、コードの知識がなくても簡単にフォームを設置できるプラグインです。多彩な機能を備えており、日本語による解説も豊富に揃っているため、初心者でも安心して利用できます。
また、自動返信機能を利用することで、フォーム送信後に自動で確認メールを送信する設定も簡単に行えます。スパム対策のためのreCAPTCHAの導入もサポートしているため、セキュリティ面でも安心です。
詳しい使い方は、こちらを参考にしてください。
>> 【完全版】Contact Form 7の基本と使い方まとめ｜WordPressに問い合わせフォームを設置しよう
MW WP Form
2つ目のプラグインは、MW WP Formです。
MW WP Formは、シンプルなコードでフォームを作成でき、完全無料で利用できるプラグインです。このプラグインは、HTMLの知識があればデザインを自在にカスタマイズできる点が魅力です。
フォームの確認画面や完了画面の表示機能などがあり、利便性を向上させるための機能も充実しています。日本語のサポートもあり、使いやすさが高く評価されています。
詳しい使い方は、こちらのページを参考にしてください。
>> 【初心者でも分かる】MW WP Formの使い方｜無料でお問い合わせフォームを作成しよう
Jetpack Contact Form
3つ目のプラグインは、Jetpack Contact Formです。
Jetpack Contact Formは、HTMLやタグの知識がなくても簡単にフォームを設置できるプラグインです。顧客管理やセキュリティ対策、SNS連携など多くの機能を利用できるため、単なるフォーム作成以上の用途に活用できます。
WordPressでお問い合わせフォームを自作・設置する際の5つの注意点
WordPressでお問い合わせフォームを自作・設置する際の注意点は、主に次の5つです。
- セキュリティ対策が必要
- 記入項目は最低限
- レスポンシブデザインを設定
- 迷惑メール・スパムへの対策
- 自動返信機能を設定
それぞれ解説します。
セキュリティ対策が必要
1つ目の注意点は、セキュリティ対策が必要な点です。
WordPressでお問い合わせフォームを設置する際には、セキュリティ対策が欠かせません。フォームを通じて送信されるデータには、個人情報が含まれることが多いため、情報を守るための対策が重要です。
例えば、SSL（Secure Socket Layer）を使用して通信を暗号化することをおすすめします。暗号化により、送信される情報が第三者に盗聴されるリスクを低減できます。
また、セキュリティ対策として、スパムフィルターやCAPTCHAの導入も検討しましょう。不正なアクセスやボットによる攻撃を防ぐのに役立ちます。
▼formrunのセキュリティの詳細はこちらをご確認ください
記入項目は最低限
2つ目の注意点は、記入項目は最低限に絞る点です。
お問い合わせフォームを設置する際は、ユーザーに入力を求める項目をできるだけ減らすことが大切です。過度に多くの情報を求めると、ユーザーは入力を面倒に感じてフォームを途中で離脱してしまう可能性があります。
必要最低限の情報、例えば名前、メールアドレス、お問い合わせ内容などに絞りましょう。また、各項目がなぜ必要なのかを明示することで、ユーザーの理解と協力を得やすくなります。
▼formrunの顧客管理機能はこちらご確認ください
レスポンシブデザインを設定
3つ目の注意点は、レスポンシブデザインを設定した方がよい点です。
ユーザーはさまざまなデバイス（スマートフォン、タブレット、パソコンなど）からWebサイトにアクセスするため、フォームはレスポンシブデザインに対応している必要があります。
レスポンシブデザインとは、どのデバイスからアクセスしても快適に利用できるように画面のサイズやレイアウトが自動的に調整されるデザインのことです。
レスポンシブデザインの導入により、ユーザーがどのデバイスからでも簡単にフォームを利用でき、入力のストレスを軽減できます。HTMLやCSSを用いて、フォームが異なるデバイスに適応するように設定しましょう。
▼formrunのレスポンシブ機能はこちらご確認ください
迷惑メール・スパムへの対策
4つ目の注意点は、迷惑メール・スパムへの対策を行う点です。
お問い合わせフォームを設置すると、スパムや迷惑メールの問題が発生する場合があります。これを防ぐために、reCAPTCHAなどスパム対策ツールの導入が有効です。
reCAPTCHAは、ユーザーがロボットではないことを確認するためのテストを実施し、自動化されたスパムからフォームを保護します。また、IPアドレスのフィルタリングやメールフィルターの設定強化も考慮しましょう。
▼formrunのセキュリティの詳細はこちらをご確認ください
自動返信機能を設定
5つ目の注意点は、自動返信機能を設定した方がよい点です。
お問い合わせフォームには、自動返信機能の設定を行いましょう。ユーザーがフォームを送信した際に自動的に確認メールを送信することで、ユーザーは自分の問い合わせが正しく送信されたことを確認でき、安心感を得られます。
この機能により、ユーザーの問い合わせに対する対応の迅速さを示せるほか、信頼性を高める効果も期待できます。自動返信メールには、問い合わせ内容の控えや、回答までの予想時間などを記載しましょう。
▼formrunの自動返信機能の詳細についてはこちらをご確認ください
お問い合わせフォームの自作ならフォーム作成ツール「formrun」もおすすめ！
formrunにはアンケートの作成に活用できる以下の特徴があります。formrunを利用するメリットは下記の3点です。
- クリックのみ・ノーコードでフォームを自作
- コードを使ったフォーム作成・カスタマイズも可能
- 安心のセキュリティ
クリックのみ・ノーコードでフォームを自作
formrunでは、複雑なプログラミング知識がなくても、簡単にフォームを作成できます。テンプレートを選択し、クリック操作だけで項目や内容の修正も可能です。また、色やフォントなどのデザインも自由に調整できるため、ブランドイメージに合ったフォームを作成できます。
コードを使ったフォーム作成・カスタマイズも可能
エンジニアやデザイナー向けに、HTMLやCSSを用いた自由なフォーム作成が可能です。バックエンド機能と高いセキュリティを備え、効率的なフォーム作成をサポートします。また、特定の要件や仕様に応じた柔軟なフォームを作成できる点も魅力です。
安心のセキュリティ
セキュリティが高いのもformrunの魅力のポイントです。「ISO 27001 (ISMS)」の認証取得やプライバシーマークの付与認定、SSL/ TLSによる暗号化通信、24時間365日のサーバー監視体制など対策がとられています。
フォームを活用する際は、名前や住所、メールアドレスなど重要な個人情報を取り扱います。ユーザーに安心してフォームを利用してもらうためにも、フォームのセキュリティは必須です。
▼formrunのセキュリティの詳細はこちらをご確認ください
WordPressで自社に最適なお問い合わせフォームを自作・設置しよう！
本記事では、WordPressでお問い合わせフォームを自作する4つの方法やおすすめのプラグインを解説しました。
WordPressを利用してお問い合わせフォームを自作することで、自社のブランドに合ったデザインや機能を自由にカスタマイズできます。プラグインを活用すれば、コーディングの知識がなくても簡単にフォームを作成できるため、初心者でも安心して利用可能です。
ただし、各方法にはそれぞれメリットとデメリットがあるため、自社のニーズに最適な方法を選ぶことが重要です。
また本記事では、アンケートフォーム作成ツール「formrun」も詳しく紹介しています。
プログラミングの知識がなくても、簡単にフォームを作成でき、多彩なテンプレートからテーマに合わせて選べるのはformrunの大きな魅力です。
基本プランは無料で提供されていますが、作成可能なフォームの数やファイルの総容量、利用できる機能には制限があります。有料プランは14日間の無料トライアルがあり、まずはこの無料期間を利用して試してみることをおすすめします。
formrunを詳しく知りたい方は、こちらのページをご覧ください。
formrunやフォーム作成や顧客管理に関する情報を発信しております。
EFO（エントリーフォーム最適化）や問い合わせ対応など、
フォームに関するお悩みを解決します。
