---
title: "Awesome MW WP Form Styles"
canonical_url: "https://olein-design.com/plugin/ams"
language: "ja"
date_published: "2019-06-10T15:41:04+09:00"
date_modified: "2019-06-10T15:41:04+09:00"
content_type: "page"
author: "久野晃司"
---

# Awesome MW WP Form Styles

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

[埋め込みコンテンツ](https://ja.wordpress.org/plugins/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-*

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