Memasang Formulir Kontak Pada Halaman Statis

Dhika    Oktober 28, 2018    CSS , HTML , TIPS BLOGGER   

Sobat blogger setelah sebelumnya saya sudah membagikan tips Cara agar blog menjadi Fast Loading, Di postingan saya kali ini akan sedikit berbagi Memasang Formulir Kontak Pada Halaman Statis kenapa saya membagikan tentang ini? karena kontak formulis seperti ini mempunyai peranan penting juga dalam suatu blog.

Lantas bagaimana cara membuatnya? dibawah ini saya sudah siapkan tips Memasang Formulir Kontak Pada Halaman Statis, ok sob kita langsung saja ya.
Cara memasang widget ini di 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'/>

Jika sudah kalian 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;
}

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

Selanjutnya kalian pilih menu seperti gambar dibawah ini

jika dalam pengaturannya sudah seperti gambar diatas, kalian 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 code diatas, dan jangan lupa memberikan judul di halamannya. Setelah itu kalian publikasikan. selesai.

Untuk melihat demo atau penampakan tampilannya kalian bisa lihat di bagian footer blog saya ini ya😇. Mungkin dari saya cukupkan sekian dulu selamat mencoba dan semoga bermanfaat.