Cara Memasang Formulir Kontak Pada Halaman Statis Blog
 |
| Cara Memasang Formulir Kontak Pada Halaman Statis Blog |
Memasang formulir kontak pada halaman statis sangatlah gampang dan tentu saja fungsinya cukup banyak. Silahkan lihat pada halaman contact blog ini, jikalau Anda tertarik silahkan ikuti tutorial berikut.
Cara Membuat Halaman Contact Pada Blog.
1. Pertama-tama buatlah halaman statis terlebih dahulu dengan nama contact, contact me, atau apa pun yang Anda suka. Jika sudah, jangan di publish dulu melainkan di save/simpan kemudian tutup.
2. Menuju ke tata letak, kemudian add widget dan pilih formulir kontak. Saya sarankan untuk memasangnya di footer saja.
3. Setelah itu pilih Template kemudian Edit HTML. Masukkan CSS berikut sebelum isyarat ]]></b:skin> atau </style>.
/* CSS Contact ---- https://rodamotiv.blogspot.com/ */ #ContactForm1,#ContactForm1 br{display:none;} #ContactForm1_contact-form-name, #ContactForm1_contact-form-email{ width:50%;height:auto;margin:5px auto;padding:10px;background:#fff;color:#444;border:1px solid #e6e6e6;border-radius:3px;transition:all 0.5s ease-out;} #ContactForm1_contact-form-email-message{width:450px;height:175px;margin:5px 0;padding:10px;background:#fff;color:#444;font-family:'Open Sans',sans-serif;border:1px solid #e6e6e6;border-radius:3px;transition:all 0.5s ease-out;} #ContactForm1_contact-form-name:focus, #ContactForm1_contact-form-email:focus, #ContactForm1_contact-form-email-message:focus{outline:none;background:#fff;color:#666;border-color:rgba(81,203,238,1);box-shadow:0 0 5px rgba(81,203,238,0.7);} #ContactForm1_contact-form-submit {font-family:'Open Sans';float:left;background:#f3f3f3;color:#aaa;margin:10px auto;vertical-align:middle;cursor:pointer;padding:10px 18px!important;font-weight:700;font-size:14px;text-align:center;text-transform:uppercase;letter-spacing:0.5px;border:none;border-radius:4rem;background-image: linear-gradient(110deg, #fe3434 0%, #fe3434 50%, transparent 50%, transparent 100%);background-size:200%;background-position:120% 0;background-repeat:no-repeat;transition: background-position .4s ease, color .4s ease;} #ContactForm1_contact-form-submit:hover {color:#fff;background-position:0 0;} #ContactForm1_contact-form-error-message, #ContactForm1_contact-form-success-message{ width:450px;margin-top:35px;}4. Masih pada edit HTML, silahkan cari isyarat widget Formulir Kontak yang dipasang sebelumnya. Kira-kira menyerupai ini kodenya.
<b:widget id='ContactForm1' locked='false' title='Formulir Kontak' type='ContactForm'> <b:includable id='main'> <b:if cond='data:title != ""'> <h2 class='title'><data:title/></h2> </b:if> <div class='contact-form-widget'> <div class='form'> <form name='contact-form'> <p/> <data:contactFormNameMsg/> <br/> <input class='contact-form-name' expr:id='data:widget.instanceId + "_contact-form-name"' name='name' size='30' type='text' value=''/> <p/> <data:contactFormEmailMsg/> <span style='font-weight: bolder;'>*</span> <br/> <input class='contact-form-email' expr:id='data:widget.instanceId + "_contact-form-email"' name='email' size='30' type='text' value=''/> <p/> <data:contactFormMessageMsg/> <span style='font-weight: bolder;'>*</span> <br/> <textarea class='contact-form-email-message' cols='25' expr:id='data:widget.instanceId + "_contact-form-email-message"' name='email-message' rows='5'/> <p/> <input class='contact-form-button contact-form-button-submit' expr:id='data:widget.instanceId + "_contact-form-submit"' expr:value='data:contactFormSendMsg' type='button'/> <p/> <div style='text-align: center; max-width: 222px; width: 100%'> <p class='contact-form-error-message' expr:id='data:widget.instanceId + "_contact-form-error-message"'/> <p class='contact-form-success-message' expr:id='data:widget.instanceId + "_contact-form-success-message"'/> </div> </form> </div> </div> <b:include name='quickedit'/> </b:includable> </b:widget>5. Hapus isyarat yang telah aku warnai kemudian save. Jika sudah, eksklusif menuju ke halaman statis yang telah di buat sebelumnya kemudian ubahlah Compose ke HTML.
6. Dalam Mode HTML, masukkan isyarat berikut kemudian publish.
<div dir="ltr" style="text-align: left;" trbidi="on"> <form name="contact-form"><span style="color: #999999; display: inline-block; font-family: Open Sans,Arial,Helvetica,sans-serif; font-weight: 700; margin-bottom: 10px; margin-top: 15px;"><i class="fa fa-user"></i> Name </span><br /> <input id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" /><br /> <br /> <span style="color: #999999; display: inline-block; font-family: Open Sans,Arial,Helvetica,sans-serif; font-weight: 700; margin-bottom: 10px; margin-top: 15px;"><i class="fa fa-envelope-o"></i> Email Address <span style="background: #aaa; border-radius: 3px; color: white; font-size: x-small; font-weight: normal; line-height: normal; margin-left: 5px; padding: 0 3px 1px 3px;">important</span></span><br /> <input id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" /><br /> <br /> <span style="color: #999999; display: inline-block; font-family: Open Sans,Arial,Helvetica,sans-serif; font-weight: 700; margin-bottom: 10px; margin-top: 15px;"><i class="fa fa-pencil-square-o"></i> Content <span style="background: #aaa; border-radius: 3px; color: white; font-size: x-small; font-weight: normal; line-height: normal; margin-left: 5px; padding: 0 3px 1px 3px;">important</span></span><br /> <textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" rows="5"></textarea> <br /> <input id="ContactForm1_contact-form-submit" type="button" value="Send" /> <br /> <div id="ContactForm1_contact-form-error-message"></div><div id="ContactForm1_contact-form-success-message"></div></form> <br /></div>Jika sudah, silahkan uji coba halaman contact tersebut kemudian cek email Anda. Sekian tutorial kali ini, jikalau ada pertanyaan, kritik dan saran silahkan berkomentar pada halaman ini. Terima kasih telah membaca artikel di .
Original post by wajahilmu.blogspot.com ()
Comments
Post a Comment
Komentar yang kamu masukkan sedang dalam peninjauan.