Skip to main content

Cara Membuat Contact Form Responsive di Blogger

Cara Membuat Contact Form Responsive di Blogger - Saya akan membagikan tutorial cara membuat contact form / contact us pada blog dengan mudah, serta dengan tampilan efek yang keren dan enak di pandang.

Sebenarnya saya sudah pernah membahas tentang cara membuat kontak pada blog, namun pada kesempatan kali ini saya akan membagikan Contact Form yang lebih responsive, lebih keren dan cocok untuk berbagai macam template pada blog. Sebelumnya saya jelaskan terlebih dahulu contact form ini memiliki beberapa nama yang cukup populer seperti contact us, hubungi kami, kontak namun sebenarnya memiliki pengertian yang sama.

Halaman kontak atau contact form pada blog sangatlah penting, selain sebagai kelengkapan dalam blog contact form juga berfungsi untuk  mempermudah pengunjung untuk menghubungi admin atau pemilik blog secara langsung atau bertanya suatu hal pribadi atau melakukan kerjasama.

Cara membuat Contct Form pada blog ini sangatlah mudah, kita tidak perlu menggunakan jasa website pihak ketiga untuk menggunakannya, cukup dengan menyalin kode di bawah ini kita langsung dapat menggunakannya dengan praktis dan tentunya dengan tampilan yang lebih keren. Untuk itu saya akan membagikan 2 Versi Contact Form, anda tinggal memilih mana yang anda suka dan ingin digunakan.

Cara Membuat Contact Form Responsive di Blogger

1. Masuk ke Blog anda > pilih menu Halaman > kemudian buat Halaman Baru

2. Selanjutnya pilih menu HTML > kemudian letakkan kode ini di dalamnya

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>

3. Jika sudah pilih Publikasikan

Kode di atas langsung bisa anda gunakan dan dapat bekerja dengan baik saat mengirim pesan, Untuk Versi 2 nya anda bisa mengunakan kode di bawah ini.

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>

Untuk tampilan Versi 2 ganti semua kode yang di tandai 6154920600666252113 dengan ID Blog anda dan analisyuki.com dengan Blog Anda, Jika sudah silahkan Publikasikan.

Bagaimana menurut anda? cukup kere kan efek dan tampilannya. Sebelum saya akhiri dan bagi yang belum tau BlogID anda, kamu bisa melihatnya tepat berada di URL pada menu blog anda.

Saya rasa cukup sekian tutorial dari saya tentang Cara Membuat Contact Form Responsive di Blogger. Jika ada sesuatu yang kurang dipahami silahkan bertanya di kolom komentar, Terimakasih.

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