MW WP Formを使用したお問い合わせフォームのお洒落なデザイン例

Snow Monkeyテーマを制作されているキタジマさんによる、お問い合わせフォームのMW WP Formプラグインを利用したお問い合わせフォームをちょっとだけ綺麗に表示する例です。

表示のCSS記述などに関して

ルミェール

ページが綺麗に表示されるSnow Monkeyテーマでも、MW WP Formの標準スタイルのままの場合だと、ちょっとデザインが綺麗じゃないまま表示されちゃうよね…

ルミェール(アイコン04)
テネーブル

そんな時に、Snow Monkeyテーマでちょっとだけ綺麗に表示されるように当Webサイトのフォームスタイルを下記に公開しました。ご自由にお使いください。

テネーブル(アイコン01)

デザイン例

デザインサンプル

お問い合わせフォーム デザイン例

フォームの記述例

<ol class="form_step">
<li class="form_step_input">STEP.1<small>内容の入力</small></li>
<li class="form_step_confirm">STEP.2<small>内容を確認</small></li>
<li class="form_step_complete">STEP.3<small>お問い合わせ完了</small></li>
</ol>
<fieldset>
<legend>お問い合わせフォーム</legend>
<div class="form_supplement">
<ul>
<li><span class="form_must">必須</span>と記載されている項目は、入力が必ず必要となる項目です。忘れずに入力をお願いします。</li>
<li><span class="form_any">任意</span>と記載されている項目は、入力は任意です。入力していただかなくても問題ありません。</li>
<li>送信をされる前に、必ず全ての入力内容を確認してください。</li>
</ul>
</div>
<div class="form_field">
<span class="form_must">必須</span><label for="form_name" class="form_item_label">お名前</label>
<div class="form_item_field">[mwform_text name="name" id="form_name" class="form_item_input" placeholder="入力してください"]</div>
<span class="form_must">必須</span><label for="form_email" class="form_item_label">ご連絡先メールアドレス</label>
<div class="form_item_field">[mwform_email name="email" id="form_email" class="form_item_input" placeholder="入力してください"]</div>
<span class="form_must">必須</span><label for="form_content" class="form_item_label">お問い合わせ内容</label>
<div class="form_item_field">[mwform_textarea name="content" id="form_content" class="form_item_input" placeholder="入力してください"]</div>
[mwform_backButton class="form_item_back" value="戻る"]
[mwform_submitButton name="submit" class="form_item_submit" confirm_value="確認する" submit_value="送信する"]
</div>
</fieldset>

完了画面の設定

<ol class="form_step">
<li class="form_step_input">STEP.1<small>内容の入力</small></li>
<li class="form_step_confirm">STEP.2<small>内容を確認</small></li>
<li class="form_step_complete">STEP.3<small>お問い合わせ完了</small></li>
</ol>
<fieldset>
<legend>お問い合わせが完了しました</legend>
<p>お礼本文をここに書きます</p>
</fieldset>

CSSの記述例

.form_step {
  list-style: none;
  overflow: hidden;
  margin: 0;
  width: 100%;
}
 
.form_step li {
  position: relative;
  display: block;
  padding: 4px 0 4px 48px;
  margin-bottom: 8px;
  background: #ddd;
  font-weight: 600;
  color: #fff;
}
 
.form_step li:not(:last-child):before {
  z-index: 1;
  content: "";
  position: absolute;
  bottom: -44px;
  left: 0;
  margin-left: 6px;
  border: 18px solid transparent;
  border-top: 18px solid #fff;
}
 
.form_step li:not(:last-child):after {
  z-index: 2;
  content: "";
  position: absolute;
  bottom: -32px;
  left: 0;
  margin-left: 8px;
  border: 16px solid transparent;
  border-top: 16px solid #ddd;
}
 
.form_step li small {
  margin-left: 16px;
}
 
.mw_wp_form_input .form_step > .form_step_input,
.mw_wp_form_confirm .form_step > .form_step_confirm,
.mw_wp_form_complete .form_step > .form_step_complete
{
  background: #000;
}
.mw_wp_form_input .form_step > .form_step_input::after,
.mw_wp_form_confirm .form_step > .form_step_confirm::after
{
  border-top: 16px solid #000;
}
 
.mw_wp_form fieldset {
  padding: 16px;
  border: 1px solid #ddd;
  border-radius: 2px;
  display: inline;
  width: 100%;
}
.mw_wp_form fieldset legend {
  padding: 4px 8px;
  font-weight: 600;
}
 
.mw_wp_form fieldset .form_field {
  display: block;
}
 
.mw_wp_form fieldset .form_supplement {
  display: block;
  padding: 16px;
  margin-bottom: 16px;
  font-size: 0.75em;
  border-bottom: 1px solid #eee;
}
 
@media screen and (min-width: 783px) {
  .mw_wp_form fieldset .form_field {
    float: left;
    width: 100%;
    max-width: calc(100% - 278px);
  }
  .mw_wp_form fieldset .form_supplement {
    float: right;
    width: 200px;
    border-left: 1px solid #eee;
    margin: 0 36px;
    padding: 0 16px;
  }
}
 
.mw_wp_form fieldset .form_supplement ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.mw_wp_form fieldset .form_supplement li {
  margin-bottom: 8px;
}
 
 
.mw_wp_form fieldset .form_item_label {
  font-weight: 600;
  margin: 0 8px;
}
 
.mw_wp_form fieldset .form_item_field {
  margin: 8px 0;
  padding-bottom: 24px;
  border-bottom: 1px solid #eee;
}
 
.mw_wp_form .form_must,
.mw_wp_form .form_any {
  padding: 4px 8px;
  color: #fff;
  font-weight: 600;
  font-size: 0.75em;
  border-radius: 2px;
}
 
.mw_wp_form .form_must {
  background: #e60033;
}
.mw_wp_form .form_any {
  background: #0095d9;
}
.mw_wp_form .error {
  display: inline;
  border-bottom: 1px solid #e60033;
  color: #e60033;
  margin-top: 8px;
  font-weight: 600;
  font-size: 0.75em;
}
 
.mw_wp_form .form_item_input {
  width: 100%;
  border: 1px solid #ddd;
  padding: 8px;
}
 
.mw_wp_form .form_item_back {
  width: 100%;
  font-weight: 600;
  color: #000;
  background: #fff;
  border: 1px solid #000;
  margin: 16px 0;
}
 
.mw_wp_form .form_item_submit {
  width: 100%;
  font-weight: 600;
  color: #fff;
  background: #000;
  border: 1px solid #000;
}

ステップ表示の設定に関しまして

MW WP Formでは、エリアを囲っているdivが、下記のように変更されます。

入力時mw_wp_form_inputと言うclass
確認時mw_wp_form_confirmと言うclass
完了時mw_wp_form_completeと言うclass

それによって、ステップの色を切り替えるようにしています。
.mw_wp_form_input .form_step > .form_step_input::after
などの辺りの記述となりますので、よろしければ参考にしてください。

MW WP Form Generatorの場合は…

申し訳ないですが、MW WP Formのアドオンプラグインである「MW WP Form Generator」は、記述などが標準の方法と異なる為、上記の記述がそのままでは出来ないかもしれません。置き換える形で試していただければと思います。

テネーブル

「MW WP Form Generator」用のスタイルも今後ご紹介できればと思ってます!

テネーブル(アイコン03)