Awesome MW WP Form Styles

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

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

サンプルコード

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

<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-*

*部分は5の倍数の数字が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>

ホームページのお話しませんか?

気楽にカフェや喫茶店で雑談するくらいの雰囲気で、あなたのホームページのお話をしませんか?