Cara Membuat Halaman Kontak Responsive di Blogspot

Hosting Unlimited Indonesia

Membuat Halaman Kontak di Blogspot | Menambahkan halaman kontak di blogspot yang kita miliki memang tidak wajib hukumnya.

Akan tetapi untuk beberapa keadaan semisal jika ada pihak yang ingin menghubungi kita karena mereka ingin bekerjasama dengan kita, tentunya kita perlu menempatkan informasi mengenai kontak kita. Seperti, email, nomor hp, id line, dan lain sebagiannya.

Setiap blogger memiliki caranya masing-masing dalam membuat format halaman kontaknya. Ada yang menempatkan kolom kontak di widget, ada yang di footer, dan yang paling banyak dilakukan dibuat pada satu halaman khusus.

Pada kesempatan kali ini, kita akan membahas mengenai cara membuat halaman kontak di blogspot menggunakan widget bawaan blogger, menggunakan HTML dan CSS, dan melalui pihak ketiga

Namun sebelum lanjut ke tutorialnya, buat kamu yang menyukai pembahasan mengenai linux, silahkan baca di sini

3 Cara Membuat Halaman Kontak Responsive di Blogspot

Cara Pertama – Membuat Halaman Kontak di Blogspot menggunakan Widget bawaan Blogger

Mengapa selayaknya kamu membuat formulir kontak menggunakan format resmi dari blogger?

dilansir dari masterblogging.com ada 4 keunggulan membuat formulir contact menggunakan widget bawaan blogger

  1. Kita akan menerima pesan begitu orang mengirimnya. Dan, hasil pengirimannya juga aman serta tidak mengalami perubahan.
  2. Tampilan yang sederhana sehingga memudahkan pengunjung untuk menghubungi kita.
  3. Dalam pembuatannya kita tidak perlu menggunakan bahasa program seperti HTML dan CSS, sehingga untuk proses pembuatannya tidak terlalu ribet.
  4. Seluruh halaman tidak akan dimuat ulang untuk mengirim pesan.

Membuat Formulir Kontak di blogspot menggunakan widget bawaan

Langkah 1: Kunjungi blogger.com dan masuk ke akun kamu. Jika kamu memiliki banyak blog, kamu harus memilih blog yang ingin dibuat halaman contactnya

Langkah 2: Jika sudah masuk ke blog yang dituju, Klik Tata Letak dari bilah sisi kiri agar kita bisa menambahkan gadget baru.

membuat halaman kontak di blogspot

Langkah 3: Kemudian klik “Add a Gadget” untuk menambahkan gadget baru.

membuat halaman kontak di blogspot

Langkah 4: Lalu, pilih more gadget yang ada di sisi kiri. Sekarang, kamu akan melihat Formulir Kontak. Klik “contact form” untuk menambahkannya

membuat halaman kontak di blogspot
membuat halaman kontak di blogspot

Selesai.

Bagaimana? mudah bukan cara membuat formulir kontak di blogspot menggunakan widget bawaan blogger?

Lanjut ke cara yang lainnya

Cara Kedua – Membuat Halaman Kontak di Blogspot menggunakan Bahasa Program

Pada cara yang kedua ini, kita akan menambahkan satu halaman khusus untuk membuat formulir contact di blogspot.

Untuk souce code nya saya dapatkan dari blog keren yaitu analisyuki.com

Pada bagian ini, saya akan membagikan beberapa versi formulir kontak dengan tampilan yang berbeda-beda.

Nantinya kamu tinggal pilih tampilan mana yang kamu anggap cocok dengan tampilan blogmu

Cara membuat contact form responsive di blogger

Langkah 1 : Masuk ke akun blog kamu yang akan ditambahkan formulir kontaknya

Langkah 2 : Setelah masuk, pilih menu halaman dan klik Tambahkan halaman baru

Langkah 3 : Jika sudah tampil halaman editnya, ubah dari compose ke html

Langkah 4 : Lalu, tempelkan kode formulir kontak responsive untuk blogger sesuai versi yang kamu inginkan

Formulir Kontak Blogspot – Versi 1
<style scoped="" type="text/css">
  /*<![CDATA[*/
  
  .contact-form-box {width: 100%;margin: 20px auto;padding: 0}
  #contactForm .floating-label-form-group {font-size: 14px;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: #36d7b7;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: 14px;font-family: Roboto, Arial, 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-family: Roboto, Arial, sans-serif;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: #36d7b7}
  #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: Roboto, Arial, 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: #36d7b7;border: 1px solid #36d7b7;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;}
  .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>

<br />
<div class="contact-form-box">
<div>
Jika ada sesuatu yang ingin ditanyakan secara probadi, anda bisa mengirimkan email melalui form di bawah ini.<br />
<b><br /></b></div>
<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"></textarea>
    </div>
<input class="btn btn-default" id="ContactForm1_contact-form-submit" type="button" value="Kirim" />
    <br />
<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'] = 'id blog anda';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d1877745665889604279','url blog anda','id blog anda');
_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": "id blog anda", "contactFormNameMsg": "Name", "contactFormEmailMsg": "Email", "contactFormMessageMsg": "Message", "contactFormSendMsg": "Send", "submitUrl": "https://www.blogger.com/contact-form.do"}, "displayModeFull"));
</script>
Formulir Kontak Blogspot – Versi 2
<div class="analisyuki-icon">
<i class="material-icons md-48">contact_mail</i>
</div>
<br />
Jika ada sesuatu yang ingin ditanyakan secara pribadi, anda bisa mengirimkan email melalui form di bawah ini. Admin akan langsung merespon pesan yang anda kirim, terimkasih.<style scoped="scoped">
  .analisyuki-icon{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: #1E8BC3;
    padding: 10px;
    background: #dde3ff;
    border-radius: 100px;}
