Cara Buat Halaman Form Contact Us di Blogspot
Form Contact Us merupakan salah satu hal yang wajib ada dalam sebuah blog, fungsi dari Form Contact Us sendiri adalah sebagai alat komunikasi yang digunakan pengunjung dan pemilik blog. Laman kontak yang dibuat biasanya sudah dihubungkan langsung dengan Email pemilik blog.
Terkait isi dari pesan yang diterimapun berbeda-beda mulai dari yang bertanya, menyampaikan saran atau hanya ingin berkenalan dengan pemilik blog untuk membangun kerjasama. Mempunyai halaman kontak yang menarik memang suatu hal yang menjadi nilai tambah pada sebuah blog, sebenarnya form kontak ini dapat di buat pada widget/gadget, jadi kamu tinggal cari kode untuk membuat halaman kontak melalui widget/gadget.
Namun pada artikel kali ini saya akan memberikan tutorial bagaimana caranya membuat halaman form kontak untuk blog adan disini saya juga akan memberika tutorial bagaimana cara memasang halaman Form Kontak pada menu navigasi.
Cara Buat Halaman Form Contact Us di Blogspot
1. Silahkan login ke Blogger kamu (Klik disini).
2. Silahkan lihat menu yang berada disebelah kiri
Klik Halaman >> Buat Halaman Baru.
3. Silahkan unah dari mode Compose ke HTML.
4. Lalu masukkan kode script dibawah ini.
<div class="enterblogger-logo">
<i class="material-icons md-48">verified_user</i></div>
<style scoped="scoped">
.enterblogger-logo{text-align:center;}
@font-face {
font-family: 'Material Icons';
font-style: normal;
font-weight: 400;
src: local('Material Icons'), local('MaterialIcons-Regular'), url(https://fonts.gstatic.com/s/materialicons/v12/2fcrYFNaTjcS6g4U3t-Y5ewrjPiaoEww8AihgqWRJAo.woff) format('woff'), url(https://fonts.gstatic.com/s/materialicons/v12/2fcrYFNaTjcS6g4U3t-Y5ZjZjT5FdEJ140U2DJYC3mY.woff2) format('woff2'), url(https://fonts.gstatic.com/s/materialicons/v12/2fcrYFNaTjcS6g4U3t-Y5bbKic1PW3nceB3q24YFOMg.ttf) format('truetype');
}
.material-icons {
font-family: 'Material Icons';
font-weight: normal;
font-style: normal;
font-size: inherit;
display: inline-block;
line-height: 1;
text-transform: none;
letter-spacing: normal;
word-wrap: normal;
white-space: nowrap;
direction: ltr;
vertical-align:middle;
/* Support for all WebKit browsers. */
-webkit-font-smoothing: antialiased;
/* Support for Safari and Chrome. */
text-rendering: optimizeLegibility;
/* Support for Firefox. */
-moz-osx-font-smoothing: grayscale;
/* Support for IE. */
font-feature-settings: 'liga';
}
.md-48{font-size: 100px;
color: #546de5;
padding: 10px;
background: #dde3ff;
border-radius: 100px;}
.enterblogger-input{float:none;position:relative;margin-bottom:45px;margin-right:10px}.enterblogger-input input,.enterblogger-input textarea{font-size:15px;padding:15px 0;display:block;width:100%;border:none;border-bottom:1px solid #ddd}.enterblogger-input input:focus,.enterblogger-input textarea:focus{outline:none}.enterblogger-input label{color:#999;font-size:15px;font-weight:400;position:absolute;pointer-events:none;left:0;top:10px;transition:.2s ease all}.enterblogger-input input:focus ~ label,.enterblogger-input input:valid ~ label,.enterblogger-input textarea:focus ~ label,.enterblogger-input textarea:valid ~ label{top:-20px;font-size:14px;color:#546de5}.bar{position:relative;display:block;width:100%}.bar:before,.bar:after{content:'';height:2px;width:0;bottom:1px;position:absolute;background:#546de5;transition:1.2s cubic-bezier(1, 0.12, 0.25, 1) all}.bar:before{left:50%}.bar:after{right:50%}.enterblogger-input input:focus ~ .bar:before,.enterblogger-input input:focus ~ .bar:after,.enterblogger-input textarea:focus ~ .bar:before,.enterblogger-input textarea:focus ~ .bar:after{width:50%}.highlight{position:absolute;height:50%;width:100px;top:25%;left:0;pointer-events:none;opacity:.5}.enterblogger-input input:focus ~ .highlight,.enterblogger-input textarea:focus ~ .highlight{animation:inputHighlighter .3s ease}.enterblogger-input input:focus ~ label,.enterblogger-input input:valid ~ label,.enterblogger-input textarea:focus ~ label,.enterblogger-input textarea:valid ~ label{top:-20px;font-size:13px;color:#546de5}
input#ContactForm1_contact-form-email-message{height:150px}
input#ContactForm1_contact-form-submit{width:100%;color:#fff!important;background:#546de5;padding:15px 25px;border-radius:4px;border:none;outline:none;box-shadow:0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);cursor:pointer;transition:all .4s ease-in-out;text-transform:uppercase;float:left;margin-top:15px}
input#ContactForm1_contact-form-submit:hover{box-shadow:0 8px 17px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19)}
#ContactForm1_contact-form-error-message{float:right;background:#D32F2F;color:#fff;font-size:13px;font-weight:700;border-radius:3px}#ContactForm1_contact-form-success-message{float:right;background:#4CAF50;color:#fff;font-size:13px;font-weight:700;border-radius:3px}
</style>
<form name="contact-form">
<div class="enterblogger-input">
<input class="validate" id="ContactForm1_contact-form-name" name="name" required="" type="text" value="" />
<span class="highlight"></span>
<span class="bar"></span>
<label><i class="material-icons">
account_circle
</i> Name</label></div>
<div class="enterblogger-input">
<input class="validate" id="ContactForm1_contact-form-email" name="email" required="" type="email" value="" />
<span class="highlight"></span>
<span class="bar"></span>
<label><i class="material-icons">
contact_mail
</i> Email</label></div>
<div class="enterblogger-input">
<textarea class="validate" cols="25" id="ContactForm1_contact-form-email-message" name="email-message" required="" rows="5"></textarea>
<span class="highlight"></span>
<span class="bar"></span>
<label><i class="material-icons">
message
</i> Message</label></div>
<link crossorigin="anonymous" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" rel="stylesheet"></link>
<input id="ContactForm1_contact-form-submit" type="button" value="Send" />
<div id="ContactForm1_contact-form-error-message">
</div>
<div id="ContactForm1_contact-form-success-message">
</div>
</form>
<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'] = '6512837267690936704';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogIDx3d6512837267690936704','//supriantosa.com/','6512837267690936704');
_WidgetManager._RegisterWidget('_ContactFormView', new _WidgetInfo('ContactForm1', 'footer1', null, document.getElementById('ContactForm1'), {'contactFormMessageSendingMsg': '<span style="padding:5px 10px">Sending...</span>', 'contactFormMessageSentMsg': '<span style="padding:5px 10px">Your message has been sent.</span>', 'contactFormMessageNotSentMsg': '<span style="padding:5px 10px">Message could not be sent. Please try again later.</span>', 'contactFormInvalidEmailMsg': '<span style="padding:5px 10px">A valid email address is required.</span>', 'contactFormEmptyMessageMsg': '<span style="padding:5px 10px">Message field cannot be empty.</span>', 'title': 'Contact Form', 'blogId': '6512837267690936704', 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));
//]]>
</script>
Catatan :
Ganti angka 6512837267690936704 dengan ID Blog kamu total ada 4
yang harus diganti. Ganti juga supriantosa.com dengan link blog sobat total
ada 1 yang harus diganti.
5. Silahkan diberi nama halaman tersebut.
6. Simpan halaman, selesai sekarang Form Contact Us sudah bisa digunakan.
Gimana mudahkan? oke sampai sini dulu artikel kali ini, terima kasih kepada
sobat online yang telah membaca artikel ini. Jika ada hal yang ingin
ditanyakan atau kurang dimengerti silahkan tanya di kolom komentar. Semoga
artikel ini bermanfaat dan sampai jumpa diartiket selanjutnya.
