参加している趣味の団体で、年一回開催しているイベントの参加申込をWordPressでできるようにしたい。
フォームのプラグインは有名どころだとContact Form 7とWM WP Formがあるみたいなので、とりあえず両方作ってみた。
プラグインはContact Form 7とその履歴を保存できるFlamingo、WM WP Formを追加する。
ついでに、郵便番号から住所を自動入力できるyubinbangoも入れておく。
フォームには定番の氏名、生年月日、住所、メールアドレスなどを入力できるようにしておいた。
MW WP Form版
<script src="https://yubinbango.github.io/yubinbango/yubinbango.js" charset="UTF-8"></script>
<script> document.querySelector('.mw_wp_form_input form').classList.add('h-adr'); </script>
<span class="p-country-name" style="display:none;">Japan</span>
ｘｘｘに参加申し込みします
<table class="table-res-form">
<tbody>
<tr>
<th>氏名<span class="requied">必須</span></th>
<td>[mwform_text name="lastname" size="12" placeholder="姓"]</td>
<td>[mwform_text name="firstname" size="12" placeholder="名"]</td>
</tr>
<tr>
<th>ふりがな<span class="requied">必須</span></th>
<td>[mwform_text name="lastkana" size="12" placeholder="せい"]</td>
<td>[mwform_text name="firstkana" size="12" placeholder="めい"]</td>
</tr>
<tr>
<th>生年月日<span class="requied">必須</span></th>
<td colspan="2">[mwform_select name="birth-year" children="1920,1921,1922,1923,1924,1925,1926,1927,1928,1929,1930,1931,1932,1933,1934,1935,1936,1937,1938,1939,1940,1941,1942,1943,1944,1945,1946,1947,1948,1949,1950,1951,1952,1953,1954,1955,1956,1957,1958,1959,1960,1961,1962,1963,1964,1965,1966,1967,1968,1969,1970,1971,1972,1973,1974,1975,1976,1977,1978,1979,1980,1981,1982,1983,1984,1985,1986,1987,1988,1989,1990,1991,1992,1993,1994,1995,1996,1997,1998,1999,2000,2001,2002,2003,2004,2005,2006,2007,2008,2009,2010,2011,2012,2013,2014,2015,2016,2017,2018,2019,2020,2021,2022,2023,2024,2025,2026,2027,2028,2029,2030,2031,2032,2033,2034,2035,2036,2037,2038" value="1980"]年 [mwform_select name="birth-month" children="-,1,2,3,4,5,6,7,8,9,10,11,12"]月 [mwform_select name="birth-day" children="-,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31"]日</td>
</tr>
<tr>
<th>性別<span class="requied">必須</span></th>
<td colspan="2">[mwform_radio name="gender" children="男,女"]</td>
</tr>
<tr>
<th>郵便番号<span class="requied">必須</span></th>
<td colspan="2">[mwform_text name="zipcode" class="p-postal-code" conv_half_alphanumeric="true" size="10" maxlength="7" placeholder="0000000"]</td>
</tr>
<tr>
<th>都道府県<span class="requied">必須</span></th>
<td colspan="2">[mwform_select name="pref" class="p-region" children="-,北海道,青森県,岩手県,宮城県,秋田県,山形県,福島県,茨城県,栃木県,群馬県,埼玉県,千葉県,東京都,神奈川県,新潟県,富山県,石川県,福井県,山梨県,長野県,岐阜県,静岡県,愛知県,三重県,滋賀県,京都府,大阪府,兵庫県,奈良県,和歌山県,鳥取県,島根県,岡山県,広島県,山口県,徳島県,香川県,愛媛県,高知県,福岡県,佐賀県,長崎県,熊本県,大分県,宮崎県,鹿児島県,沖縄県" value"長野県"]</td>
</tr>
<tr>
<th>市町村区<span class="requied">必須</span></th>
<td colspan="2">[mwform_text name="city" class="p-locality" size="20" placeholder="市町村"]</td>
</tr>
<tr>
<th>番地等<span class="requied">必須</span></th>
<td colspan="2">[mwform_text name="addr1" class="p-street-address p-extended-address" size="40" placeholder="番地等"]</td>
</tr>
<tr>
<th>建物名等</th>
<td colspan="2">[mwform_text name="addr2" size="40" placeholder="建物名等"]</td>
</tr>
<tr>
<th>電話番号<span class="requied">必須</span></th>
<td colspan="2">[mwform_text name="phone" size="20" maxlength="15"]</td>
</tr>
<tr>
<th>メールアドレス<span class="requied">必須</span></th>
<td colspan="2">[mwform_email name="email" size="40"]</td>
</tr>
<tr>
<th>その他</th>
<td colspan="2">[mwform_textarea name="etc" cols="40" rows="5" ]</td>
</tr>
</tbody>
</table>
<p style="text-align: center;">[mwform_bconfirm class="確認" value="confirm"]確認画面へ[/mwform_bconfirm]
[mwform_bback value="back"]戻る[/mwform_bback][mwform_bsubmit name="送信" value="send"]送信する[/mwform_bsubmit]</p>
Contact Form 7版
固定ページなどに張り込むショートコードにhtml_classを追加する。
[contact-form-7 id="nnn" title="xxx" html_class="h-adr"]
<script src="https://yubinbango.github.io/yubinbango/yubinbango.js" charset="UTF-8"></script>
<span class="p-country-name" style="display:none;">Japan</span>
ｘｘｘに参加申し込みします
<table class="table-res-form">
<tbody>
<tr>
<th>氏名<span class="requied">必須</span></th>
<td>[text* lastname size:12 placeholder"姓"]</td>
<td>[text* firstname size:12 placeholder"名"]</td>
</tr>
<tr>
<th>ふりがな<span class="requied">必須</span></th>
<td>[text* lastkana size:12 placeholder"せい"]</td>
<td>[text* firstkana size:12 placeholder"めい"]</td>
</tr>
<tr>
<th>生年月日<span class="requied">必須</span></th>
<td colspan=2>[select* birth-year default:61 "1920" "1921" "1922" "1923" "1924" "1925" "1926" "1927" "1928" "1929" "1930" "1931" "1932" "1933" "1934" "1935" "1936" "1937" "1938" "1939" "1940" "1941" "1942" "1943" "1944" "1945" "1946" "1947" "1948" "1949" "1950" "1951" "1952" "1953" "1954" "1955" "1956" "1957" "1958" "1959" "1960" "1961" "1962" "1963" "1964" "1965" "1966" "1967" "1968" "1969" "1970" "1971" "1972" "1973" "1974" "1975" "1976" "1977" "1978" "1979" "1980" "1981" "1982" "1983" "1984" "1985" "1986" "1987" "1988" "1989" "1990" "1991" "1992" "1993" "1994" "1995" "1996" "1997" "1998" "1999" "2000" "2001" "2002" "2003" "2004" "2005" "2006" "2007" "2008" "2009" "2010" "2011" "2012" "2013" "2014" "2015" "2016" "2017" "2018" "2019" "2020" "2021" "2022" "2023" "2024" "2025" "2026" "2027" "2028" "2029" "2030" "2031" "2032" "2033" "2034" "2035" "2036" "2037" "2038"] [select* birth-month include_blank "1" "2" "3" "4" "5" "6" "7" "8" "9" "10" "11" "12"]月 [select* birth-day include_blank "1" "2" "3" "4" "5" "6" "7" "8" "9" "10" "11" "12" "13" "14" "15" "16" "17" "18" "19" "20" "21" "22" "23" "24" "25" "26" "27" "28" "29" "30" "31"]日</td>
</tr>
<tr>
<th>性別<span class="requied">必須</span></th>
<td colspan=2>[radio gender default:0 "男" "女"]</td>
</tr>
<tr>
<th>郵便番号<span class="requied">必須</span></th>
<td colspan=2>[text* zipcode class:p-postal-code size:10 minlength:7 maxlength:7 placeholder"0000000"]</td>
</tr>
<tr>
<th>都道府県<span class="requied">必須</span></th>
<td colspan=2>[select* pref class:p-region default:20 "北海道" "青森県" "岩手県" "宮城県" "秋田県" "山形県" "福島県" "茨城県" "栃木県" "群馬県" "埼玉県" "千葉県" "東京都" "神奈川県" "新潟県" "富山県" "石川県" "福井県" "山梨県" "長野県" "岐阜県" "静岡県" "愛知県" "三重県" "滋賀県" "京都府" "大阪府" "兵庫県" "奈良県" "和歌山県" "鳥取県" "島根県" "岡山県" "広島県" "山口県" "徳島県" "香川県" "愛媛県" "高知県" "福岡県" "佐賀県" "長崎県" "熊本県" "大分県" "宮崎県" "鹿児島県" "沖縄県"]</td>
</tr>
<tr>
<th>市町村区<span class="requied">必須</span></th>
<td colspan=2>[text* city class:p-locality size:10 placeholder"市町村"]</td>
</tr>
<tr>
<th>番地等<span class="requied">必須</span></th>
<td colspan=2>[text* addr1 class:p-street-address class:p-extended-address placeholder"番地等"]</td>
</tr>
<tr>
<th>建物名等</th>
<td colspan=2>[text addr2 placeholder"建物名等"]</td>
</tr>
<tr>
<th>電話番号<span class="requied">必須</span></th>
<td colspan=2>[tel* phone]</td>
</tr>
<tr>
<th>メールアドレス<span class="requied">必須</span></th>
<td colspan=2>[email* email ]</td>
</tr>
<tr>
<th>その他</th>
<td colspan=2>[textarea etc ]</td>
</tr>
<tr>
<td colspan=3><div align="center">[submit "送信"]</div></td>
</tr>
</tbody>
</table>
外観－カスタマイズで追加CSSに追加して、表示を整形する。
以下の頁を一部参考にさせてもらっています。
https://tonari-it.com/contactform7-form-design/
/* ContactForm7のテーブル化レスポンシブ調整 */
.entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.is-style-wide) {
max-width: 70rem;
width: calc(100% - 4rem);
}
/*テーブルを親要素の幅いっぱいに伸ばす*/
.table-res-form {
width: 100%;
}
/*一行ごとに上ボーダー*/
.table-res-form tr {
border-top: 1px #DDD solid;
}
/*一番上の行だけボーダーなし*/
.table-res-form tr:first-child {
border-top: none;
}
/*奇数行だけ背景色つける*/
.table-res-form tr:nth-child(2n+1) {
background: #eee;
}
/*thとtd内の余白指定*/
.table-res-form th, .table-res-form td {
padding: 1.0em;
}
/*th（項目欄）は30%幅、テキストを右寄せ*/
.table-res-form th {
width: 30%;
text-align: right;
}
/*「必須」「任意」部分のスタイリング*/
.table-res-form .requied, .optional{
font-size: 50%;
color: #FFF;
height: 0;
line-height: 1;
vertical-align: baseline;
position: relative;
bottom: 1ex;
}
.table-res-form .requied {
background: red;
}
.table-res-form .optional {
background: blue;
}
/*ここから768px以下の指定*/
@media only screen and (max-width: 768px) {
/*thとtdをブロック化して幅100％にして、縦積み*/
.table-res-form th, .table-res-form td {
width: 100%;
display: block;
}
/*th（項目名）欄の不要な余白削除・テキスト左寄せ*/
.table-res-form th {
padding-bottom: 0;
text-align: left;
}
/*不要な最終行の左のthを非表示にする*/
.table-res-form .empty {
display: none;
}
}
/*ここまで768px以下の指定---終わり*/
/*ここから入力欄のスタイル指定*/
/*各入力フォームスタイリング*/
.table-res-form input[type="text"], input[type="email"], input[type="tel"], textarea {
border: 1px #89BDDE solid;
padding: 0.5em;
border-radius: 5px;
margin-bottom: 0.5em;
width: auto;
}
/*入力欄にフォーカスしたら変化*/
.table-res-form input[type="text"]:focus, textarea:focus {
background: #EEFFFF;
box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.5);
}
/*送信ボタンスタイリング*/
.table-res-form input[type="submit"] {
border: 1px #89BDDE solid;
padding: 0.5em 4em;
border-radius: 5px;
background: #4C9ED9;
color: #fff;
box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.5);
font-weight: bold;
}
/*送信ボタン・マウスオーバー時スタイリング*/
.table-res-form input[type="submit"]:hover {
background: #006599;
box-shadow: none;
}
/* MW WP Formのラジオボタンを横並びにする */
.mwform-radio-field {
display: inline-flex;
}