Cara Membuat Halaman Contact Form di Blogger
Cara Membuat Contact Form / Kontak Form Blogger pada halaman statis
Selamat datang semuanya, pada postingan sebelumnya saya sudah membuatkan tutorial cara membuat contact form valid AMP. Jika ada AMP sudah pasti ada Non AMP, jadi tidak lengkap rasanya jika saya tidak membuatkan juga di versi non AMP nya.
Membuat halaman contact form di blog non AMP bisa dikatakan lebih mudah dari pada di blog AMP, mengapa saya katakan demikian? karena kita tidak perlu membuat blog baru lagi untuk menjadi contact form nya, sebagaimana cara yang sudah saya bagikan di postingan atas tadi.
Dengan mengikuti cara saya dalam membuat Contact Form ini sudah pasti responsive di semua perangkat termasuk mobile / m=1. Dan desainnya bisa dibilang simple tapi bagus.
Contact form berguna untuk mengirimkan pesan dari pengunjung kepada pemilik blog, yang dikirim melalui pesan email. Selain itu juga contact form berfungsi sebagai penyambung silaturahmi antar pengunjung dan pemilik blog.
Membuat contact form di blogger / blogspot tidaklah begitu sulit jika di lakukan dengan cara yang benar. Kita hanya perlu menambahkan sedikit script agar contact form tersebut bisa berfungsi dengan baik, oke langsung saja kita masuk ke tutorial,
Cara Membuat Contast Form Blogger di Halaman Statis
Pertama silahkan anda login ke akun blogger anda, lalu buat halaman baru dengan judul Contact Form.
Jika sudah silahkan beralih ke mode HTML dan masukkan 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 name="contact-form" id="contactForm">
<div class="floating-label-form-group">
<label>Name</label>
<input type="text" class="form-control" placeholder="Name" id="ContactForm1_contact-form-name" name="name" value="" /> </div>
<div class="floating-label-form-group">
<label>Email Address</label>
<input type="text" class="form-control" placeholder="Email Address" id="ContactForm1_contact-form-email" name="email" value="" /> </div>
<div class="floating-label-form-group">
<label>Message</label>
<textarea rows="5" class="form-control" name="email-message" placeholder="Message" id="ContactForm1_contact-form-email-message"></textarea>
</div>
<input id="ContactForm1_contact-form-submit" type="button" class="btn btn-default" 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'] = '3772129406538546599';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d3772129406538546599','//kompitext.blogspot.com/','3772129406538546599');
_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": "3772129406538546599", "contactFormNameMsg": "Name", "contactFormEmailMsg": "Email", "contactFormMessageMsg": "Message", "contactFormSendMsg": "Send", "submitUrl": "https://www.blogger.com/contact-form.do"}, "displayModeFull"));
</script>Terakhir pilih simpan tema.
Itulah sedikit Tutorial tentang Cara Membuat Halaman Contact Form di Blogger yang dapat saya bagikan, jika ada kakurangan dalam penyampaian, silahkan komen di kolom komentar di bawah ini.
Komentar
Posting Komentar