一瞬でWordPressにお問い合わせフォームを設置する方法【備忘録】

お問い合わせフォームを作ろう!と思いGoogleのアンケートフォームを埋め込んだもののなんとなくしっくりこなく、なんだかなぁと思っております。4Kです。

さすがにこれではまずいと思ってはいたのですが、忙しさにかまけ手つかずになってしまっていたのですが、重い腰を上げることに。

Contact Form 7

ちょちょちょいと調べてみたところ、『Contact Form 7』というプラグインを発見しました。さすがはWordPress、プラグインが豊富です。

Contact Form 7とは、WordPressで作成されたブログやウェブサイトにお問い合わせフォームを設置するためのプラグインです。

Contact Form 7 は複数のコンタクトフォームを管理できてその上フォームとメールの内容を簡単なマークアップで柔軟にカスタマイズしたりもできます。Ajax によるフォーム送信、CAPTCHA、Akismet スパムフィルタリング等々サポートしています。

引用元:Contact Form 7

5万件以上インストールされていて星4と、かなりの高評価を受けています。

インストール

プラグインのインストールページにて『Contact Form 7』と検索すると1番に出てきます。なんとサムネイルは富士山。

普段プラグインをインストールするとき同様、今すぐインストールを押して、有効化します。

インストールが完了すると、左側のメニューに『お問い合わせ』が追加されています。されていない場合は有効にしているか確認しましょう。

お問い合わせフォームを設置

メニューからお問い合わせを選ぶと、画面下部に画像のようなものが表示されています。

この『コンタクトフォーム1』をクリックすることで、普段の記事を投稿するのとはちょっと違うエディターが表示されます。

HTMLがわかる人から見れば「ああね」ってなる内容です。

『メール』タブに移動すると、このような画面が出てきます。

ここからお問い合わせがあった際に、どこへ連絡してくれるかを設定できます。モザイク処理をしていますが、送信先に受信したいメールアドレス、送信元に送信するアドレスを入力します。

ですがこのままではメールにて送信されません。その設定は後程。

『メッセージ』タブには定型文が設定されています。ここは特にいじらなくても問題なさそうです。

『その他の設定』タブはHTMLの知識がある人がカスタマイズするのに使うような項目ですので、わからなければ触らなくて問題ありません。

設定例

初期の状態にお問い合わせ内容を選ぶことのできるラジオボタンを設置しました。ラジオボタンの選択肢はダブルクォーテーションで囲うことで追加できます。また、textとtextareaの後ろに*を付けることで必須項目にしています。

メールの設定

さて、前述しましたように、このままではメールで教えてはくれません。というのも、何も設定されていない状態ですと、自分と同じサーバー(WordPressがインストールされたサーバー)にあるメール機能を使おうとしてしまうからです。

VPSなど自分でサーバー構築をしている場合、Postfixとか使って色々やる必要がありそうですが、寺子屋雑記の場合ロリポップのサーバーを使っているので、特に設定することなくメールの送受までできました。

まとめ

以前からTwitterのDMやメール等でお話を頂いていたのですが、せっかくならきちんとコンタクトフォームを作ろうかなと思い立ち上げました。

頻繁にお話があるわけではありませんが、まずは形からということで(笑)。

ブログにコンタクトフォームを設置しようと思っている方の参考になれば幸いです。