Cara Membuat Halaman Kontak Form di Blog HTMLy
Sebagai pemilik blog mempunyai halaman kontak adalah sesuatu hal yang penting.
Karena tidak bisa dipungkiri bahwa nantinya akan ada yang menghubungi anda melalui halaman kontak.
Entah sekedar bertanya atau untuk urusan kerjasama bisnis dengan blog yang anda miliki.
Untuk membuat halaman kontak sebaiknya tidak hanya ada informasi alamat kontak yang bisa dihubungi seperti sosial media, email atau nomor whatapps tapi juga memiliki opsi form kontak yang lebih praktis dan cepat diakses oleh pengunjung.
Dengan form kontak pengunjung bisa lebih cepat untuk menghubungi kita, cukup dengan mengisi form dan mengirimkannya.
Nah kalau untuk wordpress mungkin kita bisa dengan mudah membuatnya dengan bantuan plugin ataupun kalau blogger kita bisa dengan widget contact form.
Lalu bagaimana dengan CMS HTMLy?
Membuat Halaman Form Kontak Untuk HTMLy Memanfaatkan Form Contact dari Blogger
Untuk mengakali ini semua dan disini kita akan memanfaatkan form kontak yang kita buat dari blogger yang nantinya akan kita iframe dalam halaman kontak blog HTMLy kita.
Cara ini lebih simpel dan sederhana dibandingkan harus membuat halaman .php sendiri untuk fungsi form kontak.
Membuat Blog Khusus Untuk Halaman Kontak di Blogger
Pertama kita masuk ke blogger.com dengan akun google (alamat email) yang akan dijadikan email masuk dari form kontak.
Misal saya ingin email masuk ke blabla@gmail.com maka saya login ke blogger dengan akun tersebut.
Setelah itu buat sebuah blog baru, dengan judul dan url terserah anda (ini hanya sebagai halaman yang akan kita iframe).
Setelah blog baru khusus halaman form kontak kita buat, masuk ke Tema.
Silakan pilih opsi Edit HTML, lalu copykan template dibawah ini:
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<HTML expr:dir='data:blog.languageDirection' lang='id'>
<head>
<meta charset='utf-8'/>
<meta content='width=device-width,minimum-scale=1,initial-scale=1' name='viewport'/>
<link as='script' href='https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js' rel='preload'/>
<link as='script' href='https://www.blogger.com/static/v1/widgets/2271878333-widgets.js' rel='preload'/>
<link as='font' crossorigin='' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.6.0/fonts/fontawesome-webfont.woff2?v=4.6.0' rel='preload' type='font/woff2'/>
<meta content='IE=9; IE=8; IE=7; IE=EDGE; chrome=1' http-equiv='X-UA-Compatible'/>
<b:if cond='data:blog.pageType == "index"'>
<title><data:blog.pageTitle/></title>
<b:else/>
<b:if cond='data:blog.pageType == "error_page"'>
<title>404: Page Not Found | <data:blog.title/></title>
<b:else/>
<title><data:blog.pageName/></title>
</b:if>
</b:if>
<meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>
<meta content='blogger' name='generator'/>
<link href='/favicon.ico' rel='icon' type='image/x-icon'/>
<link expr:href='data:view.url.canonical' rel='canonical'/>
<style type="text/css">
<!-- /*<b:skin><![CDATA[
#header-wrapper{width:100%;}
#main-wrapper{width:60%;float:left;}
#sidebar-wrapper{width:40%;float:right;}
ul,li{list-style: none;}
*/]]></b:skin>
<style type='text/css'>
/*<![CDATA[*/
@font-face{font-family:system;font-style:normal;font-weight:300;src:local(".SFNSText-Light"),local(".HelveticaNeueDeskInterface-Light"),local(".LucidaGrandeUI"),local("Ubuntu Light"),local("Segoe UI Light"),local("Roboto-Light"),local("DroidSans"),local("Tahoma")}
@font-face{font-family:system;font-style:normal;font-weight:400;src:local(".SFNSText-Regular"),local(".HelveticaNeueDeskInterface-Regular"),local(".LucidaGrandeUI"),local("Ubuntu"),local("Segoe UI"),local("Roboto-Regular"),local("DroidSans"),local("Tahoma")}
@font-face{font-family:system;font-style:normal;font-weight:700;src:local(".SFNSText-Bold"),local(".HelveticaNeueDeskInterface-Bold"),local(".LucidaGrandeUI"),local("Ubuntu Bold"),local("Roboto-Bold"),local("DroidSans-Bold"),local("Segoe UI Bold"),local("Tahoma Bold")}
html,body{height:400px;min-height:400px;overflow:hidden}
aside,footer,#navbar-iframe{height:0;visibility:hidden;display:none}
body{background:transparent;margin:0;font-family:"system";}
*{-moz-box-sizing: border-box;-webkit-box-sizing: border-box;box-sizing: border-box;}
#header-wrapper{width:100%;margin:0 auto;padding:0;height:0;overflow:hidden}
.content-wrapper{width:100%;max-width:100%;margin:0 auto;padding:0}
.outer-wrapper{margin:0;padding:0}
#main-wrapper{width:100%;margin:0 auto;padding:0;}
.post{position:relative;margin:0;padding:0}
.post h1,.post h2{font-size:1px;position:fixed;top:-10000px;left:-10000px}
.post-body{font-size:18px;font-weight:400;color:#555;line-height:1.3;padding:0}
.contact-form-box{width:100%;margin:0 auto;padding:0}
#contactForm .floating-label-form-group{font-family:"system";font-size:16px;position:relative;margin-bottom:0;padding-bottom:20px;border-bottom:1px solid #ddd}
#contactForm .floating-label-form-group:first-child{border-top:1px solid #ddd}
#contactForm .floating-label-form-group.floating-label-form-group-with-focus{position:relative}
#contactForm .floating-label-form-group:after,#contactForm .floating-label-form-group:before{position:absolute;bottom:-1px;width:0;height:2px;background-color:#2B0C93;content:"";transition:width .4s ease-in-out;display:block}
#contactForm .floating-label-form-group:before{right:50%}
#contactForm .floating-label-form-group:after{left:50%}
#contactForm .floating-label-form-group.floating-label-form-group-with-focus:after,#contactForm .floating-label-form-group.floating-label-form-group-with-focus:before{width:50%}
#contactForm .floating-label-form-group input,#contactForm .floating-label-form-group textarea{z-index:1;position:relative;padding-right:0;padding-left:0;border:none;border-radius:0;font-size:16px;font-family:"system";font-weight:400;background:0 0;box-shadow:none!important;resize:none}
#contactForm .floating-label-form-group label{display:block;z-index:0;position:relative;top:2em;margin:0;font-size:12px;font-family:"system";font-weight:300;line-height:1.764705882em;vertical-align:middle;vertical-align:baseline;opacity:0;-webkit-transition:top .3s ease,opacity .3s ease;-moz-transition:top .3s ease,opacity .3s ease;-ms-transition:top .3s ease,opacity .3s ease;transition:top .3s ease,opacity .3s ease}
#contactForm .floating-label-form-group::not(:first-child){padding-left:14px;border-left:1px solid #eee}
#contactForm .floating-label-form-group-with-value label{top:0;opacity:1}
#contactForm .floating-label-form-group-with-focus label{color:#2B0C93}
#contactForm textarea.form-control{height:auto}
#contactForm .form-control{display:block;width:100%;color:#555}
#contactForm input:active,#contactForm input:focus,#contactForm textarea:active,#contactForm textarea:focus{outline:0}
#contactForm .btn,#contactForm .contact-form-button-submit{font-family:"system";font-weight:700;text-transform:uppercase;font-size:18px;letter-spacing:1px;border-radius:0;padding:0 25px;height:51px;line-height:51px;color:#333;background-color:#fff;border:1px solid #ccc;cursor:pointer;margin:20px 0 0;background-image:none}
#contactForm .contact-form-button{height:51px;line-height:51px}
#contactForm .btn-default:focus,#contactForm .btn-default:hover,#contactForm .contact-form-button-submit:focus,#contactForm .contact-form-button-submit:hover{background-color:#2B0C93;border:1px solid #270b83;color:#fff}
.contact-form-error-message-with-border,.contact-form-success-message-with-border{background:#fff;border:1px solid #ddd;bottom:0;box-shadow:0 2px 4px rgba(0,0,0,.2);color:#666;font-size:16px;font-weight:400;line-height:30px;opacity:1;position:static;text-align:center;margin:20px 0 0}
.contact-form-cross{height:11px;margin:0 5px;vertical-align:0!important;width:11px;-moz-box-shadow:none!important;-webkit-box-shadow:none!important;-goog-ms-box-shadow:none!important;box-shadow:none!important}
.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:10%;left:50%;margin-left:-25%;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
.fa.fa-pull-left,.fa.pull-left{margin-right:.3em}.fa,.fa-stack{display:inline-block}.fa-fw,.fa-li{text-align:center}@font-face{font-family:FontAwesome;src:url(https://maxcdn.bootstrapcdn.com/font-awesome/4.6.0/fonts/fontawesome-webfont.woff2?v=4.6.0) format('woff2');font-display:swap;font-weight:400;font-style:normal}.fa{font:normal normal normal 14px/1 FontAwesome;font-size:inherit;text-rendering:auto;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.fa-lg{font-size:1.33333333em;line-height:.75em;vertical-align:-15%}.fa-2x{font-size:2em}.fa-3x{font-size:3em}.fa-4x{font-size:4em}.fa-5x{font-size:5em}.fa-fw{width:1.28571429em}.fa-ul{padding-left:0;margin-left:2.14285714em;list-style-type:none}.fa.fa-pull-right,.fa.pull-right{margin-left:.3em}.fa-ul>li{position:relative}.fa-li{position:absolute;left:-2.14285714em;width:2.14285714em;top:.14285714em}.fa-li.fa-lg{left:-1.85714286em}.fa-border{padding:.2em .25em .15em;border:.08em solid #eee;border-radius:.1em}.fa-pull-left{float:left}.fa-pull-right,.pull-right{float:right}.pull-left{float:left}.fa-spin{-webkit-animation:fa-spin 2s infinite linear;animation:fa-spin 2s infinite linear}.fa-pulse{-webkit-animation:fa-spin 1s infinite steps(8);animation:fa-spin 1s infinite steps(8)}@-webkit-keyframes fa-spin{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(359deg);transform:rotate(359deg)}}@keyframes fa-spin{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(359deg);transform:rotate(359deg)}}.fa-rotate-90{-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=1)";-webkit-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg)}.fa-rotate-180{-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=2)";-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg)}.fa-rotate-270{-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=3)";-webkit-transform:rotate(270deg);-ms-transform:rotate(270deg);transform:rotate(270deg)}.fa-flip-horizontal{-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1)";-webkit-transform:scale(-1,1);-ms-transform:scale(-1,1);transform:scale(-1,1)}.fa-flip-vertical{-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1)";-webkit-transform:scale(1,-1);-ms-transform:scale(1,-1);transform:scale(1,-1)}:root .fa-flip-horizontal,:root .fa-flip-vertical,:root .fa-rotate-180,:root .fa-rotate-270,:root .fa-rotate-90{filter:none}.fa-stack{position:relative;width:2em;height:2em;line-height:2em;vertical-align:middle}.fa-stack-1x,.fa-stack-2x{position:absolute;left:0;width:100%;text-align:center}.fa-stack-1x{line-height:inherit}.fa-stack-2x{font-size:2em}.fa-inverse{color:#fff}
.contact_message:before{content:"f164";font-family:FontAwesome;font-weight:500;font-size:30px;display:block;margin-bottom:10px}
form{display:block;margin-top:0;padding-right:0}
@media screen and (max-width:768px){.contact_message{width:90%!important;margin-left:-45%!important}
.contact-form-box{width:100%}
}
/*]]>*/
</style>
</head><!--<head/>-->
<body>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='halamankontak (Header)' type='Header' version='1'>
<b:widget-settings>
<b:widget-setting name='displayUrl'/>
<b:widget-setting name='displayHeight'>0</b:widget-setting>
<b:widget-setting name='sectionWidth'>-1</b:widget-setting>
<b:widget-setting name='useImage'>false</b:widget-setting>
<b:widget-setting name='shrinkToFit'>false</b:widget-setting>
<b:widget-setting name='imagePlacement'>BEHIND</b:widget-setting>
<b:widget-setting name='displayWidth'>0</b:widget-setting>
</b:widget-settings>
<b:includable id='main'>
</b:includable>
<b:includable id='description'>
</b:includable>
<b:includable id='title'>
<a expr:href='data:blog.homepageUrl' expr:title='data:title' itemprop='url'><span itemprop='name'><data:title/></span></a>
</b:includable>
</b:widget>
</b:section>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Postingan Blog' type='Blog' version='1'>
<b:widget-settings>
<b:widget-setting name='showDateHeader'>true</b:widget-setting>
<b:widget-setting name='style.textcolor'>#000000</b:widget-setting>
<b:widget-setting name='showShareButtons'>true</b:widget-setting>
<b:widget-setting name='authorLabel'>By</b:widget-setting>
<b:widget-setting name='showCommentLink'>true</b:widget-setting>
<b:widget-setting name='style.urlcolor'>#008000</b:widget-setting>
<b:widget-setting name='showAuthor'>true</b:widget-setting>
<b:widget-setting name='disableGooglePlusShare'>true</b:widget-setting>
<b:widget-setting name='style.linkcolor'>#0000ff</b:widget-setting>
<b:widget-setting name='style.unittype'>TextAndImage</b:widget-setting>
<b:widget-setting name='style.bgcolor'>#ffffff</b:widget-setting>
<b:widget-setting name='reactionsLabel'/>
<b:widget-setting name='showAuthorProfile'>true</b:widget-setting>
<b:widget-setting name='style.layout'>1x1</b:widget-setting>
<b:widget-setting name='showLabels'>true</b:widget-setting>
<b:widget-setting name='showLocation'>true</b:widget-setting>
<b:widget-setting name='showTimestamp'>true</b:widget-setting>
<b:widget-setting name='postsPerAd'>1</b:widget-setting>
<b:widget-setting name='showBacklinks'>false</b:widget-setting>
<b:widget-setting name='style.bordercolor'>#ffffff</b:widget-setting>
<b:widget-setting name='showInlineAds'>false</b:widget-setting>
<b:widget-setting name='showReactions'>false</b:widget-setting>
</b:widget-settings>
<b:includable id='main' var='top'>
</b:includable>
<b:includable id='backlinkDeleteIcon' var='backlink'/>
<b:includable id='backlinks' var='post'/>
<b:includable id='comment-form' var='post'/>
<b:includable id='commentDeleteIcon' var='comment'/>
<b:includable id='comment_count_picker' var='post'/>
<b:includable id='comment_picker' var='post'/>
<b:includable id='comments' var='post'/>
<b:includable id='feedLinks'/>
<b:includable id='feedLinksBody' var='links'/>
<b:includable id='iframe_comments' var='post'/>
<b:includable id='mobile-index-post' var='post'/>
<b:includable id='mobile-main' var='top'/>
<b:includable id='mobile-nextprev'/>
<b:includable id='mobile-post' var='post'/>
<b:includable id='nextprev'/>
<b:includable id='post' var='post'>
<article class='post hentry' itemprop='blogPost' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'>
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:post.title'>
<h2 class='post-title entry-title' itemprop='headline'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link' expr:title='data:post.title' itemprop='url mainEntityOfPage'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url' expr:title='data:post.title' itemprop='url mainEntityOfPage'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h2>
</b:if>
<b:else/>
<h1 class='post-title entry-title' itemprop='headline'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link' expr:title='data:post.title' itemprop='url mainEntityOfPage'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url' expr:title='data:post.title' itemprop='url mainEntityOfPage'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h1>
</b:if>
<div class='post-body entry-content' expr:id='"post-body-" + data:post.id' itemprop='articleBody'>
<data:post.body/>
<div class='clear'/> <!-- clear for photos floats -->
</div>
</article>
</b:includable>
<b:includable id='postQuickEdit' var='post'/>
<b:includable id='shareButtons' var='post'/>
<b:includable id='status-message'/>
<b:includable id='threaded-comment-form' var='post'/>
<b:includable id='threaded_comment_js' var='post'/>
<b:includable id='threaded_comments' var='post'/>
</b:widget>
</b:section>
<b:section class='sidebar' id='sidebar' preferred='yes'/>
<!-- spacer for skins that want sidebar and main to be the same height-->
<div class='contact-form-box'>
<form id='contactForm' name='contact-form'>
<div class='floating-label-form-group'>
<label>Name</label>
<input class='form-control' id='ContactForm1_contact-form-name' name='name' placeholder='Name' type='text' value=''/> </div>
<div class='floating-label-form-group'>
<label>Email Address</label>
<input class='form-control' id='ContactForm1_contact-form-email' name='email' placeholder='Email Address' type='text' value=''/> </div>
<div class='floating-label-form-group'>
<label>Message</label>
<textarea class='form-control' id='ContactForm1_contact-form-email-message' name='email-message' placeholder='Message' rows='5'/>
</div>
<input class='btn btn-default' id='ContactForm1_contact-form-submit' type='button' value='Kirim'/>
<div class='clear'/>
<div style='max-width: 100%; text-align: left; width: 100%;'>
<div id='ContactForm1_contact-form-error-message'> </div>
<div id='ContactForm1_contact-form-success-message'> </div>
</div>
</form>
</div>
<script type='text/javascript'>
//<![CDATA[
document.write("<scr" + "ipt type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></scr" + "ipt>");
//]]>
</script>
<script>
$(function() {
$("body").on("input propertychange", ".floating-label-form-group", function(e) {
$(this).toggleClass("floating-label-form-group-with-value", !!$(e.target).val());
}).on("focus", ".floating-label-form-group", function() {
$(this).addClass("floating-label-form-group-with-focus");
}).on("blur", ".floating-label-form-group", function() {
$(this).removeClass("floating-label-form-group-with-focus");
});
});
</script>
<script type='text/javascript'>
//<![CDATA[
document.write("<scr" + "ipt type="text/javascript" src="https://www.blogger.com/static/v1/widgets/2271878333-widgets.js"></scr" + "ipt>");
//]]>
</script>
<script>
if (typeof(BLOG_attachCsiOnload) != "undefined" && BLOG_attachCsiOnload != null) { window["blogger_templates_experiment_id"] = "templatesV1";window["blogger_blog_id"] = "<data:blog.blogId/>";BLOG_attachCsiOnload(""); }_WidgetManager._Init("//www.blogger.com/rearrange?blogIDx3d<data:blog.blogId/>","<data:blog.url/>","<data:blog.blogId/>");
_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/>Jika tidak ada halangan dan kesibukan lainnya, admin akan langsung merespon pesan yang Anda kirimkan.</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": "<data:blog.blogId/>", "contactFormNameMsg": "Name", "contactFormEmailMsg": "Email", "contactFormMessageMsg": "Message", "contactFormSendMsg": "Send", "submitUrl": "https://www.blogger.com/contact-form.do"}, "displayModeFull"));
</script>
<!--<body/>--> </body>
</HTML>Setelah itu Simpan.
Kembali ke Menu Theme, pilih menu Opsi dan masuk ke Setelan Seluler disini silakan pilih opsi Desktop.
Tujuannya agar saat blog halaman kontak ini dibuka melalui mobile tetap menampilkan html kontak form.
Sampai disini anda sudah berhasil membuat blog khusus halaman kontak anda. Silakan klik Lihat blog untuk melihat dan mengcopy url blog anda.
Contoh blog kontak kontak form yang saya buat: https://halamankontak.blogspot.com/
Nah disini untuk penggunaannya sebenarnya tidak hanya terbatas untuk blog HTMLy tapi juga bisa untuk cms lain misal wordpress ataupun blogger itu sendiri.
Ya jika anda pengguna wordpress hitung-hitung bisa untuk menghemat plugin yang anda gunakan jadi tidak membebani load blog anda.
Membuat Halaman Kontak Baru di Blog
Untuk blog HTMLy anda bisa membuat Halaman Statis untuk Halaman Kontak Anda beri judul dan bisa anda tuliskan sepatah kata atau cara lain menghubungi anda selain dari form.
Selanjutnya anda bisa menggunakan iframe dari blog contact form yang ada buat.
Silakan copy saja kodenya pada bagian Content
<iframe title="Contact" src="https://halamankontak.blogspot.com/" height="400" layout="fixed-height" frameborder="0" sandbox="allow-forms allow-scripts allow-same-origin allow-modals allow-popups" loading="lazy"></iframe>
Jangan lupa ganti link url blog saya dengan url blog contact form anda agar email yang masuk menuju alamat email anda tentunya.
Dengan cara diatas form kontak jauh lebih simpel dan sederhana secara pembuatannya. Secara kecepatan juga masih sangat memumpuni tidak membebani blog karena dari segi template blog contact yang sudah saya sederhanakan dan juga penambahan attribute loading=”lazy” membuatnya diload secara lazyload sehingga tidak menganggu loading halaman tersebut.
Jika ada pertanyaan bisa diskusikan di kolom komentar dibawah, jika bermanfaat jangan lupa share artikel ini.