ミギムキ

[WordPress] MW WP Formで設置したフォームのデザインをレスポンシブに整えたい

やりたいこと

サンプルコード

フォーム画面

<ol class="form_step"> <li>入力</li> <li>内容確認</li> <li>送信</li> <li>完了</li> </ol> <dl> <dt>お名前:</dt> <dd>[mwform_text name="name" size="60"]</dd> <dt>メールアドレス:</dt> <dd>[mwform_email name="email" size="60"]</dd> <dt>問い合わせ内容:</dt> <dd>[mwform_textarea name="content" cols="50" rows="5"]</dd> </dl> <div>[mwform_submitButton name="confirm" confirm_value="Confirmation" submit_value="Send"]</div>
スポンサー広告

完了画面メッセージ

<ol class="form_step"> <li>入力</li> <li>内容確認</li> <li>送信</li> <li>完了</li> </ol> <div> <p>お問い合わせありがとうございました。</p> <p>2~3営業日以内に担当者より折り返しご連絡させていただいます。</p> <p>ご連絡がない場合は、お手数ですが電話(0000-00-0000)にてお問い合わせください。</p> </div>

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; }
スポンサー広告

仕組み、解説、補足など