つぶやき
-ブログ-

MW WP Formで問い合わせフォームを作ろう｜WordPressテーマ作成

2022年5月26日

MW WP FormはWordPressで問い合わせフォームを作成できるプラグイン。MW WP Formを使えば専門的なプログラミングの知識が必要なくても、簡単に問い合わせフォームを設置できます。ます。パンくずリストはプラグインを使えば簡単に設置できます。

「MW WP Form」で問い合わせフォームを作成する方法

「MW WP Form」をインストール、有効化する

MW WP Formを開く

インストールした「MW WP Form」を有効化すると、ダッシュボードに「MW WP Form」が追加されています。この「MW WP Form」をクリックして「新規追加」を選択しましょう。

新規追加をクリックしたらフォームのタイトルを記入しましょう。今回は「お問い合わせ」のフォームの作成なので、フォームのタイトルは「お問い合わせ」と記入しています。

フォームタグを追加する

「MW WP Form」で入力フォームを作成するには、専用のフォームタグが必要です。専用のフォームタグは編集画面にある「フォームタグを追加」から作成できます。

フォームの編集画面では下記の画像のように、問い合わせフォームで使うテキストボックスやチェックボックスなどを作成できます。またname属性やid、classやサイズも指定できます。nameやidの指定が完了したら、「Insert」をクリックすればフォームタグが作成できます。

今回は下記の画像のように「お名前」「メールアドレス」「メッセージ」の入力フォームと、送信ボタンのフォームタグを作成しました。

問い合わせフォームのHTMLとCSSを整える

さきほど作成したフォームタグを使いながら、HTMLとCSSを整えてみましょう。今回は次のようにHTMLとCSSを整えてみました。HTMLは「MW WP Form」の編集画面にあるテキストモードから記述しましょう。

<div class="form">
<div class="form_row">

            <label class="form_label" for="fullname">お名前</label>
<div class="form_content">
              [mwform_text name="fullname" id="fullname"]</div>
</div>
<div class="form_row">

            <label class="form_label" for="email">メールアドレス</label>
<div class="form_content">
               [mwform_email name="email" id="email"]</div>
</div>
<div class="form_row">

            <label class="form_label" for="message">メッセージ</label>
<div class="form_content">
                   [mwform_textarea name="message" id="message"]</div>
</div>
<div class="form_row form_row-center">
          [mwform_submit name="send" class="btn btn-send" value="送信する"]</div>
</div>

.contact-form {
    width     : 1120px;
    margin    : 0 auto;
    margin-top: 50px;

    .contact-form-head {
        margin-top: 40px;
    }

 
            .form {
                margin-top: 40px;
                width: 100%;

                .form_row {
                    margin-bottom: 10px;

                    p {
                        padding-bottom: 5px;

                        .form_label {
                            font-weight: bold;
                        }
                    }

                    .form_content {
                        input {
                            width  : 100%;
                            padding: 5px;
                        }

                        textarea {
                            width  : 100%;
                            padding: 5px;
                            height : 250px;
                        }
                    }

                    input {
                        padding    : 10px 20px;
                        font-weight: bold;
                        cursor     : pointer;
                    }
                }
            }
       
    }

ショートコードを使って問い合わせフォームを表示する

これまで作成したMW WP Formの問い合わせフォームは、編集画面にある「フォーム識別子」にあるショートコードで表示できます。

固定ページなど問い合わせフォームタグを表示させたいページに、ショートコードを貼り付けましょう。

ショートコードを貼り付けると、次のように問い合わせフォームが表示されます。

バリデーションルールを設定する

名前やメールアドレスが記入されてない状態で、送信できなくする設定もしておきましょう。このような設定はバリデーションルールで設定可能です。バリデーションルールの設定は、編集画面の「バリデーションルールを追加」から設定できます。

「バリデーションを適用する項目」に指定のname属性を記入することで、個別の入力フォームにバリデーションルールを適用できます。

例えば、上記の画像のように名前のname属性のfullnameを必須項目にチェックをすれば、未入力の状態での送信を防げます。また半角数字やメールアドレスといった細かいバリデーション設定もできます。例えば「メールアドレス」にチェックをすれば、メールアドレスの「@」が未入力の場合は送信できなくなります。