%20Keren%20Di%20Blogger.jpg "Cara Membuat Contact Form (Contact Us) Keren Di Blogger")
Baca Juga :
Ada banyak Cara membuat CONTACT US di blogspot dengan mudah dan keren yaitu dengan memanfaatkan website generate yang menyediakan cara membuat contact us secara otomatis dan instan seperti :
- foxyform.com
- 123contactform.com
- contactform7.com
- kontactr.comwufoo.com
- visitorcontact.com
- dan masih banyak lagi
Halaman contact us biasanya dipasang di halaman statis blog, dengan menampilkan sebuah pesan atau info kontak admin blog seperti email pribadi, telegram, whatsapp, instagram, dan lain sebagainya. Mungkin ada juga yang tidak senang menampilkan info kontak yang sudah saya sebutkan tadi
Tetapi jika anda ingin membuat contac us tanpa harus memberi info kontak, anda bisa lihat halaman Contac Us di blog ini, bagaimana? Keren bukan. Daripada terlalu banyak basa – basi yuk disimak tutorialnya dibawah ini
Cara Membuat Contac Form (Contac Us) Keren Di Blogger
1. Login ke akun blogger anda
2. Cari menu Halaman > Halaman Baru > Mode HTML (Jangan Compose ya, agar tidak berantakan)
3. Masukan kode dibawah ini yang sudah saya berikan di Mode HTML tadi
<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" placeholder="" 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'] = '875972448366510431';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogIDx3d8759724483665xxxxx','//gudangcaraque.eu.org/','8759724483665xxxxx');
_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": "8759724483665xxxxx", "contactFormNameMsg": "Name", "contactFormEmailMsg": "Email", "contactFormMessageMsg": "Message", "contactFormSendMsg": "Send", "submitUrl": "https://www.blogger.com/contact-form.do"}, "displayModeFull"));
</script>* Ganti angka 8759724483665xxxxx dengan blog Id anda, kemudian ganti gudangcaraque.eu.org dengan alamat url blog anda masing – masing
4. Beri judul halaman tadi dengan Contact Us atau bisa juga Contact Form
5. Publish halaman Contact Us anda kemudian anda bisa mengetest nya
6. Selesai
Lalu apa manfaat dari halaman blog yang saya berikan? Manfaatnya itu ada dua yaitu
1. Privasi Terjaga
Yang pertama yaitu privasi anda akan terjaga, karena halaman contact us yang sudah saya berikan hanya bersifat formulir. Jika anda memberikan informasi kontak anda seperti instagram, whatsapp, telegram, facebook, dan lain sebagainya.
Orang lain juga bisa menelfon seenaknya untuk bertanya sesuatu, walaupun anda sudah menyuru untuk chat saja. Untuk menghindari hal itu maka saya buatkan tutorial ini
2. Terlihat Profesional
Yang terakhir yaitu blog anda terlihat professional, halaman contact us seperti ini juga sudah banyak dipakai oleh website besar. Dan halaman contact us ini pasti akan terlihat professional dan cantik karena contac us ini sudah responsive
Baca Juga : Cara Daftar dan Verifikasi Blog ke Google Search Console
Demikian artikel saya yang berjudul Cara Membuat Contact Form (Contact Us) Keren Di Blogger, semoga dengan adanya artikel ini bisa membantu anda bagi yang ingin membuat halaman contac us atau contac form, mungkin juga anda ingin membuat halaman ini karena ingin mengganti dari tampilan info kontak ke sebuah formulir seperti ini. Semoga bermanfaat
MAU BELAJAR DIGITAL MARKETING
Pengalaman Kami memiliki pengalaman bertahun-tahun, dan menghasilkan ratusan video..
Kualitas tinggi Beberapa desain video kami telah menghasilkan puluhan rupiah.
Cepat Anda tidak perlu menunggu lama, Karena sudah ada jadwal pelatihan.
Fasilitas Template Tidak hanya mendesain video, kami juga Memberikan template Anda.
