페이지에서 '문의 양식' 만들기
문의 양식을 만들기 전에 블로그 ID를 가져와서 페이지에 ContactForm 스크립트를
복사 붙여넣기하는 등 몇 가지 준비해야 할 사항이 있습니다.
1 단계 : 블로그 ID 가져오기
Blogger 대시보드 페이지에서 주소 표시줄을 보면 다음과 같은 URL을 찾을 수
있습니다.
https://www.blogger.com/blog/posts/0000000000000000000
위의 URL에 표시된 부분은 블로그 ID입니다. 나중에
ContactForm 스크립트를 활성화하는 데 필요하므로 먼저 해당 ID를
복사합니다.
2 단계 : 새 페이지 만들기
새 페이지를 만드는 방법을 알고 있다고 가정합니다. 다음으로 할 일은 제공된
게시물 템플릿을 사용하는 것입니다.
Contact Form.txt를 다운로드합니다.- 텍스트 파일을 열어 기존 코드를 모두 복사합니다.
Blogger 게시물 편집기에서
>- 이전에 복사한 모든 코드를 게시물에 붙여넣습니다.
Contact Form.txt
2kb
class="button"
aria-label="Download"
href="https://drive.google.com/uc?export=download&id=1REovwo0pyYDmTM7iqL5W8Esohjuatw3O"
rel="noreferrer"
target="_blank"
> >
문의하기 페이지가 제대로 작동하려면 ContactForm 스크립트에 블로그 ID와
블로그 URL을 추가하세요. 어떤 부분을 변경해야 하는지 쉽게 찾을 수 있도록
표시했습니다.
><script>/*<![CDATA[*/ if (typeof(BLOG_attachCsiOnload) != 'undefined' && BLOG_attachCsiOnload != null) { window['blogger_templates_experiment_id'] = "templatesV1";window['blogger_blog_id'] = '0000000000000000000';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogID\0000000000000000000','//www.yourDomain.com/','0000000000000000000'); _WidgetManager._RegisterWidget('_ContactFormView', new _WidgetInfo('ContactForm1', 'footer1', null, document.getElementById('ContactForm1'), {'contactFormMessageSendingMsg': 'Sending...', 'contactFormMessageSentMsg': 'Your message has been sent.', 'contactFormMessageNotSentMsg': 'Message could not be sent. Please try again later.', 'contactFormInvalidEmailMsg': 'A valid email address is required.', 'contactFormEmptyMessageMsg': 'Message field cannot be empty.', 'title': 'Contact Form', 'blogId': '0000000000000000000', ... /*]]>*/</script>
설명
000000000000000000— 자신의 블로그 ID로 바꾸십시오. 위의
스크립트에는 대략 4개의 유사한 코드가 있습니다.
www.your_domain.com— 블로그 URL로 교체(http / https 제외)
Sending...— 메시지 전송 중 알림(선택 사항)
Your message has been sent.: 메시지 전송됨 알림
Message could not be sent. Please try again later.: 메시지
전송되지 않음 알림(선택 사항)
A valid email address is required.: 잘못된 이메일 알림
Message field cannot be empty.: 메시지 본문이 비어 있을 때
알림(선택 사항)
올바르게 코드를 작성했다면 Contact Us 페이지가 정상적으로 작동합니다. 그렇지
않다면 블로그 ID 또는 URL을 작성하는 데 약간의 문제가 발생했을 수도 있습니다.
메시지는 어디로 전송됩니까?
이 ContactForm 양식의 모든 메시지는 등록된 이메일 또는 Blogger 로그인에 사용된
이메일로 전송됩니다. Gmail을 열고 업데이트 탭을 확인하세요. 찾을 수 없으면
메일이 스팸 폴더로 이동했을 가능성이 큽니다.
method="post"
target="_blank"
style="margin-top:auto;margin-bottom:auto;"
>
value="<p>적용이 잘 되었나요? <a href="https://urliveblogger.blogspot.com/2021/04/create-contact-page.html">✔</a> <a href="https://urliveblogger.blogspot.com/p/ask-question.html" style="color:red;">✘</a></p>
<div class='ContactForm' id='ContactForm1'>
<form name='contact-form'>
<div class='input-area'>
<label for='ContactForm1_contact-form-name'>Name</label><input class='contact-form-name' id='ContactForm1_contact-form-name' name='name' type='text' value='' />
</div>
<div class='input-area'>
<label for='ContactForm1_contact-form-email'>Email <span>*</span></label><input class='contact-form-email' id='ContactForm1_contact-form-email' name='email' type='text' value='' />
</div>
<div class='input-area'>
<label for='ContactForm1_contact-form-email-message'>Message <span>*</span></label><textarea class='contact-form-email-message' id='ContactForm1_contact-form-email-message' name='email-message'></textarea>
</div>
<div class='input-area'>
<input class='contact-form-button contact-form-button-submit' id='ContactForm1_contact-form-submit' type='button' value='Submit' />
</div>
<div class='notif-area'>
<p class='contact-form-error-message' id='ContactForm1_contact-form-error-message'></p>
<p class='contact-form-success-message' id='ContactForm1_contact-form-success-message'></p>
</div>
</form>
</div>
<script src='https://www.blogger.com/static/v1/widgets/2271878333-widgets.js'></script>
<script>//<![CDATA[
if (typeof(BLOG_attachCsiOnload) != 'undefined' && BLOG_attachCsiOnload != null) { window['blogger_templates_experiment_id'] = "templatesV1";window['blogger_blog_id'] = '000000000000000000';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d000000000000000000','//www.your_domain.com/','000000000000000000');
_WidgetManager._RegisterWidget('_ContactFormView', new _WidgetInfo('ContactForm1', 'footer1', null, document.getElementById('ContactForm1'), {'contactFormMessageSendingMsg': 'Sending...', 'contactFormMessageSentMsg': 'Your message has been sent.', 'contactFormMessageNotSentMsg': 'Message could not be sent. Please try again later.', 'contactFormInvalidEmailMsg': 'A valid email address is required.', 'contactFormEmptyMessageMsg': 'Message field cannot be empty.', 'title': 'Contact Form', 'blogId': '000000000000000000', 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));
//]]></script>
<style>
.ContactForm input[type=text], .ContactForm input[type=email], .ContactForm textarea {
display: block;
width: 100%;
box-sizing: border-box;
border: 1px solid rgba(230,230,230,1);
border-radius: 3px;
outline: 0;
padding: 15px 15px;
margin-bottom: 15px;
}
.ContactForm{
font-size: 14px;
margin-top: 30px;
max-width: 480px
}
.ContactForm form > *:not(:last-child){
margin-bottom: 15px;
}
.ContactForm label{
display: inline-block;
margin-bottom: 8px;
}
.ContactForm label span {
color: red;
font-size: 90%;
}
.ContactForm div p{
display: flex;
align-items: center;
margin-bottom: 0px;
}
</style>"
type="hidden"
/>
value="https://urliveblogger.blogspot.com/p/tryityourself.html"
type="hidden"
/>
value="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwc3kJgV4VdSW7N6voGTWToRFe2oVK2XUw6HTaobmItZJUC9MUiN95Tl3HKdgtUHKFLreOWW7HQ70zLhsNavJKtl6VLrZICSJjjjNE4BinRS9MssfWPUvYlITeSpkc1-iPUVO-mCsTF58/s0/product-experts-blogger-sfc-746x359.png"
type="hidden"
/>
value="내 블로그에 추가하기"
type="submit"
style="padding:12px 24px;cursor:pointer;"
/>
href="https://urliveblogger.blogspot.com/p/ask-question.html"
>미리 보기 >