Mengatasi Submit Form Yang Redirect Ke Halaman Thanks Formspree

Mengatasi Submit Form Yang Redirect Ke Halaman Thanks Formspree

Bola Hero Gawai

Mengatasi Submit Form Yang Redirect Ke Halaman Thanks Formspree

Mengatasi Submit Form Yang Redirect Ke Halaman Thanks Formspree
Beberapa waktu yang lalu saya memposting solusi jitu dan simple mengatasi error contact form dengan menggunakan layanan formspree. Namun ada beberapa keluhan yaitu setelah submit pesan maka pengguna akan di-redirect ke halaman Thanks Formspree.

Lalu bagaimana agar setelah submit pesan, pengguna masih berada di blog kita?

Tentu saja caranya cukup mudah karena Formspree sendiri sudah memberikan solusinya agar pengguna form tidak di-reidrect ke halaman Formspree yaitu dengan menambahkan input di bawah ini ke dalam form.


<input type="hidden" name="_next" value="//site.io/thanks.html" />


Lalu bagaimana cara membuat halaman "Thanks" untuk contact form?

Saya akan mencontohkan cara membuat halaman "Thanks" untuk contact form Blogger, untuk demo silahkan coba contact form ini.


Nah jika Anda menggunakan layanan Formspree, untuk membuat seperti demo silahkan ikuti caranya di bawah ini.

Silahkan buat halaman statis baru dengan judul "Thanks" kemudian silahkan simpan kode di bawah ini ke editor postingan mode HTML.


<style scoped="scoped">
.thanks_layout{text-align: center; position: fixed; top:0; left:0; bottom:0; right:0; background:rgba(0,0,0,.8);z-index:99999}
.thanks_message{width:50%;background:#fff;border-radius:5px;padding:20px;border:1px solid transparent;text-align: center; color:#333; position: absolute; top: 10%; left: 50%;margin-left:-25%;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;box-sizing: border-box;}
@media screen and (max-width:768px){.thanks_message{width:90%!important;margin-left:-45%!important;}
}
</style>
<div class="thanks_layout">
<div class="thanks_message">
<img alt="Thumb" height="48" width="48" src="https://4.bp.blogspot.com/-rY5km74yj_I/V1ItqrbspBI/AAAAAAAAmxA/SK-aLPTjyuo8uiSYylRJ4tLslk2LJ581QCLcB/s1600/ic_thumb_up_black_24dp_2x.png" />
        <h2>Form submitted successfully</h2>
        <div>Jika tidak ada halangan dan kesibukan lainnya, admin akan langsung merespon pesan yang Anda kirimkan.</div><br/>
        <div><a href="/" title="Homepage"><b>Homepage</b></a> atau kembali ke <a href="URL HALAMAN CONTACT FORM" title="Contact Form"><b>Contact Form</b></a></div>
</div>
</div>


Silahkan ganti kode URL HALAMAN CONTACT FORM dengan url halaman contact form blog Anda. Kemudian silahkan terbitkan halamannya dan catat URL-nya.

Kemudian untuk contact form Blogger blog Anda silahkan gunakan kode di bawah ini.


<style scoped="scoped" type="text/css">
#ContactForm1_contact-form-name, #ContactForm1_contact-form-email{width: 70%;height:auto;margin: 5px auto 15px;padding: 10px;background: #ebebeb;border: 1px solid #ccc;color:#777;border-radius:3px;box-shadow: 0px 4px 0px 0px #c7c5c7;}
#ContactForm1_contact-form-name:focus, #ContactForm1_contact-form-email:focus, #ContactForm1_contact-form-email-message:focus{background: #fffff7;outline:none}
#ContactForm1_contact-form-email-message{width: 95%;height: 100px;margin: 5px auto;padding: 10px;background: #ebebeb;border: 1px solid #ccc;color:#777;font-family:Arial, sans-serif;border-radius:3px;box-shadow: 0px 4px 0px 0px #c7c5c7;}
#ContactForm1_contact-form-submit {display:block;height: 35px;float: left;color: #FFF;padding: 0 20px;margin: 10px 0 5px 0;cursor: pointer;background-color:#f4836a;box-shadow: 0px 4px 0px 0px #c75b45;border:1px solid #eb7d67;border-radius:3px;text-shadow:0px 1px 0px #de5135;}
#ContactForm1_contact-form-submit:hover {background-color:#f5785f;}
#ContactForm1_contact-form-submit:active {position:relative;top:2px;box-shadow: 0px 2px 0px 0px #c75b45;}
#ContactForm1_contact-form-submit:focus{outline:none}
#ContactForm1_contact-form-error-message, #ContactForm1_contact-form-success-message{width: 100%;margin-top:35px;text-align:left}
@media screen and (max-width: 768px){
.contact-form-box{width:100%;}
#ContactForm1_contact-form-name, #ContactForm1_contact-form-email,#ContactForm1_contact-form-email-message{width: 96%;}
}
@media screen and (max-width: 480px){
#ContactForm1_contact-form-name, #ContactForm1_contact-form-email,#ContactForm1_contact-form-email-message{width: 94%;}
}
</style>
<div class="contact-form-box">
<form action="https://formspree.io/username@gmail.com" method="POST">
<input type="hidden" name="_next" value="URL HALAMAN THANKS" />
<input id="ContactForm1_contact-form-name" name="name" required="required" placeholder="Name" size="30" type="text" value="" /><br />
<input id="ContactForm1_contact-form-email" name="email" required="required" placeholder="Email" size="30" type="text" value="" /><br />
<textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" required="required" placeholder="Message" rows="5"></textarea><br />
<input id="ContactForm1_contact-form-submit" type="submit" value="Kirim" /><br />
</form>
</div>


Silahkan ganti username@gmail.com dengan alamat email Anda, kemudian ganti juga URL HALAMAN THANKS dengan url halaman "Thanks" yang tadi dibuat.

Jika Anda menggunakan form lain, pastikan semua input dilengkapi dengan kode required="required" dan untuk tombol kirim menggunakan type="submit".

Selesai... selamat mencoba.

Share this:

Share this with short URL: Get Short URL loading short url

You Might Also Like:

Disqus
Blogger
Pilih Sistem Komentar Yang Disukai

0 Comment

Add Comment

Komentar dengan link promo akan masuk spam.

Gunakan konversi tool jika ingin menyertakan kode atau gambar.


image
How to style text in Disqus comments Top Disqus Commentators
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Box

How to get ID DISQUS - http://disq.us/p/[ID DISQUS] - lihat di sini

strong em u strike
pre code pre code spoiler
embed

Like Kompi Ajaib? Keep us running by whitelisting Kompi Ajaib in your ad blocker.

This is how to whitelisting Kompi Ajaib in your ad blocker.

Thank you!

×
×
×