Mengatasi Submit Form Yang Redirect Ke Halaman Thanks Formspree

Ditulis oleh: Adhy Suryadi

Ditulis pada: 6/04/2016

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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUNBYqgIgY_nQgcFPM4OdNtS5sm9JqRVwGmaQzB8cZp_GBCf2I_hDRx48urii_js60t1nkp2g5VvPOnu11HzX4snxiWsnFkiQHsYxokETtgXqXPHbXP2Ma3I-Ts5sRDhvXGXrBBIGwKQTs/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.