ワードプレスのお問い合わせ（申し込み）フォームの項目を増やす方法【カスタマイズの方法を解説します】

お問い合わせフォームやお申込みフォームの項目を増やすなどカスタマイズする方法を解説します。

まずは、管理画面の左メニューの「お問い合わせ」の「コンタクトフォーム」をクリックしてください。

続いて、以前解説した「おすすめのプラグイン」の章で作成した「コンタクトフォーム１」が既にありますので、「複製」をクリックしてください。

すると、以下の画面になります。

基本的には、赤の｛ の右側の項目をクリックして、必要事項を記入し、下に挿入すれば完了です。

たとえば、「メールアドレス」と「題名」の間に「電話番号」を入れたいときは、以下のようにまずは

<label>電話番号（必須）

</label>

と記入します。

[text 1="your-name" language="*"][/text]

[text language="your-subject"][/text]

次に、｛　内の「電話番号」をクリックします。以下の画面に移ります。

<label>電話番号（必須）　　</label>の赤線にカーソルを合わせた状態で、右下の「タグを挿入」をクリックします。

そして、右上の「保存」をクリックします。

あとは、以前、別の記事で解説したように、コードを貼りたいページに貼り付けて完了です。

以前の動画はこちらです。

応用編

ここまでは初級編です。ここからは応用編になります。

以下のように本格的なお問い合わせ・お申込みフォームを作成します。

先ほどのこちらのコードを全て消して、下の黒背景のコードをコピペしてください。

コピペしましたら、右か下の「保存」をクリックしてください。あとは初級編と同じです。

[text 1="your-name" language="*"][/text]

[text language="your-subject"][/text]

<table class="inquiry">
<tr>
<th>
<span class="haveto">【必須】</span><span>お名前</span>
</th>
<td>
[text* your-name class:textsp placeholder"例）田中太郎"]
</td>
</tr>
<tr>
<th>
<span class="haveto">【必須】</span><span>メールアドレス</span>
</th>
<td>[email* your-email class:mailsp placeholder"例）coloeful@cafelife.com"]</td>
</tr>
<tr>
<th>
<span class="any">【任意】</span><span>電話番号</span>
</th>
<td>
[tel your-tel class:tel placeholder"090-0000-0000"]
</td>
</tr>
<tr>
<th>
<span class="haveto">【必須】</span><span>ドロップダウンメニュー</span>
</th>
<td>
[select* dpmenu include_blank class:drop "サンプル1" "サンプル2" "サンプル3"]
</td>
</tr>
<tr>
<th>
<span class="any">【任意】</span><span>チェックボックス横並び【１つを選択】</span>
</th>
<td>
[checkbox checkbox-1 exclusive use_label_element default:1 class:check1 "サンプル4" "サンプル5" "サンプル6"]
</td>
</tr>
<tr>
<th>
<span class="haveto">【必須】</span><span>チェックボックス横並び【複数を選択】</span>
</th>
<td>
[checkbox* checkbox-2 use_label_element default:1 class:check2 "サンプル7" "サンプル8" "サンプル9"]</td>
</tr>
<tr>
<th>
<span class="any">【任意】</span><span>チェックボックス縦並び【１つを選択】</span>
</th>
<td>
[checkbox checkbox-3 exclusive use_label_element default:1 class:verticallist class:check3 "サンプル10" "サンプル11" "サンプル12"]
</td>
</tr>
<tr>
<th>
<span class="haveto">【必須】</span><span>チェックボックス縦並び【複数を選択】</span>
</th>
<td>
[checkbox* checkbox-4 use_label_element default:1 class:verticallist class:check4 "サンプル13" "サンプル14" "サンプル15"]
</td>
</tr>
<tr>
<th>
<span class="any">【任意】</span><span>ラジオボタン横並び</span>
</th>
<td>
[radio radio-1 use_label_element default:1 class:radio1 "サンプル16""サンプル17""サンプル18"]
</td>
</tr>
<tr>
<th>
<span class="haveto">【必須】</span><span>ラジオボタン縦並び</span>
</th>
<td>
[radio radio-2 use_label_element default:1 class:verticallist class:radio2 "サンプル19""サンプル20""サンプル21"]
</td>
</tr>
<tr>
<th>
<span class="any">【任意】</span><span>数値のスピン形式</span>
</th>
<td>
[number number-1 min:10 max:100 placeholder class:number1 "数値の値は指定できる"]
</td>
</tr>
<tr>
<th>
<span class="haveto">【必須】</span><span>日付</span>
</th>
<td>
[date* date-960 placeholder class:datesp ]
</td>
</tr>
<tr>
<th>
<span class="any">【任意】</span><span>中級者向け回答形式</span>
</th>
<td>
[quiz quiz-1 class:qyizsp "質問：2019年に発表された新元号は？|令和"]
</td>
</tr>
<tr>
<th>
<span class="haveto">【必須】</span><span>郵便番号</span>
</th>
<td>
[text* your-postalcode class:p-postal-code placeholder"例）123-4567"]
</td>
</tr>
<tr>
<th>
<span class="haveto">【必須】</span><span>都道府県</span>
</th>
<td>
[text* your-prefectures class:p-region placeholder"例）福岡県"]
</td>
</tr>
<tr>
<th>
<span class="haveto">【必須】</span><span>ご住所</span>
</th>
<td>
[text* your-address class:p-locality placeholder"例）福岡市博多区1-2-3 F-Laboマンション 101号室"]
</td>
</tr>
<tr>
<th>
<span class="haveto">【必須】</span><span>お問い合わせ内容</span>
</th>
<td>
[textarea* your-message class:content placeholder "１行以上のテキスト入力できます"]
</td>
</tr>
</table>
[acceptance acceptance-442 class:spam1]スパムメール防止のため、こちらのボックスにチェックを入れてから送信してください。
[submit id:formbtn "上記の内容で送信する"]

文字を変えたい場合、たとえば、お問い合わせを変えたいときは、それを消して別の記載した項目を記入します。

｢必須｣を消したい場合は、上記の<span class="haveto">【必須】</span>部分を削除してください。

｢任意｣も同様です。<span class="any">【任意】</span>部分を削除してください。

｢必須｣と｢任意｣は、ショートコードの最初の文字列の最後に* アスタリスクを付けるかどうかで設定できます。

その他の要らないコード(項目)は<tr>〜</tr>部分を削除してください。

メールタブの修正

続いて、赤線を引いている「メール」タブをクリックしてください。

下の方にスクロールすると、「メッセージ本文」がでてきます。

これを全て消して、下の□の中をコピーして貼り付けてください、

そして、「保存」ボタンをクリックします。

一度、お問い合わせ（お申込み）フォームから、入力して、ちゃんと自分のメールアドレスに届くかどうかチェックしてみてください！

以上、お問い合わせ（申し込み）フォームをカスタマイズする方法でした。

関連記事ワードプレスの基本的な使い方【初期設定、テーマの選定など】

関連記事ワードプレスで最低限入れた方が良いおすすめのプラグイン