『お問い合わせフォームを作りたい』
『見やすく整形したい』
『表形式って、どうやって作るの？』
お問い合わせフォームの作成のため、以下のプラグインを使っています。
それぞれ一長一短であり、
- 初心者でも使いやすいのは『WP Forms』
- カスタマイズ性が高いのは『Contact Form7』
かなと。
今日は、『両者の比較』、『表形式にしたかった理由』、『具体的な方法』をお伝えします。
※こんな感じに変わります。
【比較】Contact Form7 とWP Forms
両者を実際に使ってみた経験を踏まえ、比較してみます。
まず、『Contact Form7』ですが、WordPressで最も人気のあるお問い合わせフォームプラグインです。
（有効インストール数1,000万以上…！）
良い点としては、
- 無料（WP Formsだと有料になるような機能の実装まで）
- カスタマイズの自由度が高い（CSSやHTMLでの細かな調整に対応できる）
- 個人レベルでの使用なら必要十分な機能が揃っている
があげられます。
一方で、ハードルも少しあり、
- プログラミングの知識は少し必要
- 慣れるまで時間がかかる（初心者には少しとっつきにくい）
- 直感操作では、WP Formsの方が上
といったことも。
『WP Forms』は上記のメリット・デメリットの反対といった形になってきます。
比較表でまとめてみます。
| 項目 | Contact Form7 | WP Forms |
|---|---|---|
| 💰料金 | 無料 | 高機能は有料 |
| 💻カスタマイズ性 | 高い | 無料だと低い （シンプルなフォームなら十分） |
| ⌨️操作性 | 悪くない | 直感的 |
| 🧑💻プログラミングスキル | 少し必要 | 不要 |
| 🌵用途 | 柔軟にレイアウトを作りたい。 表形式に無料でしたい。 | シンプルなフォームを作りたい。 （カスタマイズはいらない） |
そして表形式にする方法ですが、WP Formsだと『Layout Field（レイアウトフィールド）』という機能で実装できます。
しかし、これは『WPForms Pro（有料）』の機能。
1サイトで使う場合、年間8,000円程度かかります。（3サイトだと約14,000円）
今回は、お金をかけずに表形式にしたかったため、Contact Form7を選びました。
【理由】なぜ、表形式にしたかったのか？
具体的な方法に入る前に、なぜ表形式にしたかったか？をお伝えします。
その理由は、
- フォームをコンパクトにしたかった（視認性の向上）
- 入力のしやすさ（操作性の向上）
です。
もちろん、元のフォームでも機能的には問題ありませんが、
お客様に使っていただく際に、少し使いづらさがあったかなと。
できる限り入力のストレスを減らしたく、改善を試みました。
【方法】Contact Form7表を作る方法
表にする方法自体は難しいものではありません。
仕組みが分かれば、機械的に更新できるものです。
もとの形式では、Contact Form7のフォームタブでこのように記載しています。
お名前(性) *
[text* your-name-last placeholder "例:宮本"]
お名前(名) *
[text* your-name-first placeholder "例:大樹"]
メールアドレス *
[email* your-email placeholder "例:aonosuke.motomiya@gmail.com"]
お申込みプラン *
[radio plan use_label_element "顧問契約(法人)" "顧問契約(個人)"]
ご希望の形式 *
[radio meeting-type use_label_element "Zoom" "Google Meet" "Microsoft Teams"]
ご希望の日時(第1希望) *
[text* datetime class:datetime-picker placeholder "日時を選択してください"]
ご希望の日時(第2希望) *
[text* datetime2 class:datetime-picker placeholder "日時を選択してください"]
『ご相談内容』や『現状の課題』を教えていただけないでしょうか? *
[textarea* textarea-1 80x6]
[submit "送信"]
これを以下のように書き換えます。
<table>
<tr>
<th>お名前（性）<span class="required">*</span></th>
<td>[text* your-name-last placeholder "例：宮本"]</td>
</tr>
<tr>
<th>お名前（名）<span class="required">*</span></th>
<td>[text* your-name-first placeholder "例：大樹"]</td>
</tr>
<tr>
<th>メールアドレス<span class="required">*</span></th>
<td>[email* your-email placeholder "例:aonosuke.motomiya@gmail.com"]</td>
</tr>
<tr>
<th>お申込みプラン<span class="required">*</span></th>
<td>[radio plan use_label_element "顧問契約（法人）" "顧問契約（個人）"]</td>
</tr>
<tr>
<th>ご希望の形式<span class="required">*</span></th>
<td>[radio meeting-type use_label_element "Zoom" "Google Meet" "Microsoft Teams"]</td>
</tr>
<tr>
<th>ご希望の日時<br>（第1希望）<span class="required">*</span></th>
<td>[text* datetime class:datetime-picker placeholder "日時を選択してください"]</td>
</tr>
<tr>
<th>ご希望の日時<br>（第2希望）<span class="required">*</span></th>
<td>[text* datetime2 class:datetime-picker placeholder "日時を選択してください"]</td>
</tr>
<tr>
<th>『ご相談内容』や<br>『現状の課題』を<br>教えていただけないでしょうか？<span class="required">*</span></th>
<td>[textarea* textarea-1 80x6 ]</td>
</tr>
</table>
[submit "送信"]
両者のコードを比較すると、このような形です。
お名前(性) *
[text* your-name-last placeholder "例:宮本"]
お名前(名) *
[text* your-name-first placeholder "例:大樹"]
メールアドレス *
[email* your-email placeholder "例:aonosuke.motomiya@gmail.com"]
お申込みプラン *
[radio plan use_label_element "顧問契約(法人)" "顧問契約(個人)"]
ご希望の形式 *
[radio meeting-type use_label_element "Zoom" "Google Meet" "Microsoft Teams"]
ご希望の日時(第1希望) *
[text* datetime class:datetime-picker placeholder "日時を選択してください"]
ご希望の日時(第2希望) *
[text* datetime2 class:datetime-picker placeholder "日時を選択してください"]
『ご相談内容』や『現状の課題』を教えていただけないでしょうか? *
[textarea* textarea-1 80x6]
[submit "送信"]<table>
<tr>
<th>お名前（性）<span class="required">*</span></th>
<td>[text* your-name-last placeholder "例：宮本"]</td>
</tr>
<tr>
<th>お名前（名）<span class="required">*</span></th>
<td>[text* your-name-first placeholder "例：大樹"]</td>
</tr>
<tr>
<th>メールアドレス<span class="required">*</span></th>
<td>[email* your-email placeholder "例:aonosuke.motomiya@gmail.com"]</td>
</tr>
<tr>
<th>お申込みプラン<span class="required">*</span></th>
<td>[radio plan use_label_element "顧問契約（法人）" "顧問契約（個人）"]</td>
</tr>
<tr>
<th>ご希望の形式<span class="required">*</span></th>
<td>[radio meeting-type use_label_element "Zoom" "Google Meet" "Microsoft Teams"]</td>
</tr>
<tr>
<th>ご希望の日時<br>（第1希望）<span class="required">*</span></th>
<td>[text* datetime class:datetime-picker placeholder "日時を選択してください"]</td>
</tr>
<tr>
<th>ご希望の日時<br>（第2希望）<span class="required">*</span></th>
<td>[text* datetime2 class:datetime-picker placeholder "日時を選択してください"]</td>
</tr>
<tr>
<th>『ご相談内容』や<br>『現状の課題』を<br>教えていただけないでしょうか？<span class="required">*</span></th>
<td>[textarea* textarea-1 80x6 ]</td>
</tr>
</table>
[submit "送信"]何が変わったかというと、以下のような構造を追記しています。
<table>
<tr>
<th>★項目名【例：お名前(性) 】</th>
<td>★記載内容【例：[text* your-name-last placeholder "例：宮本"]】</td>
</tr>
</table>- <table>で、表形式にすることを指定します。
- <tr>は、『Table Row』の略で、1つの行を追加することを示しています。
- <th>は、『Table Header』の略で、その行の中の見出しを定義します。
- <td＞は、『Table Data』の略で、Excelでいうセルの中身を記載するイメージです。
このような構造を追加することで、表形式に変換していくことが可能です。
すでにContact Form7のフォームタブに記載しているものがあれば、
AIに『表形式に変換して』と依頼してもいいでしょう。
ただし、その仕組み・構造自体は理解しておきたいもの。
ここが押さえていないと出てきたコードを鵜呑みにするしかなく、
応用が利かない
といった状況になってしまうからです。
このようにお問い合わせフォームを整理することができますので、もしよろしければ試してみてください。
では、また次回。
編集後記
◇日記
昨日はブログ執筆からスタート。YouTube撮影もしましたが、いったん没。
別のネタで日中に取り直しました。
会計事務所HPの更新や、ラン5km、散髪。
よく集中できた1日だと思います。
◇ブログネタ経緯
表記式にする方法をまとめておきたく執筆。
◇1日1新
ContactForm7のカレンダー設定
