WordPress

WordPressでコンタクトフォームの設置

更新日:

Contact Form 7のインストール

WordPressには、デフォルトでフォーム機能がついていません。そこで、プラグイン『Contact Form 7』をインストールしてお問い合わせフォームを作成してみたいと思います。

プラグインをクリックし、新規追加をクリックします(マルチサイトを利用している人は、ネットワーク管理者でアクセスして下さい)。キーワードに『Contact Form 7』と入力し、『Contact Form 7』が表示されたら、今すぐインストールをクリックします。

プラグインを有効化(ネットワークで有効化)をクリックします。

フォームを設定する

コンタクトフォームを設置するサイトのダッシュボードを開きます。左メニューの一番下に『お問い合わせ』というメニューができているので、そこをクリックします。右側の『Contact Form7』画面にある『コンタクトフォーム1』の箇所をクリックして、『お問い合わせ』と変更し、保存をクリックします。

『フォーム』の内容を確認し、お問い合わせフォームで入力させたい項目を追加します。今回は、デフォルトのままにしておきます。

送信されるメールの設定

『Contact Form7』画面の真ん中あたりにある『メール』の宛先にお問い合わせメールを送信するアドレスを入力します。入力したら『保存』ボタンをクリックします。

保存したら、『お問い合わせ』と入力した下に表示された茶色の帯の『Contact-form1"お問い合わせ"』の文字をコピーします。

お問い合わせページの作成

ダッシュボードの『固定ページ』→『新規追加』を開き、タイトルをお問い合わせと入力後、先程コピーした『Contact Form 1 "お問い合わせ"』を本文にペーストし、『公開』をクリックします。

送信テスト

それでは、ブラウザで確認してみましょう。ナビゲーションバーに『お問い合わせ』が作成されています。クリックするとお問い合わせフォームが表示されます。実際にお問い合わせフォームからメールが送信されるかどうか、項目を記入し送信テストをしてみます。

入力内容に不備がなければ、送信完了のメッセージが送信ボタンの下に表示されます。

入力内容に不備があれば、入力不備のメッセージが表示されます。

フォームの項目を追加、編集する

『Contact Form7』画面で、『フォーム』の右側にある『タグの作成』をクリックすると、『テキスト項目』『『メールアドレス項目』『テキストエリア』『ドロップダウン・メニュー』『チェックボックス』『ラジオボタン』『承諾の確認』『クイズ』『CAPTCHA』『ファイルのアップロード』『送信ボタン』などが選択できます。使い方を見てみたいと思います。

それでは、ラジオボタンを選択してみます。『名前』は自動生成されますので、変更する必要はありません。選択項目に『男性』『女性』と入力し、右のチェックボックスの両方にチェックを入れます。下の茶色い帯の部分のコードをコピーして、『お名前(必須)』の下に挿入します。挿入したコードの上に『<p>性別<br />』と入力します。

次に、緑の帯の部分をコピーし、『メッセージ本文』の差出人の下にペーストします。コードの左に『性別:』と入力します。

これで、お問い合わせフォームの中に『男性』『女性』を選択するラジオボタンが作成されます。

その他、お問い合わせフォームだけではなく、フォームの組み合わせによって様々な使い方ができます。クイズやアンケート、予約フォームなどいろいろな使い方ができます。また、メール(2)を利用して、他のメールアドレスに送信したり、ユーザーのメールアドレスに自動返信したりすることもできます。工夫次でいろいろな使い方ができますので、各自でいろいろ試してみるとおもしろいと思います。

本日は、以上です。

必須項目の設定

必須項目の設定方法の説明が不足していましたので、追加して説明します。『フォーム』の中の『text』や『textarea』の右側に『*』をつけ、『text*』『textarea*』に変更すると必須項目になります。

以上、簡単ですが、追加説明でした。

-WordPress
-

Copyright© WinRoad徒然草 , 2018 All Rights Reserved Powered by AFFINGER5.