MWWPform

WordPress　MW WP Form をレスポンシブにする

参考にしたサイト

https://migi.me/wordpress/mw-wp-form-style-responsive/

 

カスタム　から以下のCSSを追加（色は参考サイトから変更）

.mw_wp_form dl {
display: flex;
flex-wrap: wrap;
margin: 30px 0px 0px;
border: 1px solid #3388dd;
border-top: none;
}

.mw_wp_form dl > dt,
.mw_wp_form dl > dd {
width: 100%;
padding: 1em;
border-top: 1px solid #3388dd;
text-align: center;
}

@media print, (min-width: 768px) {
.mw_wp_form dl > dt,
.mw_wp_form dl > dd {
text-align: left;
}
.mw_wp_form dl > dt {
display: flex;
align-items: center;
width: 20%;
}
.mw_wp_form dl > dd {
width: 80%;
border-left: 1px solid #3388dd;
}
}

.mw_wp_form input[type=”text”],
.mw_wp_form input[type=”email”],
.mw_wp_form input[type=”tel”],
.mw_wp_form textarea {
padding: 1em;
width: 100%;
font-size: 15px;
border: 1px solid #ccc;
}

.mw_wp_form input[type=”submit”],
.mw_wp_form input[type=”submit”]:hover {
display: table;
margin: 30px auto;
background-color: #3388dd;
}

.mw_wp_form .form_step {
display: flex;
justify-content: center;
align-items: center;
margin: 0px;
list-style: none;
}

.mw_wp_form .form_step > li {
display: block;
position: relative;
padding: 0.5em;
width: 22%;
border: 1px solid currentColor;
color: #3388dd;
font-size: 1.5vw;
font-weight: bold;
text-align: center;
}
.mw_wp_form .form_step > li:nth-of-type(n + 2) {
margin: 0px 0px 0px 4%;
}
.mw_wp_form .form_step > li:nth-of-type(n + 2):before {
position: absolute;
top: 50%;
left: -1.5em;
width: 0.5em;
height: 0.5em;
border-top: 2px solid #3388dd;
border-left: 2px solid #3388dd;
transform: translateY(-50%) rotate(135deg);
content: “”;
}

.mw_wp_form_input .form_step > li:nth-of-type(1),
.mw_wp_form_preview .form_step > li:nth-of-type(2),
.mw_wp_form_complete .form_step > li:nth-of-type(4) {
background-color: #3388dd;
color: #fff;
}

@media print, (min-width: 992px) {
.mw_wp_form .form_step > li {
font-size: 18px;
}
}

.mw_wp_form_complete div {
margin: 30px 0px 0px;
text-align: center;
}

 

フォーム画面

  1. 入力
  2. 内容確認
  3. 送信
  4. 完了

※ニックネーム（名前）、メールアドレスは必須です。

問合せ項目:
[mwform_checkbox name=”お問い合わせ内容” children=”認証解除について,ソフトについて,配信サービスについて,その他” separator=”,” vertically=”true”]
ニックネームか名前(必須):
[mwform_text name=”氏名” size=”50″ maxlength=”50″]
フリガナ:
[mwform_text name=”フリガナ” size=”50″ maxlength=”50″]
電話番号:
[mwform_text name=”電話番号” size=”50″ maxlength=”50″]
メールアドレス(必須):
[mwform_text name=”メールアドレス” size=”50″ maxlength=”50″]
メールアドレス確認用(必須)
[mwform_text name=”メールアドレス確認用” size=”50″ maxlength=”50″]
問い合わせ内容:
[mwform_textarea name=”お問い合わせ内容2″ cols=”50″ rows=”6″ ]
[mwform_backButton]
[mwform_submitButton name=”確認ボタン” confirm_value=”確認画面へ” submit_value=”送信” ]

 

完了画面メッセージ

  1. 入力
  2. 内容確認
  3. 送信
  4. 完了

お問い合わせいただき、ありがとうございました。

1〜3営業日以内に、弊社よりご返信させていただきます。

もし数日中に返事が無い場合は、正しく受信できなかった可能性がありますので、恐れ入りますが下記のメールアドレスに再度のご連絡をお願いします。

E-Mail ○○○○○○

 

その他の設定はこちらを参考

問合せ者にメールが飛ばないので以下を参考に修正しました。

MW WP Formを使った問合せフォームの作り方