Cara Gampang Menciptakan Contact Form Di Blog Keren
Cara Praktis Membuat Contact Form di Blog Keren - Contact Form yaitu sebuah halaman statis kontak yang berfungsi sebagai sarana komunikasi supaya admin atau penulis blog tersebut sanggup dengan gampang dihubungi, baik itu mengenai pembicaraan pribadi atau lainnya.
Contact Form biasa disebut juga dengan Contact Us, formulir kontak atau hubungi saya, bahwasanya hal itu sama saja tergantung anda sendiri lebih menyukai kata yang mana. Secara umum formulir kontak biasanya terdiri dari Nama pengirim, email dan isi pesan yang ingin disampaikan, sangat sederhana dan gampang dipakai berdasarkan saya.
Biasanya keberadaan Contact Form dalam blog/website sanggup kita jadikan sebagai indikator bahwa blog tersebut terpercaya, lebih profesional atau bahkan biasa orang menyebutnya sebagai syarat bila ingin mendaftarkan ke adsense.
Sebenarnya ada beberapa penyedia pihak ketiga layanan pembuatan contact form untuk blog, namun berdasarkan aku itu yaitu hal yang merepotkan atau sudah untuk digunakan, pada kita sendiri sanggup membuatnya dengan gampang tanpa harus memakai pihak lain.
Oleh Karena itu berikut aku akan membagikan tutorial cara menciptakan contact form/contact us pada blog dengan gampang bahkan dengan tampilan yang lebih keren. Untuk itu aku akan membagikan 2 versi atau 2 tampilan mana yang anda lebih sukai, alasannya ada sebagian template blog yang tidak cocok, oleh alasannya itu aku membuatnya menjadi 2 mana yang cocok untuk blog anda.
Cara Membuat Contact Form di Blog
1. Pertama login terlebih dahulu di blog anda > Pilih Tata Letak
2. Pada sidebar pilih Tambahkan Gadget > cari dan pilih Formulir Kontak
3. Jika sudah, pilih sajian Halaman > buat Halaman Baru > Tambahkan arahan di bawah ini sempurna berada di mode HTML (bukan compose) > lalu pilih Publikasikan
Formulir Kontak Versi 1 (Saya rekomendasikan alasannya cocok untuk banyak sekali template blog)
Untuk tampilannya ibarat gambar dibawah ini
Atau anda juga sanggup memakai tampilan contact form yang lebih lebah ibarat versi ini
Tampilan Versi 2 :
Untuk tampilannya sanggup anda lihat di sini
2. Letakkan arahan ini sempurna berada di atas </body> atau <!--</body>--></body>
3. Jika sudah selanjutnya pilih Simpan Tema
Harusnya dengan cara itu akan berhasil, tapi sebelumnya cek terlebih dahulu di email anda, alasannya kadang email tersebut di saring ke spam, maka sebaiknya terlebih dahulu menceknya dan mengubahnya menjadi Bukan Spam.
Sekian dulu Tutorial dari aku perihal Cara Praktis Membuat Contact Form di Blog keren, bila ada sesuatu yang belum dimengerti silahkan mengunjungi kolom komentar, Terimakasih. Sumber https://www.analisyuki.com/
Contact Form biasa disebut juga dengan Contact Us, formulir kontak atau hubungi saya, bahwasanya hal itu sama saja tergantung anda sendiri lebih menyukai kata yang mana. Secara umum formulir kontak biasanya terdiri dari Nama pengirim, email dan isi pesan yang ingin disampaikan, sangat sederhana dan gampang dipakai berdasarkan saya.
Biasanya keberadaan Contact Form dalam blog/website sanggup kita jadikan sebagai indikator bahwa blog tersebut terpercaya, lebih profesional atau bahkan biasa orang menyebutnya sebagai syarat bila ingin mendaftarkan ke adsense.
Sebenarnya ada beberapa penyedia pihak ketiga layanan pembuatan contact form untuk blog, namun berdasarkan aku itu yaitu hal yang merepotkan atau sudah untuk digunakan, pada kita sendiri sanggup membuatnya dengan gampang tanpa harus memakai pihak lain.
Oleh Karena itu berikut aku akan membagikan tutorial cara menciptakan contact form/contact us pada blog dengan gampang bahkan dengan tampilan yang lebih keren. Untuk itu aku akan membagikan 2 versi atau 2 tampilan mana yang anda lebih sukai, alasannya ada sebagian template blog yang tidak cocok, oleh alasannya itu aku membuatnya menjadi 2 mana yang cocok untuk blog anda.
Cara Membuat Contact Form di Blog
1. Pertama login terlebih dahulu di blog anda > Pilih Tata Letak
2. Pada sidebar pilih Tambahkan Gadget > cari dan pilih Formulir Kontak
3. Jika sudah, pilih sajian Halaman > buat Halaman Baru > Tambahkan arahan di bawah ini sempurna berada di mode HTML (bukan compose) > lalu pilih Publikasikan
Formulir Kontak Versi 1 (Saya rekomendasikan alasannya cocok untuk banyak sekali template blog)
<div class="contact-form-widget"> <form name="contact-form"> <span class="ctitles">Nama Anda :</span> <input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" type="text" value="" /> <span class="ctitles">Alamat Email <span class="swajib">*</span> :</span> <input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" type="text" value="" /> <span class="ctitles">Pesan Anda <span class="swajib">*</span> :</span> <textarea class="contact-form-email-message" id="ContactForm1_contact-form-email-message" name="email-message" rows="10"></textarea> <input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" type="button" value="Kirim" /> <br /> <div class="contact-form-error-message" id="ContactForm1_contact-form-error-message"> </div> <div class="contact-form-success-message" id="ContactForm1_contact-form-success-message"> </div> </form> </div> <script src="https://www.blogger.com/static/v1/widgets/2271878333-widgets.js" type="text/javascript"></script> Untuk tampilannya ibarat gambar dibawah ini
Atau anda juga sanggup memakai tampilan contact form yang lebih lebah ibarat versi ini
Tampilan Versi 2 :
Silakan isi form di bawah ini untuk menghubungi saya. Jika tidak ada halangan dan kesibukan lainnya, aku akan pribadi menjawab pesan yang Anda kirimkan.<br /> <br /> <form name="contact-form"> <div class="formcolumn1"> <input id="ContactForm1_contact-form-name" name="name" placeholder="Name" size="30" type="text" value="" /><br /></div> <div class="formcolumn2"> <input id="ContactForm1_contact-form-email" name="email" placeholder="Email" size="30" type="text" value="" /><br /></div> <div class="formcolumn3"> <textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder="Message" rows="7"></textarea><br /></div> <div class="formcolumn4"> <input class="ripplelink" id="ContactForm1_contact-form-submit" type="button" value="Send Now" /><br /></div> <div style="max-width: 100%; text-align: center; width: 100%;"> <div id="ContactForm1_contact-form-error-message"> </div> <div id="ContactForm1_contact-form-success-message"> </div> </div> </form> <br /> <style scoped="" type="text/css"> #ContactForm1,#comments{display:none} #ContactForm1_contact-form-name,#ContactForm1_contact-form-email{display:inline-block;width:100%;height:auto;margin:10px auto;padding:14px;background:#f4f7f8;color:#222;border:0;border-bottom:1px solid #c6cbcc;transition:all .6s} #ContactForm1_contact-form-email-message{font-family:'Roboto';width:100%;height:250px;margin:10px auto;padding:14px;background:#f4f7f8;color:#222;border:0;border-bottom:1px solid #c6cbcc;transition:all .6s} #ContactForm1_contact-form-name:focus,#ContactForm1_contact-form-email:focus,#ContactForm1_contact-form-email-message:focus{background:#f4f7f8;outline:none;border-color:#f24a4a} #ContactForm1_contact-form-submit{background:#fff;color:#5f6368;font-size:16px;width:161px;height:45px;float:left;padding:0 0 0 20px;margin:10px 0 3px 5px;cursor:pointer;border:none;border-radius:24px;box-shadow:0 1px 2px 0 rgba(60,64,67,0.302),0 1px 3px 1px rgba(60,64,67,0.149);transition:box-shadow .08s linear,min-width .15s cubic-bezier(0.4,0.0,0.2,1)} .formcolumn4{position:relative} .formcolumn4:before{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnjl2uuUKYIfT1Xpxdx8a_dJcngAZ7oDrc2KPLS0syZEOLIXDBZa0jmUZm3i3E2WTjMEPh8cdbwubYEezcwFDseNlGTfN9rExuLqyzEZ0ok6ziWRrXTthRRadfyVc8EisauMAdvF1WiJxL/s1600/mailme.png);background-position:center;background-repeat:no-repeat;background-size:20px;content:'';display:block;height:63px;width:32px;position:absolute;z-index:1;left:15px;top:0} #ContactForm1_contact-form-submit:hover{background:#fafafb;box-shadow:0 1px 3px 0 rgba(60,64,67,0.302),0 4px 8px 3px rgba(60,64,67,0.149)} #ContactForm1_contact-form-error-message,#ContactForm1_contact-form-success-message{margin-top:35px} form{color:#888} .formcolumn1,.formcolumn2{float:left;width:50%} .formcolumn1,.formcolumn2{margin:0 0 10px 0;padding:0 10px 0 0} .formcolumn2{padding:0 0 0 10px} @media only screen and (max-width:768px){.formcolumn1,.formcolumn2{width:100%;padding:0}} </style><br />Untuk tampilannya sanggup anda lihat di sini
Catatan :
Sebaiknya di coba terlebih dahulu mengirim pesan di contact form anda, alasannya beberapa bencana tertentu pesan tidak sanggup dikirim. Jika sanggup terkirim silahkan di skip tutorial di bawah ini, tetapi bila anda mengalami hal tersebut anda sanggup melaksanakan tutorial di bawah ini cara mengatasi contact form tidak sanggup mengirim pesan.
Cara Mengatasi Contact Form blog tidak sanggup mengirim pesan
1. Buka Blog anda > pilih Tema/Template > Pilih Etit HTML2. Letakkan arahan ini sempurna berada di atas </body> atau <!--</body>--></body>
<script type='text/javascript'> //<![CDATA[ document.write("<scr" + "ipt type=\"text/javascript\" src=\"https://www.blogger.com/static/v1/widgets/2759014865-widgets.js\"></scr" + "ipt>"); //]]> </script> <script type='text/javascript'> if (typeof(BLOG_attachCsiOnload) != "undefined" && BLOG_attachCsiOnload != null) { window["blogger_templates_experiment_id"] = "templatesV1";window["blogger_blog_id"] = "<data:blog.blogId/>";BLOG_attachCsiOnload(""); }_WidgetManager._Init("//www.blogger.com/rearrange?blogID\x3d<data:blog.blogId/>","<data:blog.url/>","<data:blog.blogId/>"); _WidgetManager._RegisterWidget("_ContactFormView", new _WidgetInfo("ContactForm1", "footer1", null, document.getElementById("ContactForm1"), {"contactFormMessageSendingMsg": "Sending...", "contactFormMessageSentMsg": "Your message has been sent.", "contactFormMessageNotSentMsg": "Message could not be sent. Please try again later.", "contactFormInvalidEmailMsg": "A valid email address is required.", "contactFormEmptyMessageMsg": "Message field cannot be empty.", "title": "Contact Form", "blogId": "<data:blog.blogId/>", "contactFormNameMsg": "Name", "contactFormEmailMsg": "Email", "contactFormMessageMsg": "Message", "contactFormSendMsg": "Send", "submitUrl": "https://www.blogger.com/contact-form.do"}, "displayModeFull")); </script>3. Jika sudah selanjutnya pilih Simpan Tema
Harusnya dengan cara itu akan berhasil, tapi sebelumnya cek terlebih dahulu di email anda, alasannya kadang email tersebut di saring ke spam, maka sebaiknya terlebih dahulu menceknya dan mengubahnya menjadi Bukan Spam.
Sekian dulu Tutorial dari aku perihal Cara Praktis Membuat Contact Form di Blog keren, bila ada sesuatu yang belum dimengerti silahkan mengunjungi kolom komentar, Terimakasih. Sumber https://www.analisyuki.com/