
Assalamu'alaikum Sahabat Blogger.
Cara Membuat Contact Form Blog Pada Halaman Statis Blog - Pada postingan kali ini saya akan memberikan Cara bagaimana membuat Contact Form pada halaman sebuah blog. Sebelum masuk ke pembahasan kita harus paham, apa sih yang dimaksud Contact Form dan apa sih keuntungan dan kerugiannya jika kita membuat halaman Contact Form ?Pengertian Contact Form
Contact Form adalah halaman sebuah blog atau website yang digunakan untuk memudahkan pembaca atau pengiklan untuk menghubungi admin atau pemilik blog tersebut.Baca Juga : Cara Membuat Disclaimer di Blog Dengan Mudah
Keuntungan Menggunakan Contact Form
- Mempermudah pembaca untuk menyampaikan sebuah pertanyaan dari salah satu artikel anda secara privasi.
- Mempermudah pengiklan untuk menghubungi pemilik blog.
- Contact Form adalah salah satu syarat untuk mendaftarkan blog kita kepada Google Adsense.
Kerugian Menggunakan Contact Form
- Kerugiannya ialah terkadang para pengunjung sengaja mengirimkan pesan kepada pemilik blog maupun disengaja ataupun tidak disengaja.
Nah, setelah anda tau penjelasan, keuntungan dan kerugian tentang Contact Form sekarang kita masuk ke pembahasan intinya yaitu cara membuat halaman Contact Form pada blog.
Tahap #1
Silakan log in ke blog anda.
Tahap #2
Lalu anda klik halaman -> Halaman baru.

Tahap #3
Nah, sekarang anda sudah punya halaman Contact Form. Semoga artikel ini bermanfaat. TerimakasihWassalamu'alaikum
Penulis : MasPutro.com
Lalu anda klik halaman -> Halaman baru.

Tahap #3
Masukan kode script dibawah ini pada halaman HTML.

Source : Arlinadzgn.com
Kode Script
<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,#comments{
display:none}
#ContactForm1_contact-form-name,#ContactForm1_contact-form-email{
display: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-message{
font-family:'Poppins';
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:focus{
background:#fff;
outline:none;
border-color:rgba(0,0,0,0.18)}
#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://2.bp.blogspot.com/-nkmaptT0VoA/WumFePAy9DI/AAAAAAAAGlM/8lA5aRi2E-okumpdikjQancIKDjYaGNqwCLcBGAs/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>
<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'] = '3147969412929713724';
BLOG_attachCsiOnload('');
}
_WidgetManager._Init('//www.blogger.com/rearrange?blogID\3147969412929713724','//blogmasputro.blogspot.com/','3147969412929713724');
_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': '3147969412929713724', 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}
, 'displayModeFull'));
//]]>
</script>
Note : Ganti ID blog 3147969412929713724 dengan ID Blog andaDan hasilnya akan seperti gambar dibawah ini :
![]() |
Penulis : MasPutro.com
Nice . Sangat bermanfaat
BalasHapusmakasih gan :)
HapusPosting Komentar