Cara Membuat Contact Form ( Formulir Kontak ) Responsive di Halaman Statis pada Blog

Hai Blogger, Apa Kabar?

Pada kesempatan kali ini Newbie mau memberi sedikit informasi tentang Cara Membuat Contact Form atau Formulir kontak Responsive pada Halaman Statis.

Fungsi dari Contact Form sendiri pasti semua sudah pada tahu, yaitu untuk memberi pesan langsung kepada pemilik blog secara personal atau pribadi.

Cara Membuat Formulir Konta Responsive pada blog

Sekarang sudah banyak sekali website-website yang memberikan fasilitas untuk membuat formulir kontak pada blog. Akan tetapi kurangnya Responsive pada formulir kontak sehingga dapat mempengaruhi kinerja/loading pada blog kita menjadi berat.

 

Untuk yang ingin membuat Formulir kontak pada Halaman Statis Blog cukup mudah. Yuk kita langsung tutorialnya.

Langkah pertama.

Masukan atau copy kode Skrip boostrap dibawah ini pada Template blog anda

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

Taruh atau Paste di atas Kode Skrip </head>

Apabila di Template blog anda sudah ada skrip boostrap seperti itu, tidak usah menggunakan kode skrip tersebut.

Abaikan dan langsung menuju langkah ke-2

Langkah kedua

Masukan atau copy kode skrip dibawah ini, dan Taruh/Paste di atas </style> atau ]]</b:skin>

#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;
}

Lalu Save Template blog anda.

Langkah ketiga

Buat Halaman statis anda bisa juga di Postingan/Post pada blog anda.

Lalu Masukan/Copy kode skrip dan Taruh/Paste di HTML jangan di Compose

<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>

Seting halaman statis anda yang seperti gambar dibawah ini:

Setingan pada Halaman Statis blog

Lalu anda bisa Pertinjau atau dapat anda langsung Publikasikan.

Untuk melihat contoh Contact Form anda bisa lihat disini :

• Result

Untuk deskripsi bisa anda tulis sendiri sesuai keinginan anda.

Selesai. Cukup mudah bukan, Itulah cara Membuat Contact Form (Formulir Kontak) Responsive di Halaman Statis Pada Blog

Salam Blogger

Baca juga : Cara membuat Font Awesome di Blog

Share on Facebook

Share on Twitter

Share on Google+

Share on LinkedIn

Subscribe to receive free email updates: