ライフスタイルクリエイターズ

神田 翼 (管理人)のプロフィールはこちら

【コピペOK】MW WP Form(問い合わせフォーム)の設定方法とカスタマイズ

こんにちは、フリーランスパパの神田翼(@tsubasa_lsc)です。


WordPressの問い合わせフォームで最も有名なのは「ContactForm7」ですが、僕はいつも「MW WP FORM」という問い合わせフォームのプラグインを使用しています。理由としては、昔外注で仕事をもらっていたクライアントから「MW WP Formを使って下さい」と指示があり、その時に慣れたからというだけです。ネットで検索すると、「ContactForm7」には確認画面がないので「MW WP FORM」を使用するという記事が載っていました。なるほど、たしかに!

今回は、僕がいつも設定している方法を丸ごと書きます。誰かの役に立つために(今後の自分の制作をスムーズに行うために)!

それでは、書いていきます。

スポンサーリンク

MW WP FORM のインストールを行う


「MW WP Form」公式サイトからインストールするか、プラグイン検索で「MW WP Form」と入力してインストールして下さい。

フォームを作成する

プラグインをインストールして有効化すると、管理画面サイドバーに「MW WP FORM」が出てくるので、新規追加を押してフォームを作成します。タイトルのエリアには、分かりやすいタイトルを入力して下さい。例:お問い合わせフォーム

下の本文入力エリアには、HTMLとショートコードを使用して、フォームを作成します。フォームタグジェネレーターを使用して入力することができますが、今回は僕が使用しているものを丸ごと貼り付けておきます。

お問い合わせフォーム本文入力エリア



完了画面メッセージ

別で固定ページで送信完了ページを作成するため、ここは空欄でOK。

URL設定

入力画面URL

/contact/

確認画面URL

/contact/

完了画面URL

/contact/complete/

エラー画面URL

空欄でOK

バリテーションルール

必須項目を適用する項目にのみ、バリテーションを適用させます。
サンプルですが、一応上のコードと同じになるように記述しておきます。

your-name

必須項目にチェック

kana

必須項目にチェック

your-email

必須項目にチェック

item

必須項目にチェック

your-message

必須項目にチェック

「自動返信メール」の設定

自動返信メールのエリアに入力するサンプルを書いておきます。各自アレンジして使って下さい。

件名

【自分の会社名】お問い合わせありがとうございます

送信者

自分の会社名

送信元(E-mailアドレス)

自分のメールアドレス

本文


自動返信メール

your-email

管理者宛メール設定

送信先(E-mailアドレス)

自分のメールアドレス

CC(E-mailアドレス)

必要であれば入力。複数入力する場合は「,」を使用する。

BCC(E-mailアドレス)

必要であれば入力。複数入力する場合は「,」を使用する。

件名

【自分の会社名】ホームページからお問い合わせ

送信者

{your-name}

Return-Path(メールアドレス)

空白でOK

送信元(E-mailアドレス)

{your-email}

本文



設定

問い合わせデータをデータベースに保存

チェックする

それ以外はチェックしなくてOK。

このページでの記述は以上です!あとは固定ページを作成してお問い合わせフォームと送信完了ページを実装していきます。

固定ページにショートコードを追加する

フォーム識別子というフォームに個別に作られるショートコードを固定ページに貼り付けるだけでOKです。送信完了ページも同時に作成しておきましょう。

送信完了ページを作るときのポイント

・親ページをお問い合わせページ(contact)にする
・パーマリンクを「complete」にする
・ページ内にフォーム識別子を書く

MW WP FORM レスポンシブ対応のCSSコード

最後にレスポンシブに対応させたCSSを書いておきます。


最後に

以上で設定は完了です。それぞれのホームページで若干デザインが崩れたりする可能性があるので、そこは各自で修正お願いします。

スポンサーリンク

デザイナー/フリーランスパパ@神田翼
神田翼

フリーランスのWebデザイナーの神田 翼です。2児の父親です。父親でもガッツリ子育てがしたいという思いから、フリーランスとして働くことにしました。このブログではフリーランス・子育て・WordPress・ブログ運営のことを書いています。(プロフィール)

最新の記事一覧

月別表示

トップへ戻る