Cara Membuat Contact Form Di Blog

Widget contact form atau halaman contact merupakan fitur customer support yang sangat penting di blog / website. Dengan adanya widget contact form pengunjung situs dapat memgirimkan feed back kepada pemilik blog, baik itu berupa saran maupun kritik yang mungkin tidak bisa disampaikan dihalaman blog.

Selain itu halaman contact juga merupakan wujud profesionalisme yang menggambarkan keseriusan pengelola blog. Jadi, untuk itu mari kita buat halaman kontak (contact form) dengan sebaik mungkin.

Contact Form Blogger
[ads id="ads1"]

Membuat Contact Form Blog

  1. Masuk ke dashboard blogger
  2. Pilih Menu Pages (Halaman)
  3. Klik Add New Page
  4. Buat Judul Halaman Kontak example: Contact Form
  5. Tambahkan kode html, css dan javascript contact form blogger melalui mode HTML View secara berurutan.

Code HTML Contact Form

<div class="cordial-content">
  <div class="cordial-contact">
     <div class="cordial-other">
       <div class="cordial-info">
         <h2>More Methods</h2>
         <h3>Call or Email</h3>
         <div class="svg-wrap">
           <a href="mailto:yourmail@gmail.com"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 23 23"><path d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"/></svg>yourmail@gmail.com</a>
         </div>
         <div class="svg-wrap">
           <a href="tel:+6282111000061"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z"/></svg>+6282111000061</a>
         </div>
         <h3>Connect</h3>
         <div class="svg-wrap">
           <a href="https://www.facebook.com/cordialblogger" title="Connect with us on facebook" rel="noopener" target="_blank"><svg xmlns="http://www.w3.org/2000/svg" width="60.734" height="60.733" viewBox="0 0 60.734 60.733"><path d="M57.378 0H3.352C1.502 0 0 1.5 0 3.354V57.38c0 1.852 1.502 3.353 3.352 3.353h29.086v-23.52h-7.914v-9.166h7.914v-6.76c0-7.843 4.79-12.116 11.787-12.116 3.355 0 6.232.252 7.07.36v8.2h-4.853c-3.805 0-4.54 1.81-4.54 4.463v5.85h9.08l-1.188 9.167h-7.892v23.52h15.475c1.852 0 3.355-1.503 3.355-3.35V3.35C60.732 1.5 59.23 0 57.378 0z"/></svg></a>
           <a href="http://twitter.com/cordialblogger" title="Connect with us on twitter" rel="noopener" target="_blank"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 612 612"><path d="M612 116.258c-22.525 9.98-46.694 16.75-72.088 19.772 25.93-15.527 45.777-40.155 55.184-69.41-24.322 14.378-51.17 24.82-79.775 30.48-22.906-24.438-55.49-39.66-91.63-39.66-69.333 0-125.55 56.218-125.55 125.514 0 9.828 1.11 19.427 3.25 28.606-104.325-5.24-196.834-55.223-258.75-131.174-10.822 18.51-16.98 40.078-16.98 63.1 0 43.56 22.182 81.994 55.836 104.48-20.575-.688-39.926-6.348-56.867-15.756v1.568c0 60.806 43.29 111.554 100.692 123.104-10.517 2.83-21.607 4.398-33.08 4.398-8.107 0-15.947-.803-23.634-2.333 15.985 49.907 62.336 86.2 117.253 87.194-42.946 33.655-97.098 53.656-155.915 53.656-10.134 0-20.116-.612-29.944-1.72 55.568 35.68 121.537 56.484 192.44 56.484 230.947 0 357.187-191.29 357.187-357.188l-.42-16.253C573.87 163.525 595.21 141.42 612 116.257z"/></svg></a>
           <a href="https://codepen.io/cordialblogger" title="Connect with us on codepen" rel="noopener" target="_blank"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path d="M100 34.2c-.4-2.6-3.3-4-5.3-5.3-3.6-2.4-7.1-4.7-10.7-7.1-8.5-5.7-17.1-11.4-25.6-17.1-2-1.3-4-2.7-6-4-1.4-1-3.3-1-4.8 0-5.7 3.8-11.5 7.7-17.2 11.5L5.2 29C3 30.4.1 31.8 0 34.8c-.1 3.3 0 6.7 0 10v16c0 2.9-.6 6.3 2.1 8.1 6.4 4.4 12.9 8.6 19.4 12.9 8 5.3 16 10.7 24 16 2.2 1.5 4.4 3.1 7.1 1.3 2.3-1.5 4.5-3 6.8-4.5 8.9-5.9 17.8-11.9 26.7-17.8l9.9-6.6c.6-.4 1.3-.8 1.9-1.3 1.4-1 2-2.4 2-4.1V37.3c.1-1.1.2-2.1.1-3.1 0-.1 0 .2 0 0zM54.3 12.3L88 34.8 73 44.9 54.3 32.4V12.3zm-8.6 0v20L27.1 44.8 12 34.8l33.7-22.5zM8.6 42.8L19.3 50 8.6 57.2V42.8zm37.1 44.9L12 65.2l15-10.1 18.6 12.5v20.1zM50 60.2L34.8 50 50 39.8 65.2 50 50 60.2zm4.3 27.5v-20l18.6-12.5 15 10.1-33.6 22.4zm37.1-30.5L80.7 50l10.8-7.2-.1 14.4z"/></svg></a>
           <a href="https://www.cordialblogger.com/" title="Follow This Blog"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 20c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-4 7v1c0 .55.45 1 1 1s1 .45 1 1v3c0 1.66-1.34 3-3 3H9c-1.66 0-3-1.34-3-3V8c0-1.66 1.34-3 3-3h4c1.66 0 3 1.34 3 3v1zm-6.05 1h2.6c.55 0 1-.45 1-1s-.45-1-1-1h-2.6c-.55 0-1 .45-1 1s.45 1 1 1zM14 13H9.95c-.55 0-1 .45-1 1s.45 1 1 1H14c.55 0 1-.45 1-1s-.45-1-1-1z"/></svg></a>
         </div>
       </div>
    </div>
    <div class="cordial-form">
      <h1>Customer Support</h1>
      <form action="cordialform">
        <div class="flex-rev">
          <input type="text" placeholder="Your Name" name="name" id="ContactForm1_contact-form-name" value=""/>
          <label for="ContactForm1_contact-form-name">Full Name</label>
        </div>
        <div class="flex-rev">
          <input type="email" placeholder="example@gmail.com" name="email" id="ContactForm1_contact-form-email" value=""/>
          <label for="ContactForm1_contact-form-email">Your Email</label>
        </div>
        <div class="flex-rev">
          <textarea placeholder="I have an idea for a project...." name="email-message" id="ContactForm1_contact-form-email-message" ></textarea>
          <label for="ContactForm1_contact-form-email-message">Email Message</label>
        </div>
        <input id="ContactForm1_contact-form-submit" type="button" value="Send Mail" />
        <div class="cordialformmessage">
          <p id="ContactForm1_contact-form-error-message" class="contact-form-error-message-with-border"></p>
          <p id="ContactForm1_contact-form-success-message" class="contact-form-success-message"></p>
        </div>
      </form>
    </div>
  </div>
