<aside> <img src="https://cdn-icons-png.flaticon.com/128/6687/6687986.png" alt="https://cdn-icons-png.flaticon.com/128/6687/6687986.png" width="40px" /> 各ページへのリンク
</aside>
<aside> <img src="/icons/magic-wand_blue.svg" alt="/icons/magic-wand_blue.svg" width="40px" /> お問い合わせフォームのボタンについて
動画で解説しているプラグイン (mw wp form) について
参考動画 ＆ 参考記事
No. 1 input textarea のカスタマイズ
https://www.youtube.com/watch?v=BdAXEFvZt8I
No. 3 checkboxのカスタマイズ方法
https://www.youtube.com/watch?v=xdGgcQ4xwqo&feature=youtu.be
No. 5 select box のカスタマイズ
https://www.youtube.com/watch?v=HU9ktWUeND4&feature=youtu.be
No. 2 必須項目の付け方
https://www.youtube.com/watch?v=lXb7i-pwHZg&feature=youtu.be
No. 4 radio ボタンのカスタマイズ
https://www.youtube.com/watch?v=OXsU88Y-clk&feature=youtu.be
No. 6 送信ボタン のカスタマイズ
https://www.youtube.com/watch?v=xbX38z2nn_M
コード
html.json
<aside> <img src="/icons/magic-wand_blue.svg" alt="/icons/magic-wand_blue.svg" width="40px" /> お問い合わせフォームのtableについて
"form": {
"prefix": "form",
"body": [
"<form action=\\"\\">",
" <div class=\\"contact-table\\">",
" <!-- type=\\"text\\" -->",
" <div>",
" <div class=\\"contact-item\\">名前</div>",
" <div class=\\"contact-body\\">",
" <input type=\\"text\\" name=\\"名前\\" class=\\"form-text\\" />",
" </div>",
" </div>",
" <!-- type=\\"email\\" -->",
" <div>",
" <div class=\\"contact-item\\">メール</div>",
" <div class=\\"contact-body\\">",
" <input type=\\"email\\" name=\\"メール\\" class=\\"form-text\\" />",
" </div>",
" </div>",
" <!-- type=\\"tel\\" -->",
" <div>",
" <div class=\\"contact-item\\">電話</div>",
" <div class=\\"contact-body\\">",
" <input type=\\"tel\\" name=\\"電話\\" class=\\"form-text\\" />",
" </div>",
" </div>",
" <!-- type=\\"radio\\" -->",
" <div>",
" <div class=\\"contact-item\\">性別</div>",
" <div class=\\"contact-body\\">",
" <label class=\\"contact-jender\\">",
" <input type=\\"radio\\" name=\\"性別\\" />",
" <span class=\\"contact-jender-text\\">男</span>",
" </label>",
" <label class=\\"contact-jender\\">",
" <input type=\\"radio\\" name=\\"性別\\" />",
" <span class=\\"contact-jender-text\\">女</span>",
" </label>",
" </div>",
" </div>",
" <!-- type=\\"select\\" -->",
" <div>",
" <div class=\\"contact-item\\">職業</div>",
" <div class=\\"contact-body\\">",
" <select name=\\"職業\\" class=\\"form-select\\">",
" <option>選択</option>",
" <option>学生</option>",
" <option>主婦</option>",
" <option>会社員</option>",
" </select>",
" </div>",
" </div>",
" <!-- type=\\"checkbox\\" -->",
" <div>",
" <div class=\\"contact-item\\">スキル</div>",
" <div class=\\"contact-body\\">",
" <label class=\\"contact-skill\\">",
" <input type=\\"checkbox\\" name=\\"スキル\\" />",
" <span class=\\"contact-skill-txt\\">HTML,CSS</span>",
" </label>",
" <label class=\\"contact-skill\\">",
" <input type=\\"checkbox\\" name=\\"スキル\\" />",
" <span class=\\"contact-skill-txt\\">JavaScript,jQuery</span>",
" </label>",
" </div>",
" </div>",
" <!-- textarea -->",
" <div>",
" <div class=\\"contact-item\\">お問い合わせ内容</div>",
" <div class=\\"contact-body\\">",
" <textarea name=\\"問い合わせ\\" class=\\"form-textarea\\"></textarea>",
" </div>",
" </div>",
" </div>",
"</form>",
],
"description": "お問い合わせフォーム型"
},
scss.json
"contact-btn-reset": {
"prefix": "contact-btn-reset",
"body": [
"//ブラウザによって異なるデフォルト設定を初期化",
"input[type=\\"submit\\"],",
"input[type=\\"button\\"] {",
" border-radius: 0px;",
" -webkit-box-sizing: content-box;",
" -webkit-appearance: button;",
" appearance: button;",
" border: none;",
" box-sizing: border-box;",
" cursor: pointer;",
" background: transparent;",
"}",
"input[type=\\"submit\\"]::-webkit-search-decoration,",
"input[type=\\"button\\"]::-webkit-search-decoration {",
" display: none;",
"}",
"//ボタンを中央寄せに(ケースによる)",
".row.jc-center {",
" justify-content: center;",
"}",
],
"description": "formのボタンのリセット設定"
},