Cara Membuat Contact Form Di Blog Seperti Arlina Design

Allow, selamat pagi, di kesempatan akan membawa pembahasan mengenai blogging indonesia Cara Membuat Contact Form Di Blog Seperti Arlina Design simak selengkapnya 

Written By Teamwork212 23 August 2019

")}relatedUrls.splice(0,relatedUrls.length),relatedTitles.splice(0,relatedTitles.length)} //]]>

Teamwork212 - Pada kesempatan kali ini cara saya bakal memberikan sedikit tutorial kecil atas cara membuat contact form alias contact us ala arlina design. 



Bukan hal yang berat bendu jika saya udah lama terjun di dunia blogging tapi apalah daya jika saya masih newbie alias pendatang baru.

Formulir komunikasi yang saya kasih kali ini merupakan formulir komunikasi milik Arlina Design.  Tampilannya dibilang sangat bagus dan elegan.

➽ Hal yang paling perdana sudah pasti bendu harus punya blog, sehabis itu buka blogger milik sobat. jika sudah terbuka cari menu Tata Letak ➯ klik  menu Tambahkan Gadget ➯ jika sudah terbuka cari widget yang bertuliskan Formulir Kontak klik tanda tambah yang ada di sampingnya sehabis itu klik simpan.

jika pada blog bendu sudah ada formulir komunikasi abaikan saja langkah yang pertama.

➽ Setelah langkah yang perdana sudah selesai bendu bakal di membimbing ke langkah berikutnya dimana bendu bakal di giring ke menu tema.

klik menu Tema ➯ tekan tulisan Edit HTML ➯ Tambahkan kode css di bawah ini sebelum </head>

<style type='text/css'>#ContactForm1,#ContactForm1 brdisplay:none</style>

➽ Jika sudah klik bincul Simpan.



➽ Setelah itu bendu masuk ke menu Halaman ➯ klik bincul Halaman Baru tambahkan kode di bawah ini di HTML post bukan di Compose Jika salah penempatan maka ulangi lagi.

<form name="contact-form">

<div class='formcolumn1'>

<input id="ContactForm1_contact-form-name" name="name" placeholder='Name' size="30" type="text" value="" />

</div>

<div class='formcolumn2'>

<input id="ContactForm1_contact-form-email" name="email" placeholder='Email' size="30" type="text" value="" />

</div>

<div class='formcolumn3'>

<textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder='Message' rows="7"></textarea>

</div>

<div class='formcolumn4'>

<input class="ripplelink" id="ContactForm1_contact-form-submit" type="button" value="Send Now" />

</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>

<style scoped="" type="text/css">

#ContactForm1,#commentsdisplay:none

#ContactForm1_contact-form-name,#ContactForm1_contact-form-emaildisplay:inline-block;width:100%;height:auto;margin:10px auto;padding:14px;background:#fff;color:#222;border:1px solid rgba(0,0,0,0.08)

#ContactForm1_contact-form-email-messagefont-family:'Roboto';width:100%;height:250px;margin:10px auto;padding:14px;background:#fff;color:#222;border:1px solid rgba(0,0,0,0.08)

#ContactForm1_contact-form-name:focus,#ContactForm1_contact-form-email:focus,#ContactForm1_contact-form-email-message:focusbackground:#fff;outline:none;border-color:rgba(0,0,0,0.18)

#ContactForm1_contact-form-submitbackground:#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)

.formcolumn4position:relative

.formcolumn4:beforebackground-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpwsmM5oFFLIlHG7xSVP7mkyJfBcb-m0p_Z22i-fnfA23N-Lw6ra9nbAHfVkcb3-z1blgcXCP1KjI5K1BmLau13l-cCJfjW-VvQ149_q9pRm7asxSkarpNdvKfTKHmYQNlpdj0XsIn_2nZ/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:hoverbackground:#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-messagemargin-top:35px

formcolor:#888

.formcolumn1,.formcolumn2float:left;width:50%

.formcolumn1,.formcolumn2margin:0 0 10px 0;padding:0 10px 0 0

.formcolumn2padding:0 0 0 10px

@media only screen and (max-width:768px).formcolumn1,.formcolumn2width:100%;padding:0

</style>

Lihat contoh gambar dibawah

Lihat contoh gambar dibawah

Buat bendu yang pengoptimasiannya blognya menyembunyikan CCS dan JavaScript bisa tambahkan kode dibawah ini sehabis kode atas langkah sebelumnya tadi.

<script src="https://www.blogger.com/static/v1/widgets/2271878333-widgets.js" type="text/javascript"></script>

<script type="text/javascript">

//<![CDATA[

if (typeof(BLOG_attachCsiOnload) != 'undefined' && BLOG_attachCsiOnload != null) window['blogger_templates_experiment_id'] = "templatesV1";window['blogger_blog_id'] = '7342017194742683056';BLOG_attachCsiOnload('');_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d7667424959411955529','//https://teamwork212.blogspot.com/','7667424959411955529');

_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': '7342017194742683056', 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do', 'displayModeFull'));

//]]>

</script>

Ganti URL dan ID blog yang di tandai di atas dengan URL dan ID blog sobat

Jika bendu merasa sarwa sudah sesuai tutorial, langkah selanjutnya bendu klik Publikasikan.

Demikianlah tutorial kecil tentang Cara Membuat Contact Form Di Blog Seperti Arlina Design

Seorang pengangguran yang gemar mendapatkan penghasilan dengan aksi blogging

", numPosts: 8, titleLength: "auto", thumbnailWidth: 250, thumbnailHeight: 170, noImage: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEheKwLszs3jYXFqdljD6zL0PJCZIgGi6J4sooVLoB_smjiuBvfmZcmo3syjLaqFuCGtczqpULcxT-CIoTStDu8S7PtEPQf67HO3i_IBV6bSrdnUfRJmZKpDtownFFueli0lXkUeSl6reshJ/w255-c-h170/no-image.png", containerId: "related-post-2600941051863293175", newTabLink: false, moreText: "Read More", widgetStyle: 3, callBack: function() };

Sekian pembahasan perihal Cara Membuat Contact Form Di Blog Seperti Arlina Design semoga artikel ini bermanfaat salam

Artikel ini diposting pada tag blogging indonesia, blogging dapat uang, blog motor, , tanggal 25-09-2019, di kutip dari https://teamwork212.blogspot.com/2019/08/contact-form-seperti-arlina-design.html