「細かくカスタマイズ」のページで「フォームデザインを細かくカスタマイズ」のエリアを全て選択→下記のコードを貼りつけ、「設定の切り替え」ボタンを押す
<!DOCTYPE HTML> <html> <head> <meta name="viewport" content="width=device-width,initial-scale=1"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <style type="text/css"> h1,h2,body,th,td,p,dl,dt,dd { font-size: 14px; margin: 0; color: #555; } input[type="text"],textarea { border: solid 1px #4E7F8B; width: 96%; padding: 5px; line-height: 1.3; } input[type="submit"]{ font-size: 1.5rem; letter-spacing: 0.2em; padding: 3px 1em; background-color: #4E7F8B; color: #fff; } textarea { height: 4em; } body { background-color: #BFE6F0; } div.wrapper,div.form-div1 { width: 800px; max-width: 96%; margin: 1em auto; } div.box,div.form-div2 { margin-bottom: 1em; padding: 10px; background-color: #fff; border-radius: 10px; /* CSS3草案 */ -webkit-border-radius: 10px; /* Safari,Google Chrome用 */ -moz-border-radius: 10px; /* Firefox用 */ } h1 { font-size: 1.5rem; margin: 0.5em 0; text-align: center; font-family: 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, Osaka, 'MS PGothic', arial, helvetica, sans-serif; } h2,dt { color: #4E7F8B; /*font-size: 1.1rem;*/ margin: 0 0 0.3em 0; } table { width: 100%; border-spacing: 10px; } th,td { padding: 10px; /*border-left: solid 5px #4E7F8B;*/ } td.sbt { border:none; } p.text,dd { margin-bottom: 0.5em; line-height: 1.5; padding-left: 0.5em; } td p:not(:first-of-type){ border-top: dashed 1px #ccc; padding-top: 0.5em; } td.title{ font-size: 1.1rem; } @media only screen and (max-width: 767px) { h1,h2,th,td,.text,.ans td { font-size: 1rem; } th,td { padding: 5px; } h1 { white-space: nowrap; } } div.link { text-align: right; } div.link a { color: #4E7F8B; } div.system1 { text-align: center; } </style> <title>あなたの小説のここが好きですシート</title> </head> <body> <div class="wrapper"> <div class="box"> <h1>あなたの小説のここが好きですフォーム</h1> <table border="0" cellspacing="0" cellpadding="0"> <tr> <td class="title"> <h2>あなたのお名前</h2> <input type="text" name="checkお名前" id="title" required> </td> </tr> <tr> <td class="title"> <h2>タイトル</h2> <input type="text" name="checkタイトル" id="title" required> </td> </tr> <tr> <td> <h2>好きなところ</h2> <p>該当するものにチェック ※複数回答可</p> <label><input type="checkbox" name="好きなところ" value="世界観">世界観</label> <label><input type="checkbox" name="好きなところ" value="ストーリー">ストーリー</label> <label><input type="checkbox" name="好きなところ" value="地の文">地の文</label> <label><input type="checkbox" name="好きなところ" value="セリフ">セリフ</label> <label><input type="checkbox" name="好きなところ" value="タイトル">タイトル</label><br> <label><input type="checkbox" name="好きなところ" value="その他">その他</label>（<input type="text" name="その他の好きなところ" style="width: 80%">） </td> </tr> <tr> <td> <h2>好きなセリフ</h2> <p>本文より抜粋 ※複数回答可</p> <label for="好きな地の文1"></label> <textarea name="好きなセリフ1" cols="45" rows="5"></textarea> <br> <textarea name="好きなセリフ2" cols="45" rows="5"></textarea> <br> <textarea name="好きなセリフ3" cols="45" rows="5"></textarea></td> </tr> <tr> <td> <h2>好きな地の文</h2> <p>本文より抜粋 ※複数回答可</p> <textarea name="好きな地の文1" id="好きな地の文1" cols="45" rows="5"></textarea> <br> <textarea name="好きな地の文2" id="好きな地の文2" cols="45" rows="5"></textarea> <br> <textarea name="好きな地の文3" id="好きな地の文3" cols="45" rows="5"></textarea></td> </tr> <tr> <td class="sbt"><input type="submit" name="view" id="button" value="メールを送信する"></td> </tr> </table> </div> </body> </html>
サンプルはこちら
もちろん、 サイトをお持ちの方はご自身で設置するメールフォームにこのソースを利用してくださって構いません！ご自由にどうぞ。