Awesome MW WP Form Styles

MW WP Formを利用する際に簡単にレスポンシブなレイアウトのフォームを作れるようにCSSクラスを提供してくれる Awesome MW WP Form Styles というプラグインを作りました。

Awesome MW WP Form Styles
This plugin will choice css classes for making style in input form with MW WP Form.
ja.wordpress.org

以下、簡単な使い方になります。参考にしてください。

サンプルコード

以下のようなコードでレイアウトを作ることができます。

<table class="ams-form-table">
	<tr>
		<th class="ams-form-table__th">
			<label for="***" class="ams-label">Label name</label>
		</th>
		<td class="ams-form-table__td">
			[shortcode of mw wp form]
		</td>
	</tr>
	<tr>
		<th class="ams-form-table__th">
			<label for="***" class="ams-label">Label name</label>
		</th>
		<td class="ams-form-table__td">
			[shortcode of mw wp form]
		</td>
	</tr>
</table>

<p class="ams-button-area">
[mwform_submit name="submit" class="ams-button" value="送信する"]
</p>

利用できるCSSクラス

レイアウト

ams-form-table

<table>タグに利用するクラスです。

<table class="ams-form-table">
...
</table>

ams-form-table__th

<th>タグに利用するクラスです。

<th class="ams-form-table__th">
...
</th>

ams-form-table__td

<td>タグに利用するクラスです。

<td class="ams-form-table__td">
...
</td>

ams-form-table_5-5

<table>タグに利用するクラスです。ams-table-formと併用して使います。<th>と<td>の幅をそれぞれ要素幅の50%にします。

<table class="ams-form-table ams-form-table_5-5">
...
</table>

ams-form-table_4-6

<table>タグに利用するクラスです。ams-table-formと併用して使います。<th>の幅を40%、<td>の幅を60%にします。

<table class="ams-form-table ams-form-table_4-6">
...
</table>

ams-form-table_3-7

<table>タグに利用するクラスです。ams-table-formと併用して使います。<th>の幅を30%、<td>の幅を70%にします。

<table class="ams-form-table ams-form-table_3-7">
...
</table>

ams-form-table_2-8

<table>タグに利用するクラスです。ams-table-formと併用して使います。<th>の幅を20%、<td>の幅を80%にします。

<table class="ams-form-table ams-form-table_2-8">
...
</table>

ams-form-table_vertical

<table>タグに利用するクラスです。ams-table-formと併用して使います。テーブルを縦レイアウトにしたい時に使います。

<table class="ams-form-table ams-form-table_vertical">
...
</table>

ams-form-table_stripe

<table>タグに利用するクラスです。ams-table-formと併用して使います。テーブルをストライプ柄にすることができます。

<table class="ams-form-table ams-form-table_stripe">
...
</table>

ams-label

<label>タグに利用するクラスです。<th>タグの中で<label>タグを使うことを想定しています。

<label for="***" class="ams-label">Label Name</label>

ams-required

<span>などインライン要素に付与することで、インラインブロック要素・文字色赤・12pxのテキストなどを表示することができます。フォームの入力必須項目などを示す際に利用できます。

<label for="***" class="ams-label">Label Name<span class="ams-required">*</span></label>

ams-button-area

<p>タグや<div>タグなどブロック要素に利用できます。送信ボタンなどをレイアウトする際に利用します。

<div class="ams-button-area">
...
</p>

ams-button-area_left

<p>タグや<div>タグなどブロック要素に利用できます。ams-button-areaと併用して利用します。指定した要素内のボタンが左寄せになります。

<div class="ams-button-area ams-button-area_left">
...
</div>

ams-button-area_right

<p>タグや<div>タグなどブロック要素に利用できます。ams-button-areaと併用して利用します。指定した要素内のボタンが右寄せになります。

<div class="ams-button-area ams-button-area_right">
...
</div>

inputフォームなど

ams-form-control

<input>や<select>、<textarea>といった入力部分に利用します。MW WP Formでフォームタグを生成する際にclass欄に入力してください。

<!-- MW WP Form でテキストフィールドを作成した場合 -->
[mwform_text name="text" id="text" class="ams-form-control" size="60"]

送信ボタンやButton要素など

ams-button

MW WP Formで送信ボタンなどを作る際に利用します。<input>でも<button>でも大丈夫です。

<!-- MW WP Formで ボタン項目（button）送信ボタン に使用した場合 -->
[mwform_submit name="submit" class="ams-button" value="送信する"]

