入力画面の作成
input.html
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>お問合せフォーム｜入力画面</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <h1>入力画面</h1> <ul class="step"> <li data-num="01" class="current">入力画面</li> <li data-num="02">確認画面</li> <li data-num="03">完了画面</li> </ul> <form action="#" method="post"> <dl> <dt>お名前<span>必須</span></dt> <dd><input type="text" required name="" autocomplete="name"><span>例:山田 太郎</span></dd> <dt>メールアドレス<span>必須</span></dt> <dd><input type="email" required name="" autocomplete="email"><span>例:abc@xxx.com</span></dd> <dt>お問い合わせ項目<span>必須</span></dt> <dd class="row-2"> <label for="item-1"> <input type="radio" name="item" id="item-1" value="サービスについて" required checked>サービスについて </label> <label for="item-2"> <input type="radio" name="item" id="item-2" value="採用について" required>採用について </label> <label for="item-3"> <input type="radio" name="item" id="item-3" value="資料請求" required>資料請求 </label> <label for="item-4"> <input type="radio" name="item" id="item-4" value="その他" required>その他 </label> </dd> <dt>興味のある項目<span>複数選択可</span></dt> <dd class="row-2"> <label for="check-1"> <input type="checkbox" name="interest" id="check-1" value="web3">web3 </label> <label for="check-2"> <input type="checkbox" name="interest" id="check-2" value="プログラミング">プログラミング </label> <label for="check-3"> <input type="checkbox" name="interest" id="check-3" value="サイト制作">サイト制作 </label> <label for="check-4"> <input type="checkbox" name="interest" id="check-4" value="動画編集">動画編集 </label> </dd> <dt>お問い合わせ内容<span>必須</span></dt> <dd> <textarea required></textarea> <span>例:何か気になることやご質問、ご不明な点などあればご記入ください。</span> </dd> </dl> <div class="policy-box"> <div class="policy-inner"> <h2>プライバシーポリシー</h2> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla, esse sapiente voluptate, vitae quibusdam quidem, distinctio aut modi aspernatur ipsam iure mollitia doloribus natus corrupti alias blanditiis accusantium. Praesentium, voluptates!</p> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla, esse sapiente voluptate, vitae quibusdam quidem, distinctio aut modi aspernatur ipsam iure mollitia doloribus natus corrupti alias blanditiis accusantium. Praesentium, voluptates!</p> </div><!-- /.policy-inner --> <label for="policy" class="policy-btn"> <input type="checkbox" id="policy" required> プライバシーポリシーの内容を確認し同意します。<span>必須</span> </label> </div><!-- /.policy-box --> <div class="form-btn"> <input type="submit" value="内容を確認"> <input type="reset" value="内容をリセット"> </div> </form> </body> </html>
確認画面
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>お問合せフォーム｜確認画面</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <h1>確認画面</h1> <ul class="step"> <li data-num="01">入力画面</li> <li data-num="02" class="current">確認画面</li> <li data-num="03">完了画面</li> </ul> <form action="#" method="post"> <dl> <dt>お名前<span>必須</span></dt> <dd></dd> <dt>メールアドレス<span>必須</span></dt> <dd></dd> <dt>お問い合わせ項目<span>必須</span></dt> <dd class="row-2"> </dd> <dt>興味のある項目<span>複数選択可</span></dt> <dd class="row-2"> </dd> <dt>お問い合わせ内容<span>必須</span></dt> <dd> </dd> </dl> <div class="form-btn"> <input type="submit" value="送信"> <input type="button" value="入力画面に戻る"> </div> </form> </body> </html>
完了画面の作成
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>お問合せフォーム｜完了画面</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <h1>完了画面</h1> <ul class="step"> <li data-num="01">入力画面</li> <li data-num="02">確認画面</li> <li data-num="03" class="current">完了画面</li> </ul> <div class="thanks-txt"> <h2>お問い合わせありがとうございました。</h2> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui, sunt. Officiis optio culpa voluptate veniam quidem ea modi quas nemo. Quae dignissimos accusamus, ratione autem officiis ut enim aut debitis?</p> </div> <div class="question"> <h2>よくある質問</h2> <details open> <summary> <h3 data-icon="Q">ポイントの利用は出来ますか？Lorem ipsum dolor sit amet consectetur adipisicing elit. Asperiores, velit.</h3> </summary> <div class="answer"> <p data-icon="A">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas, obcaecati inventore delectus nam, a aliquam repellendus nihil praesentium reprehenderit in dolorem assumenda voluptatum architecto nisi quidem sint totam rem facere.</p> </div> </details> <details> <summary> <h3 data-icon="Q">営業時間を知りたいのですが？</h3> </summary> <div class="answer"> <p data-icon="A">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas, obcaecati inventore delectus nam, a aliquam repellendus nihil praesentium reprehenderit in dolorem assumenda voluptatum architecto nisi quidem sint totam rem facere.</p> </div> </details> <details> <summary> <h3 data-icon="Q">未成年ですが、申し込みは可能ですか?</h3> </summary> <div class="answer"> <p data-icon="A">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas, obcaecati inventore delectus nam, a aliquam repellendus nihil praesentium reprehenderit in dolorem assumenda voluptatum architecto nisi quidem sint totam rem facere.</p> </div> </details> </div><!-- /.question --> </body> </html>
style.css
@charset "utf-8"; :root{ --color_1:#2d4b51;/* 濃い目の色 */ --color_2:#e0e8e8;/* 薄い色 */ } html{box-sizing:border-box;-webkit-text-size-adjust:100%}*,:after,:before{background-repeat:no-repeat;box-sizing:inherit}:after,:before{text-decoration:inherit;vertical-align:inherit}*{padding:0;margin:0;box-sizing:border-box;}audio:not([controls]){display:none;height:0}hr{overflow:visible}article,aside,details,figcaption,figure,footer,header,main,menu,nav,section,summary{display:block}summary{display:list-item}small{font-size:80%}[hidden],template{display:none}abbr[title]{border-bottom:1px dotted;text-decoration:none}a{background-color:transparent;-webkit-text-decoration-skip:objects}a:active,a:hover{outline-width:0}code,kbd,pre,samp{font-family:monospace,monospace}b,strong{font-weight:bolder}dfn{font-style:italic}mark{background-color:#ff0;color:#000}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}input{border-radius:0}[role=button],[type=button],[type=reset],[type=submit],button{cursor:pointer}[disabled]{cursor:default}[type=number]{width:auto}[type=search]{-webkit-appearance:textfield}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}textarea{overflow:auto;resize:vertical}button,input,optgroup,select,textarea{font:inherit}optgroup{font-weight:700}button{overflow:visible}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:0;padding:0}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button:-moz-focusring{outline:1px dotted ButtonText}[type=reset],[type=submit],button,html [type=button]{-webkit-appearance:button}button,select{text-transform:none}button,input,select,textarea{background-color:transparent;border-style:none;color:inherit}select{-moz-appearance:none;-webkit-appearance:none}select::-ms-expand{display:none}select::-ms-value{color:currentColor}legend{border:0;color:inherit;display:table;max-width:100%;white-space:normal}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}img{border-style:none;vertical-align: bottom}progress{vertical-align:baseline}svg:not(:root){overflow:hidden}audio,canvas,progress,video{display:inline-block}@media screen{[hidden~=screen]{display:inherit}[hidden~=screen]:not(:active):not(:focus):not(:target){position:absolute!important;clip:rect(0 0 0 0)!important}}[aria-busy=true]{cursor:progress}[aria-controls]{cursor:pointer}[aria-disabled]{cursor:default}::-moz-selection{background-color:#b3d4fc;color:#000;text-shadow:none}::selection{background-color:#b3d4fc;color:#000;text-shadow:none}ul,ol{list-style:none;}a{text-decoration:none;}.wrapper{overflow:hidden;}body{overflow-y:scroll;}img{max-width: 100%;} h1{ text-align: center; padding: 50px 0 20px; } .step{ display: flex; max-width: 600px; margin: 80px auto 120px; justify-content: space-between; } .step>li{ color: var(--color_1); } .step>li::before{ display: block; content: attr(data-num); width: 40px; height: 40px; border-radius: 50%; background-color: var(--color_1); color: #FFF; text-align: center; line-height: 40px; font-size: 18px; margin: 0 auto 6px; } .step>li.current::before{ background-color: #FFF; color: var(--color_1); border: 2px solid var(--color_1); } form{ max-width: 800px; margin: 0 auto 100px; } form>dl{ display: flex; flex-wrap: wrap; border: 1px solid var(--color_1); } form dt{ width: 30%; background-color: var(--color_2); border-right: 1px solid var(--color_1); padding: 20px; } form dt>span{ font-size: 13px; background-color: var(--color_1); padding: 4px; color: #FFF; margin-left: 10px; } form dd{ width: 70%; padding: 20px; } form dt:nth-of-type(n+2),form dd:nth-of-type(n+2){ border-top: 1px solid var(--color_1); } [type="text"],[type="email"]{ border: 1px solid var(--color_1); padding: 4px; width: 50%; } dd>span{ display: block; font-size: 14px; margin-top: 4px; } [type="radio"],[type="checkbox"]{ transform: scale(1.8); accent-color: var(--color_1); margin-right: 14px; } .row-2>label{ display: inline-block; width: 40%; margin-bottom: 10px; } textarea{ border: 1px solid var(--color_1); width: 80%; height: 160px; } .policy-box{ width: 70%; margin: 100px auto; } .policy-inner{ padding: 50px 20px; height: 200px; overflow: scroll; border: 1px solid var(--color_1); margin-bottom: 40px; } .policy-inner>h2{ margin-bottom: 100px; text-align: center; } .policy-inner>p{ margin-bottom: 50px; line-height: 3; font-size: 20px; } .policy-btn{ background-color: var(--color_2); padding: 14px; } .policy-btn:hover{ background-color: #c2c9ca; } .policy-btn>span{ font-size: 13px; background-color: var(--color_1); padding: 4px; color: #FFF; margin-left: 10px; } .form-btn{ margin-top: 100px; text-align: center; } [type="submit"]{ background-color: var(--color_1); color: #FFF; padding: 20px 80px; margin-right: 40px; } [type="reset"],[type="button"]{ background-color: #e8bbbb; padding: 20px 20px; } /* 完了画面 */ .thanks-txt{ max-width: 600px; margin: 100px auto; padding: 10px; } .thanks-txt>h2{ margin-bottom: 30px; } /* アコーディオン部分 */ .question{ width: 70%; margin: 100px auto; } details{ margin-bottom: 50px; } summary{ list-style: none;/* 黒い三角を消す */ background-color: var(--color_1); color: #FFF; padding: 20px 60px; font-size: 22px; cursor: pointer; } summary>h3{ font-size: 26px; } summary>h3::before{ display: inline-block; content: attr(data-icon); text-decoration: none; margin: 0 0.4em 0 -1.3em; } summary:hover>h3{ text-decoration: underline; } .question>h2{ text-align: center; padding: 50px 0 30px; } .answer{ background-color: var(--color_2); padding: 20px 60px; } .answer>p{ font-size: 18px; line-height: 2; } .answer>p::before{ display: inline-block; content: attr(data-icon); font-size: 30px; line-height: 1; color: crimson; font-weight: bold; margin: 0 0.5em 0 -1.3em; }
