Inilah Cara Membuat Formulir Kontak Pada Halaman Statis | Memperbaiki

Admin   20.21   tutorial blog   Comment  

Hallo guys, setelah sebelumnya saya sudah membahas tentang Cara agar blog menjadi Fast Loading, Pada tulisan saya kali ini akan sedikit berbagi bagaimana cara Memasang Formulir Kontak Pada Halaman Statis. Kenapa saya membahas tentang ini? karena form kontak seperti ini mempunyai juga memiliki fungsi yang penting pada blog

Kemudian bagaimana cara membuatnya? dibawah ini telah saya siapkan trik Memasang Formulir Kontak Pada Halaman Statis, mari kita langsung saja ke pembahsan ini.
Teknik memasang widget ini pada halaman statis kalian cukup pasang terlebih dahulu Font Awesome 4.0.3 dibawah ini, dan letakan saja tepat sebelum </head>

<link href='//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css' rel='stylesheet'/>

Apabila kalian telah selesai, pasang juga css dibawah ini, dan bisa kalian letakan code cssnya tepat sebelum </style>

#ContactForm1 {
    display: none;
}

#ContactForm1_contact-form-name, #ContactForm1_contact-form-email {
    width: 300px;
    height: auto;
    margin: 10px auto;
    padding: 10px;
    background: #fdfdfd;
    color: #666;
    border: 1px dashed #ddd;
    transition: all 0.5s ease-in-out;
}

#ContactForm1_contact-form-email-message {
    width: 450px;
    height: 175px;
    margin: 10px auto;
    padding: 10px;
    background: #fdfdfd;
    color: #666;
    font-family: 'Roboto',sans-serif;
    border: 1px dashed #ddd;
    transition: all 0.5s ease-in-out;
}

#ContactForm1_contact-form-name:focus, #ContactForm1_contact-form-email:focus, #ContactForm1_contact-form-email-message:focus {
    background: #fff;
    outline: none;
    border: 1px dashed #f8a82a;
}

#ContactForm1_contact-form-submit {
    font-family: 'Roboto';
    font-size: 15px;
    width: 101px;
    height: 35px;
    float: left;
    color: #fff;
    padding: 0;
    margin: 10px 0 3px 0;
    cursor: pointer;
    background: #aaa;
    border: none;
    border-radius: 2px;
    transition: background 0.4s linear;
}

#ContactForm1_contact-form-submit:hover {
    background: #f8a82a;
}

#ContactForm1_contact-form-error-message, #ContactForm1_contact-form-success-message {
    width: 450px;
    margin-top: 35px;
}

Apabila Sudah terpasang selanjutnya kalian simpan template yang sudah kalian edit. Langkah selanjutnya adalah kalian buka kembali halaman Blogger > Pilih Halaman > Halaman Baru > Compose ganti dengan HTML > 

Kemudian pilih menu seperti gambar dibawah ini

Bila pengaturannya sudah seperti gambar diatas, kalian tinggal klik selesai. Lalu kalian copy code dibawah ini

 <form name="contact-form">
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;"><i class="fa fa-user"></i> Nama</span>
<input id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" /> 

<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;"><i class="fa fa-envelope"></i> Alamat Email <span style="color: red; font-weight: bolder;">*</span></span>
<input id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" /> 

<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;"><i class="fa fa-pencil"></i> Isi Pesan <span style="color: red; font-weight: bolder;">*</span></span>
<textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" rows="5"></textarea>
<input id="ContactForm1_contact-form-submit" type="button" value="Kirim" /> 
<div style="max-width: 222px; text-align: center; width: 100%;">
<div id="ContactForm1_contact-form-error-message">
</div>
<div id="ContactForm1_contact-form-success-message">
</div>
</div>
</form>

Silahkan pastekan script diatas, dan jangan lupa memberikan judul pada halamannya. Setelah itu kalian publish, selesai.

Semoga bermanfaat, selamat mencoba.