close

[WordPress]「お問い合わせフォーム」の作り方2通り紹介[MW WP Form][Contact Form 7]

公開日:

WordPressの有名なプラグイン[MW WP Form][Contact Form 7]を使用して、お問い合わせフォームの作り方を紹介しようと思います!

[Contact Form 7]でお問い合わせフォームの作成方法

[特徴]非常にシンプルに設置!簡単!

まずはプラグイン「Contact Form 7」をインストールしよう。

インストール後サイドメニューに「お問い合わせ」が増えているので、「新規追加」をクリックしよう。

初期で既に項目が用意されている。もしこのままで良ければタイトルだけ入力して保存でもOK。

今回は、「電話番号」を追加してみようと思う。
上記の[電話番号]ボタンをクリックすると下画面になる。

「プレースホルダーとして使用する」にチェックを入れるとプレースホルダーとして表示できる。
最後に「タグを挿入」をクリックしよう。

保存をクリックした後、[]書きのショートコードをコピーして、表示したい固定ページにペーストして完了。

以上で完成!本当に簡単に作れてしまう良いプラグインだ
これならWordPress初心者でも簡単!

[MW WP Form]でのお問い合わせフォームの作成方法

[特徴]機能が多くて柔軟性がある

まずはプラグインをインストールしよう。

インストールが完了するとサイドバーにメニューが現れるので「新規追加」をクリック

任意のタイトルを打ち込み、「フォームタグを追加」の左のメニューから設置したい項目を選択して追加していこう。

今回は確認画面と完了画面を別画面で設置するため、「戻るボタン」、「確認・送信」を設置した。

フォームタグを設置し終えたら、テキストタブに切り替え、
<label>などで囲って見出し文字も入力しよう。

今回は設定しないが、右項目で、自動返信メールの設定も可能だ。

「完了画面メッセージ」で完了画面のメッセージを入力。

「URL設定」では入力、確認、完了画面のそれぞれ”異なる”URLを入力しよう。(このあと固定ページを3ページ作成する)

バリデーションルールの設定

MW WP Formはバリデーションの細かい設定ができる。

例えばメッセージ本文を必須項目にしたい場合、上のように「必須項目」にチェックを入れる。
「バリデーションルールを追加」をクリックして複数設定できる。

管理者宛メール設定

説明書きにある通り{}で表示したい項目のnameを囲って入力すると、自動的に変換されて表示される。
自分の見やすいように書こう。

固定ページにショートコードを貼り付ける

ポイント:全部同じショートコードをペーストする

上の画像の「フォーム識別子」に書いてあるショートコードをコピー。

先ほど設定したURLで入力、確認、完了画面の固定ページを作り、それぞれにショートコードをペーストしよう。

先ほど確認画面はURLを/check/と設定したのでURLスラッグはcheckにする。

最後に「公開」をクリックして終了!

まとめ

以上!2通りのWordPressのフォーム作成の作り方でした!

Comment

メールアドレスが公開されることはありません。