</div>

CSS Contact Form

<style type="text/css">
//css contact form blogger, email contact, phone and social media.
.cordialformmessage{text-align:center;width:100%;height:20px;margin:0 auto}
.cordialformmessage p{text-align:center;line-height:1.6;margin:0}
.cordial-content{width:100%;display:flex;justify-content:center;overflow:auto}
.cordial-contact{width:100%;display:flex;border-radius:5px;overflow:hidden}
.cordial-other{width:57%;background-size:cover;background-position:center;position:relative;display:flex;flex-direction:column;justify-content:flex-end}
.cordial-other:before{content:"";position:absolute;top:0;left:0;height:100%;width:100%;background:linear-gradient(45deg,rgb(36,51,66),rgba(36,51,66,.81))}
.cordial-form{width:43%;background-color:#fff;padding-left:20px;display:flex;flex-direction:column;align-items:flex-end}
.cordial-form h1{text-align:center;margin-bottom:20px;width:100%}
.cordial-form form{width:100%;display:flex;flex-direction:column;align-items:flex-end}
.flex-rev{display:flex;flex-direction:column-reverse;margin-bottom:10px;width:100%}
.flex-rev input,.flex-rev textarea{border:none;background-color:#e6e6e6;padding:12px 10px;font-size:16px;resize:none;margin-top:7px;margin-bottom:16px;border-radius:5px;color:#243342;outline-color:#243342;outline-width:thin;-webkit-appearance:none}
.flex-rev textarea{height:150px}
.cordial-info{position:relative;padding:20px}.cordial-info h2{color:#16f1dc;font-size:25px}.cordial-info h3{color:#fff;letter-spacing:1.2px;margin-top:20px}.svg-wrap{display:flex;margin-top:14px}
.svg-wrap a{border:0;padding:0;display:flex;color:#fff;font-size:16px;justify-content:center;align-items:center}.svg-wrap a svg{width:20px;height:20px;fill:#fff;transition:fill 0.2s ease-in-out;margin-right:13px}.svg-wrap a:hover svg{fill:#16f1dc;cursor:pointer}.svg-wrap a:hover{background-color:transparent;color:#16f1dc;cursor:pointer}
#ContactForm1_contact-form-submit{display:inline-block;height:46px!important;padding:14px;text-decoration:none;letter-spacing:1.2px;font-size:14px;border:1px solid #243342;border-radius:5px;transition:0.15s ease-in-out}#ContactForm1_contact-form-submit{color:#fff;background:#243342}#ContactForm1_contact-form-submit:hover{cursor:pointer;color:#1bf1dc}
//css responsive contact form blogger
@media screen and (max-width:680px){
.cordial-contact{width:100%;flex-direction:column-reverse;box-shadow:0 0 0 0}
.cordial-other{width:100%;padding:20px 0}
.cordial-form{width:100%;padding:0 0 20px 0;}
.entry-title{display:none;}
#ContactForm1_contact-form-submit{width:100%}
}
@media screen and (max-height:660px){
.cordial-content{align-items:flex-start}
}
</style>

Script Contact Form

<script src="https://www.blogger.com/static/v1/widgets/2271878333-widgets.js"></script>
<script>//<![CDATA[
if (typeof(BLOG_attachCsiOnload) != 'undefined' && BLOG_attachCsiOnload != null) { window['blogger_templates_experiment_id'] = "templatesV1";window['blogger_blog_id'] = '2179188380144364589';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d2179188380144364589','//www.cordialbloggger.com','2179188380144364589');
_WidgetManager._RegisterWidget('_ContactFormView', new _WidgetInfo('ContactForm1', 'footer1', null, document.getElementById('ContactForm1'), {'contactFormMessageSendingMsg': 'Sending...', 'contactFormMessageSentMsg': 'Succes.', 'contactFormMessageNotSentMsg': 'Error Message.', 'contactFormInvalidEmailMsg': 'Invalid email.', 'contactFormEmptyMessageMsg': 'Empty Message.', 'title': 'Contact Form', 'blogId': '2179188380144364589', 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));
//]]></script>

Customize:

  • Ganti ID 2179188380144364589 blog pada script contact form blogger diatas dengan ID blog anda masing-masing, Sedikitnya ada empat id blog yang sama dan terletak di 4 lokasi dalam script contact form blogger yang harus diganti dengan ID blog anda.
  • Ganti Url blog www.cordialblogger.com pada script contact form dengan URL blog anda
  • Tambahkan css full width example: #post-wrapper,#main-wrapper{width:100%;} agar contact form terlihat elegan.
  • Terakhir jangan lupa untuk menekan tombol save untuk mengakhiri tutorial membuat halaman kontak (Contact form blogger) dihalaman statis.

Fitur Dan Spesifikasi Widget Contact Form

  • 100% Responsive
  • Mobile friendly
  • Contact Form Message
  • Ready Contact Via Email & Phone
  • Connect To Social Media

Demo

Untuk melihat demo contact form pada tutorial ini, silahkan lihat atau klik tombol contact us yang ada di footer blog ini.

Selesai, Hubungi admin melalui form contact us jika menemukan masalah saat membuat atau memasang contact form blogger di halaman statis (static page).
Lebih baru Lebih lama
Close