Cara Memasang Contact Form Pada Halaman Statis

Untuk memudahkan pengunjung blog kita menghubungi kita. Mulai dari mengirimkan saran dan kritikan terhadap blog, bertanya kepada admin blog.

Bahkan dapat juga sebagai sarana pembuka dialog hingga curhat-curhatan persoalan pacar, rumah tangga, keuangan dan kejombloan.

Cara ini dapat di terapkan untuk blog teman semua terutama blog jual beli, marketing, dll.

Contact form intinya sudah di sediakan di blogger yang berbentuk widget. Jadi, kita dapat menempatkanya pada sidebar blog kita namun kali ini kita mencoba menempatkanya di halaman statis blog, ini kedengaranya sedikit sulit jikalau belum mempraktekanya.

Ok eksklusif saja disini aku tidak akan membahas mengenai fungsi dan kenapa widget formulir kontak memiliki tugas yang penting pada sebuah blog tapi disini aku akan mengembangkan tips wacana cara memasang formulir kontak pada halaman statis blogger, silahkan disimak.

Cara Memasang Formulir Kontak Pada Halaman Statis 

1. Login ke Blogger
2. Buka hidangan Tata Letak kemudian Tambahkan Gadget.
3. Buka Gadget Lainnya plih Formulir Kontak. Perhatikan gambar berikut ini.

Sebelumnya Anda sudah memasang font awesome pada template, jikalau belum silahkan tambahkan link dibawah ini sebelum </head>

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

4. Selanjutnya silahkan buka menu Template kemudian Edit HTML
5. Letakan instruksi di bawah ini sebelum  </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; }

5. Simpan template.
4. Perhatikan kembali hidangan di dasbor blog, klik Halaman.
6. Lalu Buat Halaman Baru pindah ke HTML.
7. Kemudian isi dengan instruksi berikut 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>

8. Publikasikan dan lihat hasilnya.

Untuk font yang dipakai dan lainnya silahkan sesuaikan kembali dengan template Anda.

Referensi :
https://turuninsay.blogspot.com/search?q=memasang-formulir-kontak-pada-halaman-statis
https://turuninsay.blogspot.com/search?q=memasang-formulir-kontak-pada-halaman-statis

Sumber https://www.denylistianto.com/

Bagikan Artikel ini