11/13/2020

Cara Membuat Contact Form di Blogger Paling Mudah

Membuat Halaman Contact Form di blogger adalah salah satu cara agar pengunjung blog bisa berkomunikasi dengan si pemilik blog melalui email, entah itu untuk sekedar bertanya ataupun bekerja sama.



Meskipun sudah ada kolom komentar blog, hal itu masih di rasa kurang cukup. Karena sering kali komentar blog tidak selalu diperhatikan dan terkesan tidak fast respon. Maka dari itu, sangat penting membuat halaman contact form agar pesan yang dikirimkan oleh pengunjung bisa langsung masuk ke dalam email dengan notifikasi pemberitahuan yang akan memberitahu kamu setiap kali ada pesan masuk.





[caption id="attachment_1866" align="aligncenter" width="593"]Contoh Pesan Dari Contact Form Contoh Pesan Dari Contact Form[/caption]

Contact form ini banyak sekali penyebutannya, seperti contact us, contact me, hubungi kami, hubungi saya, dan lain sebagainya tergantung bagaimana kamu memberikan namanya. Yang terpenting adalah pengunjung bisa tau bagaimana cara menghubungi kita.



Terlebih lagi jika kamu menanggapi setiap pesan yang masuk ke dengan ramah, kamu bisa membangun relasi antar pengunjung. Siapa tau diantara pengunjung blogmu ada yang menawarkan sebuah kerja sama dan kamu akan mendapatkan penghasilan tambahan dari kerja sama tersebut.



Di internet, banyak sekali yang memberikan tutorial cara membuat contact form di blogger. Akan tetapi beberapa diantaranya cukup ribet dilakukan, seperti mengunjungi suatu website, membuat akun ataupun memasukan suatu kode ke template blog yang bisa menyebabkan blog kamu error jika salah.



Namun disini, saya akan menjelaskan cara paling mudah dan cepat membuat halaman contact form di blogger. Berikut adalah ulasannya.




Cara Memebuat Contact Form di Blogger


1. Masuk ke dasahboard blogger



2. Pilih halaman (pages) dan klik halaman baru (new page)



Membuat Contact Form di Halaman atau Pages Blogger



3. Lalu beri nama halaman tersebut, misalkan contact form.



4. Masuk mode HTML dan paste kode dibawah ini.




<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: #e8554e;

    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: #e8554e

  }

  

  #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: #e8554e;

    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;

  }

  

  .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 Buseth ID. </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" 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'] = '7446695862980181816';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d7446695862980181816','//kompimagazine.blogspot.com/','7446695862980181816');

_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": "7446695862980181816", "contactFormNameMsg": "Name", "contactFormEmailMsg": "Email", "contactFormMessageMsg": "Message", "contactFormSendMsg": "Send", "submitUrl": "https://www.blogger.com/contact-form.do"}, "displayModeFull"));

</script>


Meletakan Kode HTML Contact Form Blogger di Halaman Statis



5. Pada kode diatas, ganti ID blog saya yaitu 7446695862980181816 dengan ID Blog Kamu. Kamu bisa menemukannya dipaling bawah.



Mengganti ID Blog Contact Form



6. Simpan dan lihat hasilnya.


 

bm

Writter

Posting Komentar

Komentar anda sangat berpengaruh untuk kemajuan blog sederhana ini, silahkan berikan saran, kiritik atau apapun itu untuk perkembangan blog kedepannya. Bijaklah dalam berkomentar untuk melihat seberapa bijak anda.

avatar
Admin Blog Wendy Online
Welcome to Blog Wendy theme