Cara Membuat Contact Form Blog Pada Halaman Statis Blog

Assalamu'alaikum Sahabat Blogger.

Cara Membuat Contact Form Blog Pada Halaman Statis Blog - Pada postingan kali ini saya akan memberikan Cara bagaimana membuat Contact Form pada halaman sebuah blog. Sebelum masuk ke pembahasan kita harus paham, apa sih yang dimaksud Contact Form dan apa sih keuntungan dan kerugiannya jika kita membuat halaman Contact Form ?

Pengertian Contact Form

Contact Form adalah halaman sebuah blog atau website yang digunakan untuk memudahkan pembaca atau pengiklan untuk menghubungi admin atau pemilik blog tersebut.

Baca Juga : Cara Membuat Disclaimer di Blog Dengan Mudah

Keuntungan Menggunakan Contact Form

1. Mempermudah pembaca untuk menyampaikan sebuah pertanyaan dari salah satu artikel anda secara privasi.
2. Mempermudah pengiklan untuk menghubungi pemilik blog.
3. Contact Form adalah salah satu syarat untuk mendaftarkan blog kita kepada Google Adsense.

Baca Juga : Cara Membuat Privacy Policy Dengan Mudah

Kerugian Menggunakan Contact Form

1. Kerugiannya ialah terkadang para pengunjung sengaja mengirimkan pesan kepada pemilik blog maupun disengaja ataupun tidak disengaja.

Nah, setelah anda tau penjelasan, keuntungan dan kerugian tentang Contact Form sekarang kita masuk ke pembahasan intinya yaitu cara membuat halaman Contact Form pada blog.

Tahap #1

Silakan log in ke blog anda.

Tahap #2
Lalu anda klik halaman -> Halaman baru.

Tahap #3

Masukan kode script dibawah ini pada halaman HTML.

Kode Script

<form name="contact-form">
  <div class="formcolumn1">
    <input id="ContactForm1_contact-form-name" name="name" placeholder="Name" size="30" type="text" value="" /> 
  </div>
  <div class="formcolumn2">
    <input id="ContactForm1_contact-form-email" name="email" placeholder="Email" size="30" type="text" value="" /> 
  </div>
  <div class="formcolumn3">
    <textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder="Message" rows="7">
    </textarea> 
  </div>
  <div class="formcolumn4">
    <input class="ripplelink" id="ContactForm1_contact-form-submit" type="button" value="Send Now" /> 
  </div>
  <div style="max-width: 100%; text-align: center; width: 100%;">
    <div id="ContactForm1_contact-form-error-message">
    </div>
    <div id="ContactForm1_contact-form-success-message">
    </div>
  </div>
</form>
<style scoped="" type="text/css">
  #ContactForm1,#comments{
    display:none}
  #ContactForm1_contact-form-name,#ContactForm1_contact-form-email{
    display:inline-block;
    width:100%;
    height:auto;
    margin:10px auto;
    padding:14px;
    background:#fff;
    color:#222;
    border:1px solid rgba(0,0,0,0.08)}
  #ContactForm1_contact-form-email-message{
    font-family:'Poppins';
    width:100%;
    height:250px;
    margin:10px auto;
    padding:14px;
    background:#fff;
    color:#222;
    border:1px solid rgba(0,0,0,0.08)}
  #ContactForm1_contact-form-name:focus,#ContactForm1_contact-form-email:focus,#ContactForm1_contact-form-email-message:focus{
    background:#fff;
    outline:none;
    border-color:rgba(0,0,0,0.18)}
  #ContactForm1_contact-form-submit{
    background:#fff;
    color:#5f6368;
    font-size:16px;
    width:161px;
    height:45px;
    float:left;
    padding:0 0 0 20px;
    margin:10px 0 3px 5px;
    cursor:pointer;
    border:none;
    border-radius:24px;
    box-shadow:0 1px 2px 0 rgba(60,64,67,0.302),0 1px 3px 1px rgba(60,64,67,0.149);
    transition:box-shadow .08s linear,min-width .15s cubic-bezier(0.4,0.0,0.2,1)}
  .formcolumn4{
    position:relative}
  .formcolumn4:before{
    background-image:url(https://2.bp.blogspot.com/-nkmaptT0VoA/WumFePAy9DI/AAAAAAAAGlM/8lA5aRi2E-okumpdikjQancIKDjYaGNqwCLcBGAs/s1600/mailme.png);
    background-position:center;
    background-repeat:no-repeat;
    background-size:20px;
    content:'';
    display:block;
    height:63px;
    width:32px;
    position:absolute;
    z-index:1;
    left:15px;
    top:0}
  #ContactForm1_contact-form-submit:hover{
    background:#fafafb;
    box-shadow:0 1px 3px 0 rgba(60,64,67,0.302),0 4px 8px 3px rgba(60,64,67,0.149)}
  #ContactForm1_contact-form-error-message,#ContactForm1_contact-form-success-message{
    margin-top:35px}
  form{
    color:#888}
  .formcolumn1,.formcolumn2{
    float:left;
    width:50%}
  .formcolumn1,.formcolumn2{
    margin:0 0 10px 0;
    padding:0 10px 0 0}
  .formcolumn2{
    padding:0 0 0 10px}
  @media only screen and (max-width:768px){
    .formcolumn1,.formcolumn2{
      width:100%;
      padding:0}
  }
</style> 
<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'] = '3147969412929713724';
    BLOG_attachCsiOnload('');
  }
  _WidgetManager._Init('//www.blogger.com/rearrange?blogID\3147969412929713724','//blogmasputro.blogspot.com/','3147969412929713724');
  _WidgetManager._RegisterWidget('_ContactFormView', new _WidgetInfo('ContactForm1', 'footer1', null, document.getElementById('ContactForm1'), {
    'contactFormMessageSendingMsg': 'Sending...', 'contactFormMessageSentMsg': 'Your message has been sent.', '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': '3147969412929713724', 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}
                                                                     , 'displayModeFull'));
  //]]>
</script>

Source : Arlinadzgn.com

Note : Ganti ID blog 3147969412929713724 dengan ID Blog anda

Dan hasilnya akan seperti gambar dibawah ini :

Nah, sekarang anda sudah punya halaman Contact Form. Semoga artikel ini bermanfaat. TerimakasihWassalamu'alaikum

Penulis : MasPutro.com