자 제가 만든 양식을 한번 보실까요??
Blogger 블로그에 문의 양식을 추가하는 것은 그렇게 어렵지 않습니다.
Blogger의 기본 위젯 목록에 Blogger 문의 양식 위젯을 사용하여 페이지에서 멋진 Blogger 문의 양식을 추가하는 방법에 대해 알아 보겠습니다.
Blogger의 기본 문의 양식 위젯은 매우 가볍습니다. 시작하겠습니다.
먼저 블로거 연락처 양식 위젯을 블로거 블로그 아무곳이나에 추가해야합니다. 그러면 연락처 양식 기능이 활성화 됩니다. 그렇지 않으면 연락처 양식에서 이메일을 받지 못합니다.
1. 블로거 계정에 로그인하십시오.
2. Blogger 대시 보드 이동하십시오 .
3. 왼쪽 메뉴에서 레이아웃 섹션을 선택하십시오 .
4. 가젯 추가 클릭 .
5. 가젯더보기 다음 문의하기 양식의 버튼을 클릭 한 다음 저장 하십시오.
블로그에 Blogger 문의 양식 위젯을 추가했습니다. 이제 우리는 정적 인 " 문의하기 "페이지 에서 세련된 문의 양식을 만들 예정이므로 이 기본 블로거 연락 위젯을 숨겨야 합니다.
이 기본 Blogger 문의 양식을 숨기려면 테마 로 이동하여 HTML 수정 버튼을 클릭하십시오 '.
이제 스타일 종료 코드를 찾으십시오 . : ]]></ b : skin>
이 작은 밑에 보이는 코드 CSS 코드를 바로 위에 붙여 넣으십시오 .
템플릿을 저장 하면 완료됩니다.
블로그를 새로 고침하면 기본 연락처 위젯이 사라집니다.
code
div#ContactForm1 {
display: none !important;
}
사용자 정의 블로거 문의 양식에서 일부 글꼴 아이콘을 사용했습니다.
따라서 이 스타일 시트를 블로그에 삽입해야합니다. 이것을하기 위해서는:
코드 :
<link href = "// netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css"rel = "stylesheet"/>
<link href = "// netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css"rel = "stylesheet"/>
" 템플릿 저장 "버튼을 클릭하십시오.
이제 우리는 눈길을 끄는 Contact us 양식을 적용하기 위해 블로거를위한 정적 연락처 페이지를 만들 수 있습니다. 이렇게하려면 블로그에 연락처 페이지를 만들어야합니다.
연락처 페이지는이 방법으로 만들 수 있습니다.
- 페이지 섹션으로 이동하여 아래와 같이 새 페이지 버튼을 클릭하십시오 .
- 문의양식 이나 contact 페이지 제목을 작성 하십시오 .
- HTML 탭을 클릭 하여이 페이지를 HTML 모드 로 가져 오십시오 .
- 이제 페이지 설정 옵션으로 이동하십시오 . 그것을 클릭하십시오.
- 옵션 선택 " 그대로표시, 숨김". 완료 버튼을 클릭하십시오 .
- 아래 목록에서 가장 좋아하는 Blogger 문의 양식 디자인을 선택하십시오. 위에 표시된 대로 코드를 복사 하여 연락처 페이지에 붙여 넣으십시오. 페이지를 게시하여 보세요.
1. 블로그 양식 디자인1
이것은 아름답고 반응이 빠른 블로거 문의 양식입니다. 심플하고 매력적인 디자인입니다. 또한이 양식에는 몇 가지 추가 기능이 있습니다. 클릭 한 번으로 텍스트 영역을 비우게하는 명확한 버튼이 있습니다. 소셜 페이지에 대해 사용자에게 알리는 몇 가지 소셜 버튼이 있습니다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
|
<style>
.tb-contact-form-widget{background-color:#A4A4A4;background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwey-_8DI5Td5C96fdgyH24mvbVzJpqxBm3yzfN7jUfwVPvpd-3RXY-kahdfs02DJgwgrOkREb-lloh4fgD-6MhZX2axsMfFn7R9WEwLQKC1uAgsnWubAp0cr6BOq1rWPUXu7OmhGxqlhG/s1600/to-contact-img-2.jpg");background-repeat: repeat;background-position: 100% 100%;color:white;padding:25px;}
.srbtn{display:inline-block;}
.cform-button, .btn-reset{background-color:#f1f1f1;padding:5px 30px;}
.cform-button:hover {background-color: #2980b9;color: #fff;}
.btn-reset:hover {background-color: red;color: #fff;}
.tb-contact-form-widget h3{text-align:center;margin:20px 0;padding:10px 0;border-top: 1px dotted #f5f5f5;}
.c-form-name, .c-form-email { width: 50%; max-width: 50%; margin-bottom: 10px;padding: 10px;border: 1px solid #CCC;border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-moz-box-shadow: 0 1px 1px #ccc inset, 0 1px 0 #fff;
-webkit-box-shadow: 0 1px 1px #CCC inset, 0 1px 0 #FFF;
box-shadow: 0 1px 1px #CCC inset, 0 1px 0 #FFF;}
.c-form-email-message { width: 95%; max-width: 95%; margin-bottom: 10px;padding: 10px;border: 1px solid #CCC;border-radius: 5px;box-shadow: 0 1px 1px #CCC inset, 0 1px 0 #FFF;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-moz-box-shadow: 0 1px 1px #ccc inset, 0 1px 0 #fff;
-webkit-box-shadow: 0 1px 1px #CCC inset, 0 1px 0 #FFF;}
.c-form-name, .c-form-email, .c-form-email-message input:focus{background-color: #FFF;box-shadow: 0 0 0 1px #E8C291 inset;border-color: #E8C291;outline: none;
-moz-box-shadow: 0 0 0 1px #e8c291 inset;
-webkit-box-shadow: 0 0 0 1px #E8C291 inset;}
.b-social-buttons{list-style-type:none;text-align:center;}
.b-social-buttons li{display:inline-block;padding:15px;background-color:#f5f5f5;border-radius:5px;}
.b-social-buttons li a{color:#333;text-decoration:none;}
#ContactForm1_contact-form-success-message, #ContactForm1_contact-form-error-message{width:100%;margin-top:35px;}
</style>
<div class="tb-contact-form-widget"> <form name="contact-form"> <div class="form-name"><span><i class="fa fa-pencil-square-o"></i> Your Name: </span><br /><input class="c-form-name" id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" /></div> <div class="form-email"><span><i class="fa fa-envelope-o"></i> E-mail Address *: </span><br /><input class="c-form-email" id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" /></div><div style="clear: both;"></div><div class="form-message"> <span><i class="fa fa-keyboard-o"></i> Message *:</span><br />
<textarea class="c-form-email-message" cols="25" id="ContactForm1_contact-form-email-message" name="email-message" rows="5"></textarea><div class="srbtn"><input class="cform-button" id="ContactForm1_contact-form-submit" type="button" value="Submit" /><input type="reset" class="btn-reset" value="Clear" /></div><div class="contact-form-error-message" id="ContactForm1_contact-form-error-message"> </div> <div class="contact-form-success-message" id="ContactForm1_contact-form-success-message"> </div>
<h3>Our Social Sites</h3>
<ul class="b-social-buttons">
<li><a href="#" class="btn-lg"><i class="fa fa-twitter"> <span class="network-name">Twitter</span></i></a></li>
<li><a href="#" class="btn-lg"><i class="fa fa-facebook"> <span class="network-name">Facebook</span></i></a></li>
<li><a href="#" class="btn-lg"><i class="fa fa-youtube-play"> <span class="network-name">Youtube</span></i></a></li>
</ul></div></form></div>
| cs |
2 블로그 양식 디자인2
1
|
<style> .contact-form-widget {color: #000;margin-left:auto;max-width: 100%;margin-right:auto;padding: 0px;width: 600px;} .form_name, .form_email {float:left;width:48%;padding:5px;} .form_message {padding:5px;} .contact-form-name, .contact-form-email {font-size:16px;width: 100%;height:40px;max-width: 100%;margin-bottom: 10px;padding:10px;} .contact-form-email-message {height:100px;width:100%;font-size:16px;max-width: 100%;padding:10px;margin-bottom:10px;} .contact-form-button-submit {font-size:16px;height:30px;border-color: #C1C1C1;width: 20%;background: #E3E3E3;max-width: 20%;color: #585858;margin-bottom: 10px;} .contact-form-button-submit:hover{color: #000000;border: 1px solid #FAFAFA;background: #ffffff;} </style> <div class="contact-form-widget"> <div class="form"> <form name="contact-form"> <div class="form_name"> Your Name: <input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" /></div> <div class="form_email"> E-mail Address *: <input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" /></div> <div style="clear: both;"> </div> <div class="form_message"> Message *: <textarea class="contact-form-email-message" cols="25" id="ContactForm1_contact-form-email-message" name="email-message" rows="5"></textarea> <input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" type="button" value="Submit" /> <br /> <div class="contact-form-error-message" id="ContactForm1_contact-form-error-message"> </div> <div class="contact-form-success-message" id="ContactForm1_contact-form-success-message"> </div> </div> </form> </div> </div>
| cs |
3 블로그 양식 디자인3
1
|
<style> .contact-form-widget { -moz-border-radius: 5px; -webkit-border-radius: 5px; background-color: #eaeaea; background: -moz-linear-gradient(top, #ffffff, #eaeaea); background: -webkit-gradient(linear, left top, left bottom, color-stop(0.0, #ffffff), color-stop(1.0, #eaeaea)); color: #444; border: 1px solid #cacaca; margin: 0 0 25px; max-width: 96%; font-size: 1.4em; padding: 8px 10px; } .contact-form-name, .contact-form-email { width: 50%; max-width: 50%; margin-bottom: 10px; } .contact-form-email-message { width: 100%; max-width: 100%; margin-bottom: 10px; } </style> <div class='widget ContactForm' id='ContactForm2'> <div class='contact-form-widget'> <div class='form'> <form name='contact-form'> <p>Name</p> <input class='contact-form-name' id='ContactForm1_contact-form-name' name='name' size='30' type='text' value=''/> <p>E-mail *</p> <input class='contact-form-email' id='ContactForm1_contact-form-email' name='email' size='30' type='text' value=''/> <p>Message *</p> <textarea class='contact-form-email-message' cols='25' id='ContactForm1_contact-form-email-message' name='email-message' rows='5'></textarea> <input class='contact-form-button contact-form-button-submit' id='ContactForm1_contact-form-submit' type='button' value='Submit'/> <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> </form> </div> </div> </div>
| cs |
4 블로그 양식 디자인4
1
|
<form name="contact-form"><span><i class="fa fa-pencil-square-o"></i> Name </span><br /> <input id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" /> <br /> <br /> <span><i class="fa fa-envelope-o"></i> Email Address <span style="color: #f56954; font-size: x-small; font-weight: bold;">important</span></span> <br /> <input id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" /> <br /> <br /> <span><i class="fa fa-keyboard-o"></i> Content <span style="color: #f56954; font-size: x-small; font-weight: bold;">important</span></span><br /> <textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" rows="5"></textarea> <br /> <input id="ContactForm1_contact-form-submit" type="button" value="Send" /> <br /> <div style="max-width: 222px; text-align: center; width: 100%;"><div id="ContactForm1_contact-form-error-message"></div><div id="ContactForm1_contact-form-success-message"></div></div></form><br /><style scoped="" type="text/css"> #comments,.post_meta,#blog-pager {display:none;} #ContactForm1_contact-form-name, #ContactForm1_contact-form-email{ height:auto;margin:5px auto;padding:10px;background:#fafafa;color:#444;border:1px solid #ccc;border-radius:3px;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;transition:all 0.5s ease-out;} #ContactForm1_contact-form-email-message{width:95%;height:175px;margin:5px 0;padding:10px;background:#fafafa;color:#444;font-family:'Open Sans',sans-serif;border:1px solid #ccc;border-radius:3px;transition:all 0.5s ease-out;} #ContactForm1_contact-form-name:focus, #ContactForm1_contact-form-email:focus, #ContactForm1_contact-form-email-message:focus{outline:none;background:#fff;color:#444;border-color:rgba(81,203,238,1);box-shadow:0 0 5px rgba(81,203,238,0.7);} #ContactForm1_contact-form-submit{font-family:'Open Sans';float:left;background:#cf4d35;color:#fff;margin:10px auto;vertical-align:middle;cursor:pointer;padding:10px 18px!important;font-weight:700;font-size:14px;text-align:center;text-transform:uppercase;letter-spacing:.5px;border-radius:4px;border:0;transition:all .8s ease} #ContactForm1_contact-form-submit:hover {background:#e45a40;color:#fff;} #ContactForm1_contact-form-error-message, #ContactForm1_contact-form-success-message{width:100%;margin-top:35px;} .contact-form-error-message-with-border {background:#f6f6f6;border:none;box-shadow:none;color:#444;padding:5px 0;} .contact-form-success-message {background:#4fc3f7;border:none;box-shadow:none;color:#fff;} img.contact-form-cross {line-height:40px;margin-left:5px;} @media only screen and (max-width:640px){ #ContactForm1_contact-form-name, #ContactForm1_contact-form-email,#ContactForm1_contact-form-submit{width:100%;}} </style>
| cs |
){kind=link}