Cara Membuat Google Form untuk Contact Form di Blog AMP Contact form adalah sebuah halaman di blog yang berfungsi agar para pembaca bisa menghubungi pemilik blog atau admin. Maka contact form sangatlah penting bagi kita maupun para pembaca jika mereka ingin menyampaikan sesuatu kepada pemiliki blog. Biasanya contact form diberi judul
Hubungi Kami atau
Contact Us dan ditaruh di deretan atau tab menu di bagian atas maupun bawah website ataupun blog.
Nah, kali ini kita akan memanfaatkan Google Form ini untuk
contact form blog AMP HTML . Tentu saja pemasangan contact form ini pada blog AMP HTML sedikit berbeda dan sedikit menguras pikiran, jadi silahkan baca postingan ini pelan-pelan agar bisa dimngerti.
Cara Membuat Google Form untuk Contact Form di Blog AMP
Berbeda dengan blog biasa yang bisa dipasangkan secara langsung, pemasangan Google Form pada blog AMP ini harus menggunakan
amp-iframe dan ditempatkan pada posisi
75% dari tepi atas blog agar form-nya bisa tampil. Untuk itu, di atas amp-iframe, saya menambahkan kontak-kontak lainnya seperti
email ,
whatsap ,
telegram ,
bbm , dan lainnya untuk mendorong
amp-iframe lebih ke bawah agar form-nya bisa tampil.
Keuntungan menggunakan Contact form ini :
Pengunjung dapat menyampaikan pertanyaan dengan topik dari salah satu artikel di blog kita dan jika kita dapat menjawab pertanyaan tersebut maka pengunjung akan merasa senang karena pertanyaannya dijawab dan mungkin pengunjung tersebut akan sering mengunjungi blog kita.
Pengunjung juga dapat memberi kritik dan saran dimana secara tidak lansung akan membuat Anda mengembangkan blog agar dapat lebih baik lagi demi kenyamanan pengunjung.
Layanan contact person ini juga salah satu yang harus blog kita miliki jika ingin di setujui oleh Google AdSense.
Gambar disamarkan, klik jika anda ingin melihat
Tampilkan
Jika sobat ingin mencobanya pada blog AMP sobat, silahkan ikuti langkahnya di bawah ini.
Langkah Pertama
Silahkan hosting kode di bawah ini di
Github , silahkan simpan dengan ekstensi
*.html misalnya
contact.html .
<style>
body{margin:0;padding:0}
#ss-form input:focus ~ label,
#ss-form textarea:focus ~ label,
#ss-form input:valid ~ label,
#ss-form textarea:valid ~ label {
font-size: 0.75em;
color: #e8554e;
top: -2.25rem;
-webkit-transition: all 0.125s ease;
transition: all 0.125s ease;
}
#ss-form .styled-input {
width: 33.3333%;
margin: 2rem 0 1rem;
padding: 0;
position: relative;
}
#ss-form .styled-input-in {
position: relative;
}
#ss-form .styled-input label {
color: #999;
padding: 1rem;
position: absolute;
top: 0;
left: 0;
-webkit-transition: all 0.25s ease;
transition: all 0.25s ease;
pointer-events: none;
line-height: 1;
font-family: "Helvetica", "Arial", sans-serif;
}
#ss-form .styled-input.wide {
width: 100%;
}
#ss-form input,
#ss-form textarea {
padding: 1rem 1rem;
border: 1px solid #ddd;
width: 100%;
font-size: 1rem;
background: #fafafa;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
font-family: "Helvetica", "Arial", sans-serif;
}
#ss-form input ~ .span1,
#ss-form textarea ~ .span1 {
display: block;
width: 0;
height: 3px;
background: #e8554e;
position: absolute;
left: 50%;
-webkit-transition: width 0.4s ease-in-out;
transition: width 0.4s ease-in-out;
}
#ss-form input ~ .span2,
#ss-form textarea ~ .span2 {
display: block;
width: 0;
height: 3px;
background: #e8554e;
position: absolute;
right: 50%;
-webkit-transition: width 0.4s ease-in-out;
transition: width 0.4s ease-in-out;
}
#ss-form input ~ span {
bottom: 0;
}
#ss-form input:focus,
#ss-form textarea:focus {
outline: 0;
}
#ss-form input:focus ~ .span1,
#ss-form textarea:focus ~ .span1,
#ss-form input:focus ~ .span2,
#ss-form textarea:focus ~ .span2 {
width: 50%;
}
#ss-form textarea {
width: 100%;
min-height: 15em;
}
#ss-form .btn {
font-family: "Helvetica", "Arial", sans-serif;
text-transform: uppercase;
font-size: 14px;
font-weight: bold;
letter-spacing: 1px;
border-radius: 0;
padding: 0 25px;
height: 51px;
line-height: 51px;
color: #333;
background-color: #fafafa;
border: 1px solid #ddd;
cursor: pointer;
margin: 10px 0 0;
background-image: none;
}
#ss-form .btn-default:hover,
#ss-form .btn-default:focus {
background-color: #e8554e;
border: 1px solid #df4f49;
color: white;
outline: 0;
}
#fade {
opacity: 0;
display: none;
}
.thanks_layout{text-align: center; position: fixed; top:0; left:0; bottom:0; right:0; background:rgba(255,255,255,.8);z-index:99999}
.thanks_message{font-family: "Helvetica", "Arial", sans-serif;width:50%;background:#fff;border-radius:5px;padding:20px;border:1px solid #DEDEDE;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;}
.thanks_message .close a{position:absolute; top:-15px; right: -15px; width:20px; height:20px; line-height:20px; text-align:center; background:#fff; border:1px solid #ccc; border-radius:100%;color:#333;font-family: "Helvetica", "Arial", sans-serif;font-size:18px;text-decoration:none}
@media screen and (max-width:768px){.thanks_message{width:90%!important;margin-left:-45%!important;}
}
@media screen and (max-width:414px){#ss-form .styled-input {
width: 100%;
}
}
</style>
<script type="text/javascript">
var submitted=false;
var fadeEffect=function(){
return{
init:function(id, flag, target){
this.elem = document.getElementById(id);
clearInterval(this.elem.si);
this.target = target ? target : flag ? 100 : 0;
this.flag = flag || -1;
this.alpha = this.elem.style.opacity ? parseFloat(this.elem.style.opacity) * 100 : 0;
this.elem.si = setInterval(function(){fadeEffect.tween()}, 20);
},
tween:function(){
if(this.alpha == this.target){
clearInterval(this.elem.si);
}else{
var value = Math.round(this.alpha + ((this.target - this.alpha) * .05)) + (1 * this.flag);
this.elem.style.opacity = value / 100;
this.elem.style.filter = 'alpha(opacity=' + value + ')';
this.alpha = value
}
}
}
}();
function myFunction() {
location.reload();
}
</script>
<iframe id="hidden_iframe" name="hidden_iframe" onload="if(submitted){);}" style="display: none;"></iframe>
<form action="https://docs.google.com/forms/d/1aHcEFAqx-IpAPnWhCknh_9MHdEj1CkbTaofxxxxxxxx /formResponse" id="ss-form" method="POST" onsubmit="fadeEffect.init('fade', 1);document.getElementById('fade').style.display = 'block'" target="hidden_iframe">
<div class="styled-input">
<div class="styled-input-in">
<input type="text" aria-label="Name" name="entry.2005620554 " value="" id="entry.2005620554 " dir="auto" title="" required="required">
<label>Name</label>
<span class="span1"></span><span class="span2"></span>
</div>
</div>
<div class="styled-input">
<div class="styled-input-in">
<input type="email" aria-label="Email" name="entry.1045781291 " value="" id="entry.1045781291 " dir="auto" title="Must be a valid email address" required="required">
<label>Email</label>
<span class="span1"></span><span class="span2"></span>
</div>
</div>
<div class="styled-input wide">
<div class="styled-input-in">
<textarea aria-label="Comments" name="entry.839337160 " rows="8" cols="0" id="entry.839337160 " dir="auto" aria-required="true" required="required"></textarea>
<label>Message</label>
<span class="span1"></span><span class="span2"></span>
</div>
</div>
<input name="draftResponse" type="hidden" value="[,,"666676987482120412 "]">
<input name="pageHistory" type="hidden" value="0">
<input name="fbzx" type="hidden" value="666676987482120412 ">
<button type="submit" name="submit" class="btn btn-default">Send</button>
</div>
</form>
<div id="fade">
<div class="thanks_layout">
<div class="thanks_message">
<img alt="Thumb" height="48" width="48" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNql-K0AOEU6AXvX2RS01SOe1ReT8ce7PSM1PmM9AUlU5dKLgA8K714cFZ2l7Yl2MfVfKgatVmIGmuFPh_Bq-HwiYQHFKaUvSBL41JohpRXfDtl0uQsHhEFw9Kbu6reazXG298NMn_ue69/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>
<div class="close"><a href="javascript:void(0)" onclick="document.getElementById('fade').style.display = 'none' ;myFunction()" title="Close">×</a></div>
</div>
</div>
</div>
Untuk kode-kode di atas yang di tandai ganti dengan kode-kode di Google Form sobat. untuk mengatahui kode-kode tersebut silahkan gunakan
Ctrl +
U pada Google Form sobat.
Langkah Kedua
Buat halaman
Contact Form di halaman static, simpan kode di bawah ini pada post editor mode HTML.
Untuk menghubungi admin, silahkan pilih beberapa cara yang Anda sukai di bawah ini:<br />
<div class="contact-box">
<div class="contact-me">
<svg viewbox="0 0 24 24">
<path d="M20,8L12,13L4,8V6L12,11L20,6M20,4H4C2.89,4 2,4.89 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V6C22,4.89 21.1,4 20,4Z"></path>
</svg>emailanda@gmail.com </div>
<div class="contact-me">
<svg viewbox="0 0 24 24">
<path d="M16.75,13.96C17,14.09 17.16,14.16 17.21,14.26C17.27,14.37 17.25,14.87 17,15.44C16.8,16 15.76,16.54 15.3,16.56C14.84,16.58 14.83,16.92 12.34,15.83C9.85,14.74 8.35,12.08 8.23,11.91C8.11,11.74 7.27,10.53 7.31,9.3C7.36,8.08 8,7.5 8.26,7.26C8.5,7 8.77,6.97 8.94,7H9.41C9.56,7 9.77,6.94 9.96,7.45L10.65,9.32C10.71,9.45 10.75,9.6 10.66,9.76L10.39,10.17L10,10.59C9.88,10.71 9.74,10.84 9.88,11.09C10,11.35 10.5,12.18 11.2,12.87C12.11,13.75 12.91,14.04 13.15,14.17C13.39,14.31 13.54,14.29 13.69,14.13L14.5,13.19C14.69,12.94 14.85,13 15.08,13.08L16.75,13.96M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22C10.03,22 8.2,21.43 6.65,20.45L2,22L3.55,17.35C2.57,15.8 2,13.97 2,12A10,10 0 0,1 12,2M12,4A8,8 0 0,0 4,12C4,13.72 4.54,15.31 5.46,16.61L4.5,19.5L7.39,18.54C8.69,19.46 10.28,20 12,20A8,8 0 0,0 20,12A8,8 0 0,0 12,4Z"></path>
</svg>081312xxxxxx </div>
<div class="contact-me">
<svg viewbox="0 0 24 24">
<path d="M9.78,18.65L10.06,14.42L17.74,7.5C18.08,7.19 17.67,7.04 17.22,7.31L7.74,13.3L3.64,12C2.76,11.75 2.75,11.14 3.84,10.7L19.81,4.54C20.54,4.21 21.24,4.72 20.96,5.84L18.24,18.65C18.05,19.56 17.5,19.78 16.74,19.36L12.6,16.3L10.61,18.23C10.38,18.46 10.19,18.65 9.78,18.65Z"></path>
</svg>@telegram_username </div>
<div class="contact-me bbm">
<svg viewbox="0 0 24 24">
<path d="M21.499,1.114H2.501C1.12,1.114,0,2.234,0,3.615v12.509c0,1.381,1.12,2.501,2.501,2.501h0.137l-1.974,4.261l8.248-4.261
h12.586c1.381,0,2.501-1.12,2.501-2.501V3.615C24,2.234,22.88,1.114,21.499,1.114z M6.512,4.085h2.203
c0.711,0,1.293,0.581,1.293,1.293c0,0.711-0.582,1.293-1.293,1.293H5.462L6.512,4.085z M7.038,10.804h-3.25l1.048-2.586h2.202
c0.711,0,1.293,0.582,1.293,1.293C8.331,10.223,7.749,10.804,7.038,10.804z M11.269,14.938h-3.25l1.049-2.586h2.201
c0.712,0,1.295,0.582,1.295,1.293C12.564,14.356,11.981,14.938,11.269,14.938z M12.945,10.804H9.694l1.049-2.586h2.202
c0.711,0,1.293,0.582,1.293,1.293C14.238,10.223,13.657,10.804,12.945,10.804z M11.37,6.671l1.048-2.586h2.202
c0.711,0,1.293,0.581,1.293,1.293c0,0.711-0.582,1.293-1.293,1.293H11.37z M18.026,12.844h-3.252l1.049-2.586h2.203
c0.711,0,1.293,0.582,1.293,1.294C19.319,12.262,18.737,12.844,18.026,12.844z M19.701,8.711h-3.25l1.048-2.586h2.203
c0.711,0,1.292,0.581,1.292,1.292C20.994,8.129,20.413,8.711,19.701,8.711z"></path>
</svg> 5895xxxx
<amp-accordion>
<section>
<h5>
<span class="show-more">atau scan barcode</span>
<span class="show-less">sembunyikan barcode</span>
</h5>
<span class="barcode-bbm">
<amp-img alt="barcode bbm" height="300" layout="responsive" src="URL GAMBAR BBM BARCODE " width="300"></amp-img>
</span>
</section>
</amp-accordion>
</div>
<div class="contact-me">
<svg viewbox="0 0 24 24">
<path d="M12,2C6.5,2 2,6.14 2,11.25C2,14.13 3.42,16.7 5.65,18.4L5.71,22L9.16,20.12L9.13,20.11C10.04,20.36 11,20.5 12,20.5C17.5,20.5 22,16.36 22,11.25C22,6.14 17.5,2 12,2M13.03,14.41L10.54,11.78L5.5,14.41L10.88,8.78L13.46,11.25L18.31,8.78L13.03,14.41Z" fill="#000000">
</path></svg><a href="http://m.me/FB_USERNAME " target="_blank" title="Chat on messenger">http://m.me/FB_USERNAME </a></div>
<div class="contact-me map">
<svg viewbox="0 0 24 24">
<path d="M12,11.5A2.5,2.5 0 0,1 9.5,9A2.5,2.5 0 0,1 12,6.5A2.5,2.5 0 0,1 14.5,9A2.5,2.5 0 0,1 12,11.5M12,2A7,7 0 0,0 5,9C5,14.25 12,22 12,22C12,22 19,14.25 19,9A7,7 0 0,0 12,2Z" fill="#000000">
</path></svg><a href="URL GOOGLE MAP " target="_blank" title="Map of BLABLA">Jl. XXXXXXXXXXXXXXXXXXXXXXXX </a></div>
</div>
<br />
<br />
<br />
<hr />
<br />
Atau silahkan hubungi via contact form di bawah ini:<br />
<div class="contact-box">
<amp-iframe frameborder="0" height="550" layout="responsive" sandbox="allow-scripts allow-same-origin allow-popups allow-forms" src="URL CDN RAWGIT LANGKAH PERTAMA " width="900"></amp-iframe>
</div>Kustomisasi:
Ganti emailsobat@gmail.com dengan email sobat.
Ganti 081312xxxxxx dengan nomor hp sobat untuk WA.
Ganti @telegram_username dengan username telegram sobat.
Ganti 5895xxxx dengan pin bbm Anda dan URL GAMBAR BBM BARCODE dengan gambar barcode bbm sobat.
Ganti FB_USERNAME dengan username fb sobat untuk messenger.
Ganti URL GOOGLE MAP dengan url map lokasi sobat begitu juga dengan alamatnya.
Ganti URL CDN RAWGIT LANGKAH PERTAMA dengan url CDN Rawgit untuk kode pada langkah pertama. Langkah Ketiga
Copy kode CSS di bawah ini
.contact-box{margin-top:10px}
.contact-box svg{width:24px;height:24px;vertical-align:-6px;margin-right:5px}
.contact-box svg path{fill:#444}
.contact-box .bbm svg{width:20px;height:20px;vertical-align:-5px;margin-right:5px}
.post-body .contact-me a{color:#444;font-weight:300}
.post-body .contact-me a[href^="http://"]:after,.post-body .contact-me a[href^="https://"]:after{content:"";background:url("data:image/svg+xml;charset=utf8,%3csvg viewBox='0 0 24 24' width='16' height='16' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3e%3cg%3e%3cpath style='fill:#444' d='M14,3V5H17.59L7.76,14.83L9.17,16.24L19,6.41V10H21V3M19,19H5V5H12V3H5C3.89,3 3,3.9 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V12H19V19Z'%3e%3c/path%3e%3c/g%3e%3c/svg%3e") no-repeat;background-size:16px 16px;width:16px;height:16px;display:inline-block;margin-left:3px;vertical-align:-2px}
.contact-me{display:block}
.contact-me span{-webkit-user-select:all;-moz-user-select:all;-ms-user-select:all;user-select:all}
.contact-me amp-accordion h5 span{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}
.contact-box .map,.contact-box .bbm{position:relative;padding-left:29px}
.contact-box .bbm .barcode-bbm{margin:10px 0;width:300px}
.contact-box .bbm span span{font-weight:300}
.contact-box .map svg{position:absolute;top:0;left:0}
.contact-box .bbm svg{position:absolute;top:4px;left:0}
.contact-box amp-accordion section:not([expanded]) .show-less,.contact-box amp-accordion section[expanded] .show-more{display:none}
.contact-box amp-accordion h5{background:none;border:none;color:#444;font-weight:500;font-size:18px;margin:0;padding:0;text-align:left;}
@media screen and (max-width:414px){.contact-box amp-iframe{height:550px}
.contact-box .bbm .barcode-bbm{width:100%}
}
Silahkan simpan di bawah kode ini
<b:if cond='data:blog.pageType == "static_page" and data:blog.isMobileRequest == "false"'>
<style amp-custom='amp-custom'>
/*<
Cara Membuat Google Form untuk Contact Form di Blog AMP Contact form adalah sebuah halaman di blog yang berfungsi agar para pembaca bisa menghubungi pemilik blog atau admin. Maka contact form sangatlah penting bagi kita maupun para pembaca jika mereka ingin menyampaikan sesuatu kepada pemiliki blog. Biasanya contact form diberi judul Hubungi Kami atau Contact Us dan ditaruh di deretan atau tab menu di bagian atas maupun bawah website ataupun blog.
Tambahkan Komentar Tutup Komentar