contact.js
window.addEventListener('DOMContentLoaded',()=>{// 「送信」ボタンの要素を取得constsubmit=document.querySelector('#contact-submit');// エラーメッセージと赤枠の削除functionreset(input_infomation,error_message){constinput_info=document.querySelector(input_infomation);consterr_message=document.querySelector(error_message);err_message.textContent='';input_info.classList.remove('input-invalid');};// 「お名前」入力欄の空欄チェック関数functioninvalitName(input_target,error_target,error_message){constname=document.querySelector(input_target);consterrMsgName=document.querySelector(error_target);if(!name.value){errMsgName.classList.add('form-invalid');errMsgName.textContent=error_message;name.focus();name.classList.add('input-invalid');// 動作を止めるreturnfalse;};// 動作を進めるreturntrue;};// 「ふりがな」入力欄の空欄チェック関数functioninvalitHurigana(input_target,error_target,error_message){consthurigana=document.querySelector(input_target);consterrMsgHurigana=document.querySelector(error_target);if(!hurigana.value){errMsgHurigana.classList.add('form-invalid');errMsgHurigana.textContent=error_message;hurigana.focus();hurigana.classList.add('input-invalid');// 動作を止めるreturnfalse;};// 動作を進めるreturntrue;};// 「郵便番号」入力欄の空欄チェック関数functioninvalitPostal(input_target,error_target,error_message){constpostal=document.querySelector(input_target);consterrMsgPostal=document.querySelector(error_target);if(!postal.value){errMsgPostal.classList.add('form-invalid');errMsgPostal.textContent=error_message;postal.focus();postal.classList.add('input-invalid');// 動作を止めるreturnfalse;};// 動作を進めるreturntrue;};// 「住所」入力欄の空欄チェック関数functioninvalitAddress(input_target,error_target,error_message){constaddress=document.querySelector(input_target);consterrMsgAddress=document.querySelector(error_target);if(!address.value){errMsgAddress.classList.add('form-invalid');errMsgAddress.textContent=error_message;address.focus();address.classList.add('input-invalid');// 動作を止めるreturnfalse;};// 動作を進めるreturntrue;};// 「電話番号」入力欄の空欄チェック関数functioninvalitTel(input_target,error_target,error_message){consttel=document.querySelector(input_target);consterrMsgTel=document.querySelector(error_target);if(!tel.value){errMsgTel.classList.add('form-invalid');errMsgTel.textContent=error_message;tel.focus();tel.classList.add('input-invalid');// 動作を止めるreturnfalse;};// 動作を進めるreturntrue;};// 「メールアドレス」入力欄の空欄チェック関数 functioninvalitEmail(input_target,error_target,error_message){constemail=document.querySelector(input_target);consterrMsgEmail=document.querySelector(error_target);if(!email.value){errMsgEmail.classList.add('form-invalid');errMsgEmail.textContent=error_message;email.focus();email.classList.add('input-invalid');// 動作を止めるreturnfalse;};// 動作を進めるreturntrue;};// 「会社名」入力欄の空欄チェック関数functioninvalitCompany(input_target,error_target,error_message){constcompany=document.querySelector(input_target);consterrMsgCompany=document.querySelector(error_target);if(!company.value){errMsgCompany.classList.add('form-invalid');errMsgCompany.textContent=error_message;company.focus();company.classList.add('input-invalid');// 動作を止めるreturnfalse;};// 動作を進めるreturntrue;};// 「お問い合わせ内容」入力欄の空欄チェック関数functioninvalitContent(input_target,error_target,error_message){constcontent=document.querySelector(input_target);consterrMsgContent=document.querySelector(error_target);if(!content.value){errMsgContent.classList.add('form-invalid');errMsgContent.textContent=error_message;content.focus();content.classList.add('input-invalid');// 動作を止めるreturnfalse;};// 動作を進めるreturntrue;};// 「送信」ボタンの要素にクリックイベントを設定するsubmit.addEventListener('click',(e)=>{// デフォルトアクションをキャンセルe.preventDefault();reset('#name-js','#err-msg-name');reset('#hurigana-js','#err-msg-hurigana');reset('#postal-js','#err-msg-postal');reset('#address-js','#err-msg-address');reset('#tel-js','#err-msg-tel');reset('#email-js','#err-msg-email');reset('#company-js','#err-msg-company');reset('#content-js','#err-msg-content');constfocus=()=>document.querySelector('#name-js').focus();// 「お名前」入力欄の空欄チェックif(invalitName('#name-js','#err-msg-name','お名前が入力されていません')===false){return;};// 「ふりがな」入力欄の空欄チェックif(invalitHurigana('#hurigana-js','#err-msg-hurigana','入力必須です')===false){return;};// ひらがなチェックconsthurigana=document.querySelector("#hurigana-js");consterrMsgHurigana=document.querySelector("#err-msg-hurigana");consthuriganaCheck=/[^ぁ-んー ]/u;if(hurigana.value.match(huriganaCheck)){errMsgHurigana.classList.add('form-invalid');errMsgHurigana.textContent='ひらがなで入力してください';hurigana.focus();hurigana.classList.add('input-invalid');return;}else{errMsgHurigana.textContent='';hurigana.classList.remove('input-invalid');hurigana.blur();};// 「郵便番号」入力欄の空欄チェックif(invalitPostal('#postal-js','#err-msg-postal','入力必須です')===false){return;};// 郵便番号形式チェックconstpostal=document.querySelector("#postal-js");consterrMsgPostal=document.querySelector("#err-msg-postal");constpostalCheck=/^\d{7}$/;if(postal.value.match(postalCheck)){errMsgPostal.textContent='';postal.classList.remove('input-invalid');postal.blur();}else{errMsgPostal.classList.add('form-invalid');errMsgPostal.textContent='郵便番号は数字７桁で入力してください';postal.focus();postal.classList.add('input-invalid');return;};// 「住所」入力欄の空欄チェックif(invalitAddress('#address-js','#err-msg-address','入力必須です')===false){return;};// 「電話番号」入力欄の空欄チェックif(invalitTel('#tel-js','#err-msg-tel','入力必須です')===false){return;};//電話番号形式チェックconsttel=document.querySelector("#tel-js");consterrMsgTel=document.querySelector("#err-msg-tel");consttelCheck=/0\d{1,4}\d{1,4}\d{4}/;if(tel.value.match(telCheck)){errMsgTel.textContent='';tel.classList.remove('input-invalid');tel.blur();}else{errMsgTel.classList.add('form-invalid');errMsgTel.textContent='電話番号は数字で入力してください';tel.focus();tel.classList.add('input-invalid');return;};// 「メールアドレス」入力欄の空欄チェックif(invalitEmail('#email-js','#err-msg-email','入力必須です')===false){return;};constemail=document.querySelector("#email-js");consterrMsgEmail=document.querySelector("#err-msg-email");// "@"があるかのチェックif(email.value.match(/@/)){errMsgEmail.textContent='';email.classList.remove('input-invalid');email.blur();}else{errMsgEmail.classList.add('form-invalid');errMsgEmail.textContent='Emailの形式で入力してください';email.focus();email.classList.add('input-invalid');return;}// Email形式チェックconstemailSplit=email.value.split(/(@)/);constemailUser=emailSplit[0];constemailatto=emailSplit[1];constemailDomain=emailSplit[2];console.log(emailSplit);constemailUserCheck=/^[-a-z0-9~#&'*/?`\|!$%^&*_=+}{\'?]+(\.[-a-z0-9~#&'*/?`\|!$%^&*_=+}{\'?]+)*/;constemailDomainCheck=/([a-z0-9_][-a-z0-9_]*(\.[-a-z0-9_]+)|(docomo\ezweb\softbank)*\.(aero|arpa|biz|com|coop|edu|gov|info|int|mil|museum|name|net|org|pro|travel|mobi|[a-z][a-z])|([0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}))(:[0-9]{1,5})?$/i;// const emailCheck = /^[-a-z0-9~#&'*/?`\|!$%^&*_=+}{\'?]+(\.[-a-z0-9~#&'*/?`\|!$%^&*_=+}{\'?]+)*@([a-z0-9_][-a-z0-9_]*(\.[-a-z0-9_]+)|(docomo\ezweb\softbank)*\.(aero|arpa|biz|com|coop|edu|gov|info|int|mil|museum|name|net|org|pro|travel|mobi|[a-z][a-z])|([0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}))(:[0-9]{1,5})?$/i; if(emailUser.match(emailUserCheck)){errMsgEmail.textContent='';email.classList.remove('input-invalid');email.blur();}else{errMsgEmail.classList.add('form-invalid');errMsgEmail.textContent='Emailの形式で入力してください';email.focus();email.classList.add('input-invalid');return;}if(emailDomain.match(emailDomainCheck)){errMsgEmail.textContent='';email.classList.remove('input-invalid');email.blur();}else{errMsgEmail.classList.add('form-invalid');errMsgEmail.textContent='Emailの形式で入力してください';email.focus();email.classList.add('input-invalid');return;}// Email文字数チェックconstallLength=email.value.length;constuserNameLength=emailUser.length;constdomainNameLength=emailDomain.length;console.log(allLength);console.log(userNameLength);console.log(domainNameLength);if(allLength>=1&&allLength<=256&&userNameLength>=1&&userNameLength<=64&&domainNameLength>=1&&domainNameLength<=256){errMsgEmail.textContent='';email.classList.remove('input-invalid');email.blur();}else{errMsgEmail.classList.add('form-invalid');errMsgEmail.textContent='Emailの形式で入力してください(文字数が間違っています)';email.focus();email.classList.add('input-invalid');return;}// 「会社名」入力欄の空欄チェックif(invalitCompany('#company-js','#err-msg-company','入力必須です')===false){return;};// 「お問い合わせ内容」入力欄の空欄チェックif(invalitContent('#content-js','#err-msg-content','入力必須です')===false){return;};document.customerinfo.submit();},false);},false);contact.php
<!DOCTYPE html><htmllang="ja"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1"><title>お問い合わせ</title><linkhref="https://fonts.googleapis.com/css?family=Amatic+SC"rel="stylesheet"><linktype="text/css"rel="stylesheet"href="./css/contact.css"><script src="https://yubinbango.github.io/yubinbango/yubinbango.js"charset="UTF-8"></script></head><body><?phprequire"header.php";?><main><sectionclass="container container-ornament"id="contact"><h2class="container-title"><span>お問い合わせ</span></h2><divclass="container-body"><divclass="container-required"><pclass="Required-title"><spanclass="Required">※</span>は入力必須項目になります。</p></div><formaction="contact_db_connect.php"class="form form-m h-adr"method="post"name="customerinfo"><!-- <form action="" class="form form-m h-adr" method="post" name="customerinfo"> --><table><tr><thclass="th"><spanclass="Required">※</span>お名前</th><tdclass="td"><spanclass="err_msg"id="err-msg-name"><?phpif(!empty($err_msg['name']))echo$err_msg['name'];?></span><inputclass="input input-l"id="name-js"name="name"type="text"placeholder="例）神戸 太郎"value="<?phpif(!empty($_POST['name']))echo$_POST['name'];?>"></td></tr><tr><thclass="th"><spanclass="Required">※</span>ふりがな</th><tdclass="td"><spanclass="err_msg"id="err-msg-hurigana"><?phpif(!empty($err_msg['kana']))echo$err_msg['kana'];?></span><inputclass="input input-l"id="hurigana-js"name="kana"type="text"placeholder="例）こうべ たろう"value="<?phpif(!empty($_POST['kana']))echo$_POST['kana'];?>"></td></tr><spanclass="p-country-name"style="display:none;">Japan</span><tr><thclass="th"><spanclass="Required">※</span>郵便番号</th><tdclass="td"><spanclass="err_msg"id="err-msg-postal"><?phpif(!empty($err_msg['zip']))echo$err_msg['zip'];?></span><inputtype="text"class="input input-l p-postal-code"id="postal-js"name="zip"size="8"maxlength="8"placeholder="ハイフン無し"value="<?phpif(!empty($_POST['zip']))echo$_POST['zip'];?>"></td></tr><tr><thclass="th"><spanclass="Required">※</span>住所</th><tdclass="td"><spanclass="err_msg"id="err-msg-address"><?phpif(!empty($err_msg['addr']))echo$err_msg['addr'];?></span><inputtype="text"class="input input-l p-region p-locality p-street-address p-extended-address"id="address-js"name="addr"placeholder="住所"value="<?phpif(!empty($_POST['addr']))echo$_POST['addr'];?>"></td></tr><tr><thclass="th"><spanclass="Required">※</span>電話番号</th><tdclass="td"><spanclass="err_msg"id="err-msg-tel"><?phpif(!empty($err_msg['tel']))echo$err_msg['tel'];?></span><inputclass="input input-l"id="tel-js"name="tel"type="tel"placeholder="例）09012345678 半角 ハイフンなし"maxlength="13"value="<?phpif(!empty($_POST['tel']))echo$_POST['tel'];?>"></td></tr><tr><thclass="th sp-br"><spanclass="Required">※</span>メール<br>アドレス</th><tdclass="td"><spanclass="err_msg"id="err-msg-email"><?phpif(!empty($err_msg['email']))echo$err_msg['email'];?></span><inputclass="input input-l"id="email-js"name="email"type="email"placeholder="例）example@.com"value="<?phpif(!empty($_POST['email']))echo$_POST['email'];?>"></td></tr><tr><thclass="th"><spanclass="Required">※</span>会社名</th><tdclass="td"><spanclass="err_msg"id="err-msg-company"><?phpif(!empty($err_msg['company']))echo$err_msg['company'];?></span><inputtype="text"class="input input-l"id="company-js"name="company"placeholder="例）〇〇〇〇株式会社"value="<?phpif(!empty($_POST['company']))echo$_POST['company'];?>" ></td></tr><tr><thclass="th">部署名</th><tdclass="td"><inputtype="text"class="input input-l"name="department"placeholder=""value="<?phpif(!empty($_POST['company']))echo$_POST['company'];?>" ></td></tr><tr><thclass="th"><spanclass="Required">※</span>お問い合わせ内容</th><tdclass="td"><spanclass="err_msg"id="err-msg-content"><?phpif(!empty($err_msg['text']))echo$err_msg['text'];?></span><textareaclass="input input-l input-textarea mb-xxl"id="content-js"name="text"placeholder="お問い合わせ内容"value="<?phpif(!empty($_POST['text']))echo$_POST['name'];?>" ></textarea></td></tr></table><!-- <button type="submit" class="btn btn-corp btn-l" id="contact-submit">送信</button> --><buttonclass="btn btn-corp btn-l"id="contact-submit">送信</button></form></div></section></main><footerclass="footer"></footer><script
src="https://code.jquery.com/jquery-3.3.1.min.js"integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="crossorigin="anonymous"></script><script src="./js/app.js"></script><script src="./js/contact.js"></script></body></html>contact.css
@charset"UTF-8";html,body{width:100%;color:#444444;font-size:16px;line-height:1.6;/* font-family: Quicksand, 游ゴシック体, "Yu Gothic", YuGothic, "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;*/text-size-adjust:100%;letter-spacing:0.1em;margin:0auto;}p,a{-webkit-font-smoothing:antialiased;}a{color:#FFFFFF;text-decoration:none;transition:.3s;}a:hover{color:#000000;transition:.3s;}img{width:100%;vertical-align:bottom;}.header{box-sizing:border-box;background:#808080;width:100%;height:80px;color:#FFFFFF;display:flex;align-items:center;justify-content:space-between;padding-left:20px;padding-right:20px;position:fixed;transition:.3s;z-index:2;}.header.float-active{transition:.3s;background:#808080;}@mediascreenand(max-width:414px){.header{height:60px;padding-right:15px;padding-left:15px;}}.header.title{font-size:30px;font-family:"Amatic SC",cursive;font-weight:bold;}@mediascreenand(max-width:414px){.header.title{font-size:20px;}}@mediascreenand(max-width:768px){.header.title{font-size:15px;}}h1a:hover{color:#FFFFFF;}@mediascreenand(max-width:414px){.nav-menu{display:block;position:absolute;top:0;right:-100%;background-color:rgba(133,133,133,0.9);width:100%;height:100vh;padding-top:50px;transition:.5s;}.nav-menu.active{transition:.5s;transform:translateX(-100%);z-index:2;}}.menu{display:flex;align-items:center;font-size:13px;list-style:none;}.menu-item{margin-right:15px;}.menu-link{-webkit-font-smoothing:initial;}@mediascreenand(max-width:414px){.menu{display:block;font-size:30px;padding-left:0;}.menu-item{margin-right:initial;}.menu-link{-webkit-font-smoothing:initial;display:block;padding:15px;text-align:center;}}.menu-trigger{display:none;transition:all.4s;box-sizing:border-box;position:relative;width:40px;height:32px;z-index:3;}@mediascreenand(max-width:414px){.menu-trigger{display:inline-block;}}.menu-triggerspan{display:inline-block;transition:all.4s;box-sizing:border-box;position:absolute;left:0;width:100%;height:4px;background-color:white;border-radius:4px;}.menu-triggerspan:nth-of-type(1){top:0;}.menu-triggerspan:nth-of-type(2){top:14px;}.menu-triggerspan:nth-of-type(3){bottom:0;}.menu-trigger.activespan:nth-of-type(1){transform:translateY(12px)rotate(-45deg);}.menu-trigger.activespan:nth-of-type(2){opacity:0;}.menu-trigger.activespan:nth-of-type(3){transform:translateY(-15px)rotate(45deg);}.hero{background-image:url("../images/hero.jpg");background-attachment:fixed;background-position:center;background-size:cover;background-repeat:no-repeat;height:700px;display:flex;justify-content:center;align-items:center;}.hero-title{font-size:50px;font-family:"Amatic SC",cursive;color:#fff;text-shadow:0020px#C0C0C0,0050pxrgba(0,0,0,0.8);}@mediascreenand(max-width:414px){.hero-title{text-align:center;}}.herobr{display:none;}@mediascreenand(max-width:414px){.herobr{display:block;}}.container{width:980px;margin-left:auto;margin-right:auto;padding-top:80px;padding-bottom:120px;}@mediascreenand(max-width:414px){.container{width:100%;}}@mediascreenand(max-width:768px){.container{width:100%;}}.container-fluid{width:100%;}.container-title{/* font-family: "Amatic SC", cursive;*/text-align:center;font-size:30px;margin-bottom:40px;}@mediascreenand(max-width:414px){.container-title{width:70%;margin-left:auto;margin-right:auto;}}@mediascreenand(max-width:768px){.container-title{width:80%;margin-left:auto;margin-right:auto;}}@mediascreenand(max-width:414px){.container-body{padding-left:15px;padding-right:15px;}}.container-ornament.container-titlespan{display:inline-block;background:#fff;padding:010px;position:relative;z-index:1;}.container-ornament.container-title:before,.container-ornament.container-title:after{border-top:1pxsolid#2e1f1a;content:"";display:block;position:relative;z-index:0;}.container-ornament.container-title:before{top:28px;}.container-ornament.container-title:after{top:-28px;}.container-ornament.container-title-lightGrayspan{background:#f8f7fc;}.news{width:70%;height:60px;overflow-y:scroll;margin:0auto;border-radius:5px;background:#f8f7fc;padding:15px20px;}.news-item{margin-bottom:5px;}.news-date{color:#e37b89;font-weight:bold;font-family:"Amatic SC",cursive;-webkit-font-smoothing:initial;margin-right:10px;}.news-title{font-size:14px;}.panel{box-sizing:border-box;background:#fff;position:relative;transition:.5s;}.panel-hover{display:inline-block;transition:.5s;}.panel-hover:hover{transform:scale(1.03);box-shadow:0010pxrgba(0,0,0,0.3);transition:.5s;}.panel-border{border-radius:10px;border:5pxsolid#CCCCCC;}.panel-head,.panel-foot{padding:10px;}.panel-head{text-align:center;height:65px;color:#777777;}.panel-active{border:5pxsolid#e3a8b1;}.panel-badge{background:#e37b89;color:#fff;position:absolute;top:-20px;right:-20px;border-radius:60px;width:60px;height:60px;text-align:center;line-height:1.3em;padding:15px0;box-sizing:border-box;font-size:12px;transform:rotate(15deg);}@mediascreenand(max-width:414px){.panel-badge{top:-20px;right:-13px;}}.panel-group{margin-right:-15px;}.panel-group-float{overflow:hidden;}.panel-group-flex{display:flex;flex-wrap:wrap;}.panel-group.panel{float:left;margin-right:15px;margin-bottom:15px;box-sizing:border-box;}.panel-staff{width:calc(25%-15px);}@mediascreenand(max-width:414px){.panel-staff{width:calc(50%-15px);}}.panel-cource{width:calc(33.3%-15px);}@mediascreenand(max-width:414px){.panel-cource{width:100%;margin:0auto15pxauto;}}.service{box-sizing:border-box;background:#fff;position:relative;transition:.5s;}.service-border{border-radius:10px;border:5pxsolidwhite;}.service-head,.service-foot{padding:10px;}.service-foot-group{display:flex;flex-wrap:wrap;margin-bottom:15px;}.service-foot-group-flex{width:45%;height:38px;padding-left:15px;margin-bottom:10px;}.service-foot-title{margin-bottom:5px;font-weight:bold;margin-bottom:10px;}.service-head{text-align:center;height:65px;color:#777777;}.service-group-float{overflow:hidden;}.service-group-flex{height:900px;display:flex;flex-direction:column;}.service-group.panel{float:left;margin-top:20px;margin-bottom:15px;box-sizing:border-box;}.service-cource{width:80%;margin-top:20px;margin:auto;}@mediascreenand(max-width:414px){.service-cource{width:100%;margin:0auto15pxauto;}}.form{width:100%;}.form-m{width:60%;margin-left:auto;margin-right:auto;}@mediascreenand(max-width:414px){.form-m{width:100%;}}.input{display:block;margin-bottom:10px;border:3pxsolid#f6f5f4;border-radius:4px;outline:none;height:40px;font-size:18px;color:#777;box-sizing:border-box;}.input-l{padding:5px10px;width:100%;}.input:focus{border:3pxsolid#ABDCFF;}.input-textarea{height:200px;}.input-invalid{border:1pxsolid#f50000;}::placeholder{color:#ccc;}.btn{border:none;cursor:pointer;border-radius:5px;box-sizing:border-box;transition:.3s;box-shadow:0010pxrgba(0,0,0,0.2);}.btn:hover{transform:translateY(-3px);transition:.3s;box-shadow:0020pxrgba(0,0,0,0.2);}.btn-corp{color:#fff;background:#90979f;/* fallback for old browsers */background:-webkit-linear-gradient(toright,#E3E3E3,#90979f);/* Chrome 10-25, Safari 5.1-6 */background:linear-gradient(toright,#E3E3E3,#90979f);/* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */}.btn-l{padding:15px30px;width:100%;font-size:18px;}.footer{background:#555;color:#fff;display:flex;align-items:center;justify-content:center;height:80px;}@mediascreenand(max-width:414px){.footer{font-size:11px;}}.bgColor-lightGray{background:#F5F5F5;box-shadow:0px0px8px2px#dddinset;}.mb-xxl{margin-bottom:30px;}.ft-corp{font-size:23px;margin:3auto;line-height:65px;}.ft-center{font-size:23px;display:flex;justify-content:center;align-items:center;}.td{width:70%;}table{margin:0;}.th{text-align:left;}.Required{color:red;font-size:13px;}@mediascreenand(min-width:414px){thbr{display:none;}}.Required-title{padding-top:20px;text-align:center;}.err_msg{color:#ff4d4b;}