スライドショー スライドショー

WordPressでお問い合わせフォームを作る方法とプラグイン

こんにちは! ライターのナナミです。

サイトを運営していて、ユーザーからの声が気になる時ってありますよね。
そんな時は、ブログのコメント機能を使うのもありですが、お問い合わせフォームを設置するのも手です。

でもWordPressでお問い合わせフォームってどう作るんだろう…

という方必見!
今回はWordPressでお問い合わせフォームを実装する方法を解説していきます。

この記事は下記の流れで進めていきます。

【基礎】お問い合わせフォームとは
【基礎】お問い合わせフォーム設置の効果
【基礎】プラグインを使った実装方法
【発展】プラグインを使わない実装方法

お問い合わせフォームを設置して、ユーザーの声がどんどん入ってくるようにしちゃいましょう!

お問い合わせフォームとは

まずはお問い合わせフォームについて、ちょっとおさらいしておきましょう。

お問い合わせフォームとは、サイト上で情報を送信することができる機能ですね。

侍でも、こんな感じのお問い合わせフォームを使っています。

お問い合わせフォームの機能

お問い合わせフォームの機能は、大きく分けて入力機能送信機能があります。

入力機能は、名前やお問い合わせ内容などの情報を入力する機能のことですね。
主にHTMLやCSSで作られています。

送信機能は、入力した内容をメールなどで別のところに送信する機能です。
これはPHPなどで作られることが多いでしょう。

これら2つが揃うことで、お問い合わせフォームが動作しているのです。

お問い合わせフォーム設置の効果

そもそもお問い合わせフォームを設置するメリットってどんなものがあると思いますか?

もちろん、ユーザーからの意見や感想が貰えるというのが大きなメリットですね。

しかし、これはあくまでも「メールが届く」ことのメリットです。
メールアドレスを掲載するだけである程度実現可能な範囲でしょう。

そこをフォームにすることにより、メールが届く量を大きく変えることができます。

そう、項目が明確だからです。

この部分には電話番号を入れて、この部分は学生か会社員か選んでもらって…
というように、項目を明確にすることでユーザーの負担を大きく減らすことができます。

お問い合わせフォームの大きなメリットとは

ユーザーの負担を減らし、たくさんのメールを受け取れる可能性がある

ことなのです。

フォームを設置する時の注意点

お問い合わせフォームを設置する際、絶対に気をつけなければならないことがあります。

それは、設置してあるページをhttpsから始まるURLにすることです。

httpsとは、通常使われているhttpにセキュリティ機能を追加したものです。
通信などが行われる際、データを暗号化して送信するようになります。

お問い合わせフォームのページがhttpだと、送信した内容、つまり個人情報がダダ漏れになってしまうのです。
めちゃくちゃ危ないですよね。

なので、サイト全体、せめてお問い合わせフォームが設置されているページは、httpsになるようにしておきましょう

WordPressでhttpsを設定する方法は、下記の記事などを参考にしてみてください。
https://creive.me/archives/11553/

ではそんなお問い合わせフォームをどのように実装していくのか、次の項目から解説していきましょう!

お問い合わせフォームを作れるプラグイン

まずはお手軽、プラグインを使った方法です。
WordPressといえばプラグイン、プラグインといえばWordPressです。

プラグインとは、WordPressに入れられる追加機能のことですね。
いろんな追加機能が開発されており、びっくりするほどたくさんの種類が存在しています。

今回はそんな中から、簡単にお問い合わせフォームを実装できるプラグインを紹介していきます。

プラグインの設定方法などが知りたい方は、下記の記事などを参考にしてみてくださいね。
https://creive.me/archives/11553/

Contact Form 7


https://ja.wordprss.org/plugins/contact-form-7/

WordPressでお問い合わせフォームといえばこれ、というくらい超有名なプラグインです。

管理画面で項目をカスタマイズして、生成されるコードをぺたっと貼り付けるだけで実装完了。
なんてお手軽な!

日本語の解説サイトもあり、初心者でも安心して使えるプラグインです。

ただし、見栄えの調整などにHTMLやCSSの知識が必要になる場面があります。
ちょっと自信ない…という方は、このあと紹介する2つを使ってみるといいかもしれませんね。

解説サイトはこちら

Jetpack Contact Form


https://ja.wordpress.org/plugins/jetpack/

WordPress公式が出している、Jetpackというプラグインの機能の1つです。

公式のものとあって、安定感抜群!
こちらも簡単にお問い合わせフォームを作ることができます。

さらに、ある程度見栄えを整えた状態のフォームを生成してくれるのもポイントです。
HTMLなどの小難しい知識がなくても、十分に使うことができます。

ただし、使う場合はWordPress.comのアカウントが必要となります。
ちょっと手間ですが、アカウントもプラグインも無料なので、この機会に登録してみるのもアリですね。

