Membuat Form Contact Blogger

Banyak cara membuat form kontak hubungi saya untuk menyambungkan jika ada yang ini menghubungi pemilik situs melalui edit html dan css maupun yang lebih simple lagi edit layout tambahkan gadget javascript dan halaman statis.
Baiklah kita mulai membahas membuat form kontak dari halaman statiskarena sangatlah mudah

1. Buka dasboard blogger.
2. Pilih halaman.
3. Buat halaman baru dan pilih HTML jangan compose.
4. Copy dan paste kode di bawah ini kedalam halaman baru yang sudah kita buat tadi.

<input id="ContactForm1_contact-form-name" name="name" placeholder="Name *" size="30" type="text" value="">
<input id="ContactForm1_contact-form-email" name="email" size="30" placeholder="Email *" type="text" value="">
<textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder="Message *" rows="5"></textarea>
<input id="ContactForm1_contact-form-submit" type="button" value="Send Message">  
<div style="max-width: 222px; text-align: center; width: 90%;"><div id="ContactForm1_contact-form-error-message"></div><div id="ContactForm1_contact-form-success-message"></div></div></form><style scoped="" type="text/css">
#comments,.post_meta,#blog-pager{display:none}
form{color:#666}
#kontak-seo{margin:auto;max-width:90%}
#ContactForm1_contact-form-name,#ContactForm1_contact-form-email{height:auto;margin:5px auto;padding:15px 12px;background:#fff;color:#444;border:1px solid rgba(0,0,0,.14);box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);border-radius:3px;width:90%;min-width:90%;transition:all 0.5s ease-out}
#ContactForm1_contact-form-email-message{width:90%;height:50px;margin:5px 0;padding:15px 12px;background:#fff;color:#444;border:1px solid rgba(0,0,0,.14);box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);border-radius:3px;resize:none;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:#66afe9;box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,0.6)}
#ContactForm1_contact-form-submit{float:left;background:#ff5722;margin:auto;vertical-align:middle;cursor:pointer;padding:12px 20px;font-size:14px;text-align:center;letter-spacing:.5px;border:0;width:90%;max-width:140px;border-radius:3px;color:#fff;font-weight:500;transition:all .8s ease}
#ContactForm1_contact-form-submit:hover{background:#3498db;color:#fff;}
#ContactForm1_contact-form-error-message,#ContactForm1_contact-form-success-message{width:90%;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}
.post-body input{width:initial}
.footer-handap-wrapper {display:none;}
.footer {margin-top:15px}
@media only screen and (max-width:640px){
#ContactForm1_contact-form-name, #ContactForm1_contact-form-email,#ContactForm1_contact-form-submit{width:90%;}}
.contact_layout{text-align:center;position:fixed;top:0;left:0;bottom:0;right:0;background:rgba(0,0,0,.8);z-index:99999}
.contact_message{width:50%;background:#fff;border-radius:5px;padding:20px;border:1px solid transparent;text-align:center;color:#333;position:absolute;top:30%;left:50%;margin-left:-25%;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
.contact_message:before{content:"f164";font-family:FontAwesome;font-weight:500;font-size:30px;display:block;margin-bottom:10px}
@media screen and (max-width:768px){.contact_message{width:90%!important;margin-left:-45%!important}}
</style><br>
<script type="text/javascript">
//<![CDATA[
if (window.jstiming) window.jstiming.load.tick('widgetJsBefore');
//]]>
</script>
<script src="https://www.blogger.com/static/v1/widgets/2271878333-widgets.js" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
if (typeof(BLOG_attachCsiOnload) != 'undefined' && BLOG_attachCsiOnload != null) { window['blogger_templates_experiment_id'] = "templatesV1";window['blogger_blog_id'] ='ID-BLOG-ANDA';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogID\ID-BLOG-ANDA','//sastracode.blogspot.com/','ID-BLOG-ANDA');
_WidgetManager._RegisterWidget("_ContactFormView", new _WidgetInfo("ContactForm1", "footer1", null, document.getElementById("ContactForm1"), {"contactFormMessageSendingMsg": "Sending...", "contactFormMessageSentMsg": "<div class='contact_layout'><div class='contact_message'><b>Your message has been sent</b>.<br/>Maaf sedang sibuk balasan kami agak sedikit lambat, tapi admin kami berusaha merespon anda secepatnya.</div></div><br/>", "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": "ID-BLOG-ANDA", "contactFormNameMsg": "Name", "contactFormEmailMsg": "Email", "contactFormMessageMsg": "Message", "contactFormSendMsg": "Send", "submitUrl": "https://www.blogger.com/contact-form.do"}, "displayModeFull"));
//]]>
</script>
<div class="clear"></div></a>
<b:if cond='data:blog.pageType == "static_page"'>
<style type="text/css">.blog-sidebar {display: none;}
.blogger-post-item, .blogger-post-static_page {height:auto;width:auto;background-color:#fff;}
.blogger-post-item .blogger-post-body-area, .blogger-post-static_page .blogger-post-body-area, .blog-main {width:auto;}
.breadcrumbs {display:none;}
.blog-footer {text-align:center;border-top:0px solid transparent;background-color:transparent;}
</style>
</b:if>

Ganti yang berwarna
//sastracode.blogspot.com/ ganti dengan url situs anda.
ID-BLOG-ANDA Ganti dengan id-blog anda.
Cara mendapatkan ID-BLOG adalah di url saat kita berada di editor blogger

Demikian cara membuat form kontak hubungi saya

DEMO

Semoga bermanfaat.

Baca Juga

Related Posts