Skip to main content

Cara Membuat Contact Form di Blogger Dengan Mudah

Cara Membuat Contact Form di Blogger Dengan Mudah

Ketika kamu memiliki sebuah blog, jangan lupa untuk membuat halaman contact form atau contact us di blogger pada halaman statis. Karena bagian tersebut adalah yang paling penting agar pengunjung dapat berkomunikasi dengan si pemilik blog atau website, baik untuk menawarkan kerjasama ataupun hanya sekedar bertanya.

Tidak hanya itu, adanya halaman contact form atau contact us juga dapat menandakan bahwa blog tersebut dikelola dengan serius, karena telah menyediakan berbagai aspek penting yang dapat digunakan oleh pengunjung nantinya, sehingga dapat meningkatkan kepercayaan terhadap apa yang ada di dalamnya.

Formulir kontak ini banyak sekali penyebutannya, seperti contact uscontact me, hubungi kami, hubungi saya, dan lain sebagainya tergantung bagaimana kamu memberikan namanya. Yang terpenting adalah pengunjung bisa tau bagaimana cara menghubungi kamu selaku pemilik blog.

Kamu juga bisa membangun relasi dengan pengunjung. Siapa tau nantinya ada yang menawarkan kerjasama dan kamu akan mendapatkan penghasilan tambahan dari kerja sama tersebut.

Untuk membuat contact form di blogger sebenarnya sudah banyak di internet yang membagikannya, tapi beberapa diantaranya menggunakan cara yang cukup ribet, seperti membuat akun di suatu website ataupun memasukan kode ke template yang bisa menyebabkan blog kamu error jika salah.

Namun pada artikel ini saya akan menjelaskan cara membuat contact form di blogger dengan cara yang paling mudah, berikut adalah caranya.

Cara Membuat Contact Form di Blogger Dengan Mudah

1. Masuk ke dasahboard blogger.

2. Pilih halaman (pages) dan klik halaman baru (new page).

Membuat Contact Form di Halaman atau Pages Blogger

3. Lalu beri nama halaman tersebut, misalkan contact form.

4. Masuk ke mode HTML, copy dan paste kode dibawah ini.

<style>
/*<![CDATA[*/

.contact-form-box {
width: 100%;
margin: 20px auto;
padding: 0
}

#contactForm .floating-label-form-group {
font-size: 16px;
position: relative;
margin-bottom: 0;
padding-bottom: 20px;
border-bottom: 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: #C51162;
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:-apple-system,BlinkMacSystemFont,"Roboto","Segoe UI","Oxygen-Sans","Ubuntu","Cantarell","Helvetica Neue",sans-serif;
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-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: #C51162
}

#contactForm {
border-top: 1px solid #ddd
}

#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:-apple-system,BlinkMacSystemFont,"Roboto","Segoe UI","Oxygen-Sans","Ubuntu","Cantarell","Helvetica Neue",sans-serif;
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: #C51162;
border: 1px solid #be403a;
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.eot?v=4.6.0);src:url(https://maxcdn.bootstrapcdn.com/font-awesome/4.6.0/fonts/fontawesome-webfont.eot?#iefix&v=4.6.0) format('embedded-opentype'),url(https://maxcdn.bootstrapcdn.com/font-awesome/4.6.0/fonts/fontawesome-webfont.woff2?v=4.6.0) format('woff2'),url(https://maxcdn.bootstrapcdn.com/font-awesome/4.6.0/fonts/fontawesome-webfont.woff?v=4.6.0) format('woff'),url(https://maxcdn.bootstrapcdn.com/font-awesome/4.6.0/fonts/fontawesome-webfont.ttf?v=4.6.0) format('truetype'),url(https://maxcdn.bootstrapcdn.com/font-awesome/4.6.0/fonts/fontawesome-webfont.svg?v=4.6.0#fontawesomeregular) format('svg');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;
}

@media screen and (max-width:768px) {
.contact_message {
width: 90%!important;
margin-left: -45%!important;
}
.contact-form-box {
width: 100%;
}
}
/*]]>*/ </style>
<div class="contact-form-box">
<div>Silahkan isi form di bawah ini untuk menghubungi admin blog. </div>
<br />
<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" 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" 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" rows="5"></textarea>
</div>
<input class="btn btn-default" id="ContactForm1_contact-form-submit" type="button" value="Kirim" />
<div class="clear"></div>
<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 src="https://code.jquery.com/jquery-1.12.4.min.js" type="text/javascript"></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 src="https://www.blogger.com/static/v1/widgets/2271878333-widgets.js" type="text/javascript"></script>
<script type="text/javascript">
if (typeof(BLOG_attachCsiOnload) != 'undefined' && BLOG_attachCsiOnload != null) { window['blogger_templates_experiment_id'] = "templatesV1";window['blogger_blog_id'] = '7446695862980181816';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d7446695862980181816','//kompitext.blogspot.com/','7446695862980181816');
_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": "7446695862980181816", "contactFormNameMsg": "Name", "contactFormEmailMsg": "Email", "contactFormMessageMsg": "Message", "contactFormSendMsg": "Send", "submitUrl": "https://www.blogger.com/contact-form.do"}, "displayModeFull"));
</script>

Meletakan Kode HTML Contact Form Blogger di Halaman Statis

5. Setelah itu, ganti ID blog saya pada kode diatas yaitu 7446695862980181816 dengan ID blog kamu. Ada sekitar 4 ID yang harus kamu ganti dan letaknya dipaling bawah kode.

Kalo kamu gatau ID blog itu yang mana, masuk ke dashboard blogger terlebih dahulu dan perhatikan address bar pada web browser yang kamu gunakan, disana kamu akan menemukan ID blog.

ID Blog Contact Form

6. Silahkan kamu simpan dan lihat hasilnya.

Kalo ada seseorang yang mengirim pesan melalui contact form di blog kamu, maka tampilannya pada email akan seperti gambar berikut ini.

Contoh Pesan Yang Diterima Dari Contact Form

Bagaimana? Gampang kan? Tinggal copy paste kode pada halaman statis, selesai deh. Nah itu dia cara membuat contact form di blogger dengan mudah, semoga artikel ini bermanfaat dan dapat dipahami dengan mudah.

Comment Policy: Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.
Buka Komentar
Tutup Komentar
-->