<!-- MW WP Formで ボタン項目（input）確認・送信 に使用した場合 -->
[mwform_submitButton name="confirm-submit" class="ams-button" confirm_value="確認画面へ" submit_value="送信する"]

ams-button_fullwidth

ams-buttonと併用して利用します。ボタンが全幅になります。

<!-- MW WP Fromで ボタン項目（input）送信ボタン に使用した場合 -->
[mwform_submit name="submit" class="ams-button ams-button_fullwidth" value="送信する"]

ユーティリティクラス

ams-mb-* / ams-mt-*

*部分は５の倍数の数字が100まで入れることができます。

レスポンシブ対応

ams-mb-*_sp / ams-mt-*_sp：画面幅480px未満の場合のみ適応

ams-mb-*_md / ams-mt-*_md：画面幅769px以上の場合に適応

ams-mb-*_lg / ams-mt-*_lg：画面幅992px以上の場合に適応

ams-fz-*

*部分は12から40まで入れることができます。単位はpxです。

レスポンシブ対応

ams-fz-*_sp：画面幅480px未満の場合のみ適応

ams-fz-*_md：画面幅769px以上の場合に適応

ams-fz-*_lg：画面幅992px以上の場合に適応

ams-fw-normal / ams-fw-bold

書体を太文字にしたい場合にはams-fw-boldを、書体の太さを普通にしたい場合にはams-fw-normalを利用します。

ams-db / ams-dn

要素の表示・非表示を簡易的に管理したい場合に利用します。

表示させたくない場合にはams-dn、表示をさせないようにしたものを表示させるにはams-dbを利用できます。

レスポンシブ対応

ams-db_sp / ams-dn_sp：画面幅480px未満の場合のみ適応

ams-dn_md / ams-dn_md：画面幅769px以上の場合に適応

ams-db_lg / ams-dn_lg：画面幅992px以上の場合に適応

ams-tal / ams-tac / ams-tar

テキストなどを左・中央・右に寄せたい場合に利用します。

ams-talは左寄せ（tal=text align left）、ams-tacは中央寄せ（tac=text align center）、ams-tarは右寄せ（tar=text align right）になります。

レスポンシブ対応

ams-tal_sp / ams-tac_sp / ams-tar_sp：画面幅480px未満の場合のみ適応

ams-tal_md / ams-tac_md / ams-tar_md：画面幅769px以上の場合に適応

ams-tal_lg / ams-tac_lg / ams-tar_lg：画面幅992px以上の場合に適応

デモコード一覧