解説サイトはこちら

Visual Form Builder


https://ja.wrdpress.org/plugins/visual-form-builder/

こちらも手軽に使えて、初心者にオススメのプラグインです。

デザインも整えてくれているので、HTMLやらの知識は不要!
ただし、細かいカスタマイズはちょっと苦手な子です。

また、海外製なので解説が英語しかないというデメリットもあります。

しかし、そんなデメリットがどうでもよくなるほどに設定がお手軽です。
特に項目の設定がドラッグ&ドロップで感覚的にできちゃうのが魅力的ですね。

小難しいことはやりたくない!
というあなた、ぜひ使ってみてください。

解説サイトはこちら

プラグインを使わずに作ろう

プラグインは手軽なのはわかるけど、事情により使えない…
自作ってできないの?

そんな声も聞こえてきそうですね。

もちろん、プラグインを使わずにお問い合わせフォームを実装する方法はあります!

Googleフォームを使う

Googleのサービスには、フォームを作ることができるGoogleフォームというものがあります。

項目をさくさくっと選ぶだけで、すぐにフォームを作ることができちゃいます。
さすが天下のGoogle、強い。

これで作ったフォームにリンクするようにしちゃえば、実装も完了です。
プラグインなしで実装する中で、一番楽チンな方法ですね。

Googleフォームの詳細は下記のページで確認してみてください。
https://www.google.com/intl/ja_jp/forms/about/

mailform01を使う

いやいや、ちゃんとサイトに組み込む形で作りたいんだよ…
でも難しい言語は自信がない…

という方は、すでに作成されているメール送信システムを使ってみましょう。

オススメは、mailform01という無料配布のメール送信システムです。

無料とは思えないほど高性能で、必須項目の設定から、確認画面や完了画面の設定まで網羅しています。

PHPで作られていますが、設定自体はPHPがわからなくても問題なし!
ソースに書いてあるコメントの通りに情報を入れていけば、あなた用の送信システムにすることができます。

ただし、実装にはHTML、CSSの知識は必須となります。
見栄えもそうですが、mailform01へデータを送るための設定などがあるからです。

HTMLとCSSってなんだっけ?
という方は、下記の記事で確認してみてください。
>>初心者必見!HTMLとCSSの基礎を解説

さらに、送信システム自体をカスタマイズするとなると、PHPの知識が必要です。
この機会に、ぜひ勉強してみてはいかがでしょうか?
>>これであなたもエンジニア!初心者向けPHP解説

ちょっとステップアップしたい方は、ぜひチャレンジしてみてください!

mailform01の配布サイトはこちら

自分で全て作成する

もはや1から自分で作りたい…

そんなあなた、かなりの猛者とお見受けします。
もちろん1から自作するのも可能です!

PHPでは、メールの関数を使って送信システムを作ることができます
前項で紹介したmailform01を1から作るような感じですね。

作り方についてここで解説すると超長くなっちゃうので、今回は割愛!
下記の記事で細かく解説しているので、ぜひご覧ください。

>>お問い合わせフォームを自作!PHPのメール関数の使い方

WordPressはフォーム以外にも様々なカスタマイズが可能!

WordPressはお問い合わせフォーム作成以外にもカスタマイズが可能です。元のテンプレートを使うことで、枠組みは残しつつ、変更したい部分だけ変えることで1から作るよりも早くサイト構築が出来ます。

HTML、CSS、PHP、Javascriptを学習することで、サイトのデザインやレイアウトの変更も自由にすることができます。

しかし、未経験から一気に4つも学ぶのは簡単なことではないですよね。

けど効率よく学びたい!いち早くフリーランスデビューしたい!

そんなあなたは、プログラミングスクールの受講を検討してみてはいかがでしょうか?
実際にwordpressの使用を希望する案件は多いですし、wordpressの改良のスキルを元にフリーランスとして活躍しているエンジニアもいらっしゃいます。

弊社「侍エンジニア」では、未経験からフリーランスデビューした事例もございます。無料体験レッスンではそんな非常識な結果を短期間で出す学習方法や、あなたのキャリアプランをヒアリングした上で最適な言語や学習プランを提案いたします。下記のカレンダーよりお気軽にお越しください。

まとめ

いかがでしたか?

プラグインを使えば、フォームの設置は簡単です。
もちろん、プラグインを使わず実装するのもいいですね。

ぜひ実装して、どんどんユーザーの声を聞いちゃってください!

あ、httpsにするのをお忘れなく!

書いた人

ナナミ

1991年生まれ。
文系大学卒業後、フリーターを経てフロントエンジニアになる。
HTML、CSS、 jQueryなどのコーディングやCMS設計に従事。
文系からエンジニアを目指す人にもわかりやすい記事を目指して、日々精進中。
体は日本酒でできている。