Cara Membuat Contact Form Di Blog Seperti Arlina Design

Hallo, selamat sore, di kesempatan akan membawa pembahasan mengenai blog ugm 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 hendak membagikan sedikit tutorial kecil tentang cara membuat contact form ataupun contact us ala arlina design. 



Bukan kejadian yang sulit bendu andaikata kita udah durasi terjun di dunia blogging tapi apalah kapasitas andaikata kita masih newbie ataupun ekspatriat baru.

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

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

jika dalam blog bendu pernah ada borang kontak abaikan saja langkah yang pertama.

➽ Setelah langkah yang pertama pernah beres bendu hendak di tuntun ke langkah berikutnya dimana bendu hendak di giring ke menu tema.

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

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

➽ Jika pernah klik tombol Simpan.



➽ Setelah itu bendu masuk ke menu Halaman ➯ klik tombol 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-emailkeras rgba(0,0,0,0.08)}

#ContactForm1_contact-form-email-messagebulat 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 misal gambar dibawah

Lihat misal gambar dibawah

Buat bendu yang pengoptimasiannya blognya menyembunyikan CCS dan JavaScript bisa tambahkan kode dibawah ini sehabis kode pada 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 semua pernah 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 melalui kegiatan 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() };

begitulah detil mengenai Cara Membuat Contact Form Di Blog Seperti Arlina Design semoga info ini menambah wawasan salam

tulisan ini diposting pada label blog ugm, blog adalah, blog saya, , tanggal 25-09-2019, di kutip dari https://teamwork212.blogspot.com/2019/08/contact-form-seperti-arlina-design.html