<h2>Table</h2>
<table class="ams-form-table">
	<tr>
		<th class="ams-form-table__th">
			<label for="date" class="ams-label">日付ピッカー</label>
		</th>
		<td class="ams-form-table__td">
			[mwform_datepicker name="date" id="date" class="ams-form-control" size="30"]
		</td>
	</tr>
	<tr>
		<th class="ams-form-table__th">
			<label for="mail" class="ams-label">メール</label>
		</th>
		<td class="ams-form-table__td">
			[mwform_email name="mail" id="mail" class="ams-form-control" size="60"]
		</td>
	</tr>
	<tr>
		<th class="ams-form-table__th">
			<label for="file" class="ams-label">ファイル</label>
		</th>
		<td class="ams-form-table__td">
			[mwform_file name="file" id="file" class="ams-form-control"]
		</td>
	</tr>
	<tr>
		<th class="ams-form-table__th">
			<label for="yearmonth" class="ams-label">年月ピッカー</label>
		</th>
		<td class="ams-form-table__td">
			[mwform_monthpicker name="yearmonth" id="yearmonth" class="ams-form-control" size="30"]
		</td>
	</tr>
	<tr>
		<th class="ams-form-table__th">
			<label for="number" class="ams-label">Numberフィールド</label>
		</th>
		<td class="ams-form-table__td">
			[mwform_number name="number" id="number" class="ams-form-control" step="1"]
		</td>
	</tr>
	<tr>
		<th class="ams-form-table__th">
			<label for="password" class="ams-label">パスワード</label>
		</th>
		<td class="ams-form-table__td">
			[mwform_password name="password" id="password" class="ams-form-control" size="60"]
		</td>
	</tr>
	<tr>
		<th class="ams-form-table__th">
			<label for="range" class="ams-label">Rangeフィールド</label>
		</th>
		<td class="ams-form-table__td">
			[mwform_range name="range" id="range" class="ams-form-control" min="0" max="100" step="1"]
		</td>
	</tr>
	<tr>
		<th class="ams-form-table__th">
			<label for="tel" class="ams-label">電話番号</label>
		</th>
		<td class="ams-form-table__td">
			[mwform_tel name="tel" class="ams-form-control"]
		</td>
	</tr>
	<tr>
		<th class="ams-form-table__th">
			<label for="text" class="ams-label">テキスト</label>
		</th>
		<td class="ams-form-table__td">
			[mwform_text name="text" id="text" class="ams-form-control" size="60"]
		</td>
	</tr>
	<tr>
		<th class="ams-form-table__th">
			<label for="textarea" class="ams-label">テキストエリア</label>
		</th>
		<td class="ams-form-table__td">
			[mwform_textarea name="textarea" id="textarea" class="ams-form-control" cols="50" rows="5"]
		</td>
	</tr>
	<tr>
		<th class="ams-form-table__th">
			<label for="url" class="ams-label">URLフィールド</label>
		</th>
		<td class="ams-form-table__td">
			[mwform_url name="url" id="url" class="ams-form-control" size="60"]
		</td>
	</tr>
	<tr>
		<th class="ams-form-table__th">
			<label for="zip" class="ams-label">郵便番号</label>
		</th>
		<td class="ams-form-table__td">
			[mwform_zip name="zip" class="ams-form-control"]
		</td>
	</tr>
	<tr>
		<th class="ams-form-table__th">
			<label for="checkbox" class="ams-label">チェックボックス</label>
		</th>
		<td class="ams-form-table__td">
			[mwform_checkbox name="checkbox" id="checkbox" class="ams-form-control" children="A,B,C,D" separator=","]
		</td>
	</tr>
	<tr>
		<th class="ams-form-table__th">
			<label for="checkbox-v" class="ams-label">チェックボックス - 垂直</label>
		</th>
		<td class="ams-form-table__td">
			[mwform_checkbox name="checkbox-v" id="checkbox-v" class="ams-form-control" children="A,B,C,D" separator="," vertically="true"]
		</td>
	</tr>
	<tr>
		<th class="ams-form-table__th">
			<label for="radio" class="ams-label">ラジオボタン</label>
		</th>
		<td class="ams-form-table__td">
			[mwform_radio name="radio" id="radio" class="ams-form-control" children="A,B,C,D"]
		</td>
	</tr>
	<tr>
		<th class="ams-form-table__th">
			<label for="radio" class="ams-label">ラジオボタン - 垂直</label>
		</th>
		<td class="ams-form-table__td">
			[mwform_radio name="radio" id="radio" class="ams-form-control" children="A,B,C,D" vertically="true"]
		</td>
	</tr>
	<tr>
		<th class="ams-form-table__th">
			<label for="select" class="ams-label">セレクトボックス</label>
		</th>
		<td class="ams-form-table__td">
			[mwform_select name="select" id="select" class="ams-form-control" children="A,B,C,D"]
		</td>
	</tr>
</table>
[mwform_submitButton name="mwform_submitButton-669" confirm_value="確認画面へ" submit_value="送信する"]
<p>
[mwform_bback class="ams-button" value="back"]戻る[/mwform_bback][mwform_bbutton name="button" class="ams-button" value="button"]ボタン[/mwform_bbutton][mwform_bconfirm class="ams-button" value="confirm"]確認画面へ[/mwform_bconfirm][mwform_bsubmit name="submit" class="ams-button" value="send"]送信する[/mwform_bsubmit]
</p>

<p>
[mwform_backButton class="ams-button" value="戻る"][mwform_button name="button" class="ams-button" value="button"][mwform_confirmButton class="ams-button" value="confirm"][mwform_submitButton name="confirm-submit" class="ams-button" confirm_value="確認画面へ" submit_value="送信する"][mwform_submit name="submit" class="ams-button" value="送信する"]
</p>

<h3>全幅ボタン</h3>
<p>
[mwform_bback class="ams-button ams-button_fullwidth" value="back"]戻る[/mwform_bback][mwform_bbutton name="button" class="ams-button ams-button_fullwidth" value="button"]ボタン[/mwform_bbutton][mwform_bconfirm class="ams-button ams-button_fullwidth" value="confirm"]確認画面へ[/mwform_bconfirm][mwform_bsubmit name="submit" class="ams-button ams-button_fullwidth" value="send"]送信する[/mwform_bsubmit]
</p>

