WordPressプラグインContact Form 7を使って問い合わせフォームを作る

難しいプログラムの知識がなくてもWordPressのプラグイン

Contact Form 7を使えば簡単にお問い合わせのフォームが設置できます。

 

送信前の確認画面が出ない等の不備はありますが、代わりとなる対応の仕方も

含めて設置の手順をご紹介します。

 

Contact Form 7をインストール・有効化する

 

まずはContact Form 7をインストール、有効化してください。

プラグインのインストール・有効化はこちらを参考にしてください。

 

 

 

コンタクトフォームの作成

 

インストールと有効化が終わったら、

WordPress管理画面(ダッシュボード)>お問い合わせ>コンタクトフォーム

をクリックします。

 

コンタクトフォームの作成

 

 

するとはじめから『コンタクトフォーム1』というフォームが入っています。

右側にショートコード↓がありますので

contact-form-7 id="5" title="コンタクトフォーム 1"

 

これをコピーします。

 

コンタクトフォームの作成

 

 

固定ページで『お問い合わせページ』を作るのが一般的なので、

メニューの固定ページ>新規追加をクリックします。

 

コンタクトフォームの作成

 

 

タイトルに『お問い合わせ』と入力し、

テキストエディタにショートコードを貼りつけます。

 

コンタクトフォームの作成

 

 

スラッグの変更もしておきましょう。

スラッグの変更がわからない場合はこちらを参考にしてください。

 

スラッグの変更

 

 

プレビューで見てみましょう。

はじめから入っているコンタクトフォームはこんな感じです。

とりあえず『公開』ボタンをクリックします。

 

お問い合わせフォーム

 

 

これで『お問い合わせ』フォームの設置は終わりです。

非常に簡単ですね。

 

 

お問い合わせフォームをちょっとカスタマイズ

 

次はお問い合わせフォームを少しだけカスタマイズします。

 

はじめに書いた通り、送信前に確認画面が出てこないのを

何とかしなくてはなりません。

 

確認画面を出すプラグインを追加するという手もあるようですが、

難しいことはしたくありません。

 

そこで、送信前にチェックを入れてもらうという方法を使います。

こんな感じです。

お問い合わせフォーム カスタマイズ

 

 

こうすることで、送信前に今記入した内容を確認してもらい、

チェックを入れないと送信できないようになります。

 

他にも、入力途中でうっかり送信してしまうというミスもなくなりますし、

必須項目のチェックボックスがあることで、迷惑メールも来なくなる

というメリットがあるようです。

 

詳しい内容は下記のサイトの記事を参考にして下さい。

 

参考:『意外と知らない !? お問い合わせフォーム「Contact Form 7」を

もっと便利に使いこなすための3つのポイント』

 

 

今回ご紹介する方法は、上の記事と少しやり方を変えています。

 

先ほど作成したコンタクトフォーム1に戻って、

お問い合わせ>コンタクトフォーム

 

お問い合わせフォーム カスタマイズ

 

 

 

『編集』をクリックします。

 

お問い合わせフォーム カスタマイズ

 

 

コンタクトフォームの編集画面が表示されます。

画面中央あたりに『タグの作成』というボタンがあるので

それをクリックします。

 

お問い合わせフォーム カスタマイズ

 

 

複数の項目が表示されますが、その中から

『承諾の確認』をクリックしてください。

これがチェックボックスにチェックを入れないと送信できないタグです。

 

お問い合わせフォーム カスタマイズ

 

 

画面右下に、

『このコードをコピーして、左のフォーム内にペーストしてください。』

と書かれています。

 

その下のコードを、左の『

[submit "送信"]

』と

書かれているところの上にコピペします。

これでチェックボックスができます。

 

お問い合わせフォーム カスタマイズ

 

 

右横に説明文を入力して、右上の保存をクリックすれば完了です。

<説明文の例>

『確認画面は表示されません。

上記内容でよろしければチェックを入れて送信をクリックしてください。』

 

 

 

ユーザーに題名を考えてもらうのも面倒だと思うので、

僕は、題名の項目を削除しています。

 

題名の部分を消すだけです。

 

お問い合わせフォーム カスタマイズ

こちらの記事も参考になります

コメントを残す

サブコンテンツ

このページの先頭へ