.analisyuki-code{float:none;position:relative;margin-bottom:45px;margin-right:10px}.analisyuki-code input,.analisyuki-code textarea{font-size:15px;padding:15px 0;display:block;width:100%;border:none;border-bottom:1px solid #ddd}.analisyuki-code input:focus,.analisyuki-code textarea:focus{outline:none}.analisyuki-code label{color:#999;font-size:15px;font-weight:400;position:absolute;pointer-events:none;left:0;top:10px;transition:.2s ease all}.analisyuki-code input:focus ~ label,.analisyuki-code input:valid ~ label,.analisyuki-code textarea:focus ~ label,.analisyuki-code textarea:valid ~ label{top:-20px;font-size:14px;color:#f14062}.bar{position:relative;display:block;width:100%}.bar:before,.bar:after{content:'';height:2px;width:0;bottom:1px;position:absolute;background:#f14062;transition:1.2s cubic-bezier(1, 0.12, 0.25, 1) all}.bar:before{left:50%}.bar:after{right:50%}.analisyuki-code input:focus ~ .bar:before,.analisyuki-code input:focus ~ .bar:after,.analisyuki-code textarea:focus ~ .bar:before,.analisyuki-code textarea:focus ~ .bar:after{width:50%}.highlight{position:absolute;height:50%;width:100px;top:25%;left:0;pointer-events:none;opacity:.5}.analisyuki-code input:focus ~ .highlight,.analisyuki-code textarea:focus ~ .highlight{animation:inputHighlighter .3s ease}.analisyuki-code input:focus ~ label,.analisyuki-code input:valid ~ label,.analisyuki-code textarea:focus ~ label,.analisyuki-code textarea:valid ~ label{top:-20px;font-size:13px;color:#f14062}
input#ContactForm1_contact-form-email-message{height:150px}
input#ContactForm1_contact-form-submit{width:100%;color:#fff!important;background:#000000;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>

<br />
<form name="contact-form">
<div class="analisyuki-code">
<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="analisyuki-code">
<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">
email
</i> Email</label>
</div>
<div class="analisyuki-code">
<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">
mode_comment
</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" />
<br />
<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'] = '6154920600666252113';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogIDx3d6154920600666252113','//analisyuki.com/','6154920600666252113');
_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': '6154920600666252113', 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));
//]]>
</script>

Nah, jika kamu sudah memilih dan menentukan versi mana yang akan kamu pakai untuk halaman kontak responsive di blogger, kamu tinggal klik publishkan.

Cara Ketiga – Membuat Halaman Kontak di Blogspot menggunakan 123FormBuilder

Jika kamu suka akan sesuatu yang simpel dan tidak ribet maka membuat halaman kontak responsive di blogger menggunakan pihak ketiga 123formbuilder adalah jawabannya.

Kita hanya perlu melakukan registrasi, mengatur form, mendapatkan kode, dan menempelkannya di blog kita. Mudah sekali bukan?

Cara membuat contact form responsive di blogger menggunakan 123form builder

Langkah 1 – Pergi ke 123FormBuilder dan Buat Akun Baru

Langkah 2 – Jika kamu sudah membuat akunnya, Masuk ke Dasbor Anda dan Klik Panah Di sebelah Tombol Buat Formulir Baru. Klik pada formulir kontak & opsi Timbal formulir.

membuat halaman kontak di blogspot

Form Kontak Akan Muncul Di Halaman Kedua Yang Siap Digunakan. Kamu dapat menambahkan bidang tambahan apa saja yang kamu inginkan dengan mengklik tombol bidang.

membuat halaman kontak di blogspot

Klik tombol save dan publikasikan.

Langkah 3 – Kita akan mendapatkan kode, Salin kode tersebut.

membuat halaman kontak di blogspot

Langkah 4 – Pergi ke dashboard aku Blogger kamu dan klik tambahkan halaman baru. Beri nama halaman ini “Hubungi Kami”.

membuat halaman kontak di blogspot

Langkah 5 – Klik tombol editor format HTML dan tempel kode di sini (Tekan CTRL + V untuk menempel) dan klik publish.

Selesai.

Nah, dari 3 cara membuat halaman kontak untuk blogspot di atas, mana yang kamu pilih? dan apa alasannya? Tulis jawabanmu di komentar ya

Sekian untuk artikel Cara Membuat Halaman Kontak Responsive di Blogspot

Semoga bermanfaat dan jangan lupa sholawat

Divi WordPress Theme

UNLIMITED DOWNLOADS: 500,000+ Website Templates & Design Assets

All the Website Templates you need and many other design elements, are available for a monthly subscription by subscribing to Envato Elements. The subscription costs $29 per month and gives you unlimited access to a massive and growing library of 500,000+ items that can be downloaded as often as you need (stock photos too)!

4 pemikiran pada “Cara Membuat Halaman Kontak Responsive di Blogspot”

  1. Would you be interested in submitting a guest post on georgemartjr.com or possibly allowing us to submit a post to bingungonline.com ? Maybe you know by now that links are essential
    to building a brand online? If you are interested in submitting a post and obtaining a link to bingungonline.com , let me know and we will get it published in a speedy manner to our blog.

    Hope to hear from you soon
    George

Tinggalkan komentar

close