<p>
[mwform_backButton class="ams-button ams-button_fullwidth" value="戻る"][mwform_button name="button" class="ams-button ams-button_fullwidth" value="button"][mwform_confirmButton class="ams-button ams-button_fullwidth" value="confirm"][mwform_submitButton name="confirm-submit" class="ams-button ams-button_fullwidth" confirm_value="確認画面へ" submit_value="送信する"][mwform_submit name="submit" class="ams-button ams-button_fullwidth" value="送信する"]
</p>

<h3>ams-button-area</h3>
<h4>通常</h4>
<div class="ams-button-area">
[mwform_bback class="ams-button" value="back"]戻る[/mwform_bback][mwform_bbutton name="button" class="ams-button" value="button"]ボタン[/mwform_bbutton][mwform_bconfirm class="ams-button" value="confirm"]確認画面へ[/mwform_bconfirm][mwform_bsubmit name="submit" class="ams-button" value="send"]送信する[/mwform_bsubmit]
</div>

<div class="ams-button-area">
[mwform_backButton class="ams-button" value="戻る"][mwform_button name="button" class="ams-button" value="button"][mwform_confirmButton class="ams-button" value="confirm"][mwform_submitButton name="confirm-submit" class="ams-button" confirm_value="確認画面へ" submit_value="送信する"][mwform_submit name="submit" class="ams-button" value="送信する"]
</div>

<h4>全幅</h4>
<div class="ams-button-area">
[mwform_bback class="ams-button ams-button_fullwidth" value="back"]戻る[/mwform_bback][mwform_bbutton name="button" class="ams-button ams-button_fullwidth" value="button"]ボタン[/mwform_bbutton][mwform_bconfirm class="ams-button ams-button_fullwidth" value="confirm"]確認画面へ[/mwform_bconfirm][mwform_bsubmit name="submit" class="ams-button ams-button_fullwidth" value="send"]送信する[/mwform_bsubmit]
</div>

<div class="ams-button-area">
[mwform_backButton class="ams-button ams-button_fullwidth" value="戻る"][mwform_button name="button" class="ams-button ams-button_fullwidth" value="button"][mwform_confirmButton class="ams-button ams-button_fullwidth" value="confirm"][mwform_submitButton name="confirm-submit" class="ams-button ams-button_fullwidth" confirm_value="確認画面へ" submit_value="送信する"][mwform_submit name="submit" class="ams-button ams-button_fullwidth" value="送信する"]
</div>

<h3>ams-button-area_left</h3>
<div class="ams-button-area ams-button-area_left">
[mwform_bback class="ams-button" value="back"]戻る[/mwform_bback][mwform_bbutton name="button" class="ams-button" value="button"]ボタン[/mwform_bbutton][mwform_bconfirm class="ams-button" value="confirm"]確認画面へ[/mwform_bconfirm][mwform_bsubmit name="submit" class="ams-button" value="send"]送信する[/mwform_bsubmit]
</div>

<div class="ams-button-area ams-button-area_left">
[mwform_backButton class="ams-button" value="戻る"][mwform_button name="button" class="ams-button" value="button"][mwform_confirmButton class="ams-button" value="confirm"][mwform_submitButton name="confirm-submit" class="ams-button" confirm_value="確認画面へ" submit_value="送信する"][mwform_submit name="submit" class="ams-button" value="送信する"]
</div>

<h3>ams-button-area_right</h3>
<div class="ams-button-area ams-button-area_right">
[mwform_bback class="ams-button" value="back"]戻る[/mwform_bback][mwform_bbutton name="button" class="ams-button" value="button"]ボタン[/mwform_bbutton][mwform_bconfirm class="ams-button" value="confirm"]確認画面へ[/mwform_bconfirm][mwform_bsubmit name="submit" class="ams-button" value="send"]送信する[/mwform_bsubmit]
</div>

<div class="ams-button-area ams-button-area_right">
[mwform_backButton class="ams-button" value="戻る"][mwform_button name="button" class="ams-button" value="button"][mwform_confirmButton class="ams-button" value="confirm"][mwform_submitButton name="confirm-submit" class="ams-button" confirm_value="確認画面へ" submit_value="送信する"][mwform_submit name="submit" class="ams-button" value="送信する"]
</div>