<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のボタンのリセット設定"
},