Files
AriWeb-Suite/modules/webmaker/templates/contact-widget.html

21 lines
2.8 KiB
HTML

<!-- webmaker-contact-widget v2 — 표준 문의 접수 위젯. data-* 속성과 script 는 수정하지 말고, 겉모습만 CSS 클래스(.wm-contact …)로 꾸밉니다.
(v1.3.16) 화면 글자는 사이트 언어로 채워져 있고, 상태 메시지는 data-wm-msg(기본 언어)·페이지 번역표(data-wm-i18n, 다른 언어)에서 가져옵니다. -->
<section class="wm-contact" data-wm-contact data-endpoint="{{ENDPOINT}}" data-site="{{SITE_ID}}" data-kind="{{KIND}}" data-wm-msg='{{msgs:common.requiredCheck,common.sending,common.receivedContact,common.sendFailed,common.networkFailed}}'>
<form class="wm-contact-form" novalidate>
<div class="wm-row">
<label>{{t:common.name}}<input name="name" required maxlength="80" autocomplete="name"></label>
<label>{{t:common.email}}<input name="email" type="email" required maxlength="120" autocomplete="email"></label>
</div>
<div class="wm-row">
<label>{{t:common.phone}}<input name="phone" maxlength="40" autocomplete="tel"></label>
<label>{{t:common.subject}}<input name="subject" maxlength="120"></label>
</div>
<label>{{MESSAGE_LABEL}}<textarea name="message" rows="5" required maxlength="5000"></textarea></label>
<input name="website" tabindex="-1" autocomplete="off" style="position:absolute;left:-9999px;opacity:0" aria-hidden="true">
<label class="wm-agree"><input type="checkbox" name="agree" required> <span data-wm-legal="consent">{{t:consent.privacy}}</span></label>
<button type="submit" class="wm-submit">{{BUTTON_LABEL}}</button>
<p class="wm-status" aria-live="polite"></p>
</form>
</section>
<script>(function(){var D={};try{D=JSON.parse(document.querySelector('script[data-wm-i18n]').textContent)}catch(x){}var lang=document.documentElement.getAttribute('lang')||'ko';document.querySelectorAll('[data-wm-contact]').forEach(function(w){if(w.__wm)return;w.__wm=1;var M={};try{M=JSON.parse(w.getAttribute('data-wm-msg')||'{}')}catch(x){}var L=function(k){return D[k]||M[k]||k};var f=w.querySelector('form'),s=w.querySelector('.wm-status'),b=w.querySelector('.wm-submit');f.addEventListener('submit',async function(e){e.preventDefault();if(!f.checkValidity()){s.textContent=L('common.requiredCheck');return;}var d={};new FormData(f).forEach(function(v,k){d[k]=v});d.kind=w.dataset.kind||'contact';d.page=location.href;d.lang=lang;b.disabled=true;s.textContent=L('common.sending');try{var r=await fetch(w.dataset.endpoint,{method:'POST',headers:{'Content-Type':'application/json','X-WM-Lang':lang},body:JSON.stringify(d)});var j=await r.json().catch(function(){return{}});if(r.ok&&j.ok){s.textContent=j.message||L('common.receivedContact');f.reset();}else{s.textContent=(j&&j.error)||L('common.sendFailed');}}catch(x){s.textContent=L('common.networkFailed');}b.disabled=false;});});})();</script>