Cara Membuat Contact Form Blogger dengan Google Apps Script
Table of Contents
|
| https://www.colombiahosting.com.co/blog/ |
Kenapa sih formulir kontak itu penting? Bayangin gini, blog kamu itu kayak toko online. Formulir kontak itu kayak meja informasi tempat pengunjung bisa nanya-nanya, kasih masukan, atau bahkan nawarin kerjasama. Tanpa formulir kontak, pengunjung blog kamu bakal kesulitan buat menghubungi kamu secara langsung.
Jadinya, interaksi sama pembaca jadi berkurang, potensi kolaborasi hilang, dan blog kamu jadi kurang interaktif.
Sayang banget kan? Nah, sekarang kita udah tahu pentingnya formulir kontak. Yuk, langsung aja kita bahas cara bikinnya!
Cara Membuat Formulir Kontak Blogger Menggunakan Google Apps Script
1. Buka Google Apps Script
Pergi ke script.google.com atau dari Google Drive pilih, klik New > More > Google Apps Script.
2. Buat File Code.gs
var dataForm = {};
/**
* Fungsi ini dipanggil ketika formulir HTML dikirim (HTTP POST request).
* Mengambil data dari request dan mengirimkannya ke email yang ditentukan.
*
* @param {Object} e - Objek event yang berisi parameter dari request POST.
*/
function doPost(e) {
// Mengambil data dari parameter formulir
dataForm.nama = e.parameter.nama; // Sesuaikan dengan 'name' input di HTML
dataForm.email = e.parameter.email; // Sesuaikan dengan 'name' input di HTML
dataForm.pesan = e.parameter.pesan; // Sesuaikan dengan 'name' input di HTML
dataForm.tanpaScript = e.parameter.tanpaScript; // Sesuaikan dengan 'name' input di HTML
// Membangun isi pesan email
var isiPesanEmail = ''
+ 'Nama: ' + dataForm.nama + '\n'
+ 'Email: ' + dataForm.email + '\n'
+ 'Isi Pesan:\n'
+ dataForm.pesan;
// Log pesan ke Stackdriver Logging (untuk debugging di Apps Script)
Logger.log(isiPesanEmail);
// Mengirim email
// GANTI 'aurealisaputri@gmail.com' dengan alamat email tujuan Anda!
MailApp.sendEmail('aurealisaputri@gmail.com', '[Formulir Kontak Blog] Pesan Baru', isiPesanEmail);
// Mengembalikan halaman konfirmasi atau tidak sama sekali (untuk formulir tanpa JavaScript)
if (dataForm.tanpaScript == 'true') {
return; // Tidak mengembalikan apa-apa, browser akan tetap di halaman formulir
} else {
// Mengembalikan template HTML 'konfirmasi'
return HtmlService.createTemplateFromFile("konfirmasi").evaluate();
}
}Salin kode JavaScript yang ada di bagian "Google Apps Script (Code.gs)" ke dalam editor Apps Script.
Ganti isi file yang sudah ada jika ada. Jangan lupa ubah 'aurealisaputri@gmail.com' dengan email tujuan kamu.
3. Buat File konfirmasi.html
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pengiriman Kontak Berhasil</title>
<style>
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background-color: #f4f7f6;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
margin: 0;
color: #333;
}
.container {
background-color: #ffffff;
padding: 40px;
border-radius: 10px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
text-align: center;
max-width: 600px;
width: 90%;
}
h1 {
color: #28a745; /* Warna hijau untuk sukses */
margin-bottom: 20px;
font-size: 2.2em;
}
p {
line-height: 1.6;
margin-bottom: 15px;
font-size: 1.1em;
}
hr {
border: 0;
height: 1px;
background: #eee;
margin: 30px 0;
}
.detail {
text-align: left;
margin-top: 20px;
background-color: #f9f9f9;
border: 1px solid #e0e0e0;
border-radius: 8px;
padding: 20px;
}
.detail p {
margin: 8px 0;
font-size: 1em;
}
.detail p strong {
color: #007bff; /* Warna biru untuk label */
}
.back-link {
display: inline-block;
margin-top: 30px;
padding: 10px 25px;
background-color: #007bff;
color: white;
text-decoration: none;
border-radius: 5px;
transition: background-color 0.3s ease;
font-size: 1em;
}
.back-link:hover {
background-color: #0056b3;
}
</style>
</head>
<body>
<div class="container">
<h1>Pengiriman Berhasil!</h1>
<p>Terima kasih. Pesan Anda telah berhasil dikirim dengan detail sebagai berikut:</p>
<hr/>
<div class="detail">
<p><strong>Nama:</strong> <?= dataForm.nama ?></p>
<p><strong>Email:</strong> <?= dataForm.email ?></p>
<p><strong>Isi Pesan:</strong><br/><?= dataForm.pesan ?></p>
</div>
<a href="javascript:history.back()" class="back-link">Kembali</a>
</div>
</body>
</html>Klik File > New > HTML file, beri nama konfirmasi. Salin kode HTML dari bagian "Halaman Konfirmasi (konfirmasi.html)" ke file ini.
4. Deploy sebagai Aplikasi Web
- Klik Deploy > New deployment.
- Pilih tipe Web app.
- Di bagian "Execute as:", pilih Me (email Anda).
- Di bagian "Who has access:", pilih Anyone.
- Klik Deploy.
- Salin "Web app URL" yang diberikan. Ini adalah URL yang akan Anda gunakan di atribut action formulir HTML Anda.
5. Tulis Formulir HTML
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Formulir Kontak</title>
<style>
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background-color: #f4f7f6;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
margin: 0;
color: #333;
}
.contact-form-container {
background-color: #ffffff;
padding: 40px;
border-radius: 10px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
max-width: 500px;
width: 90%;
}
.contact-form-container h2 {
text-align: center;
color: #007bff;
margin-bottom: 30px;
font-size: 2em;
}
.form-group {
margin-bottom: 20px;
}
.form-group label {
display: block;
margin-bottom: 8px;
font-weight: bold;
color: #555;
}
.form-group input[type="text"],
.form-group input[type="email"],
.form-group textarea {
width: calc(100% - 20px); /* Kurangi padding */
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
font-size: 1em;
transition: border-color 0.3s ease;
}
.form-group input[type="text"]:focus,
.form-group input[type="email"]:focus,
.form-group textarea:focus {
border-color: #007bff;
outline: none;
}
.form-group textarea {
resize: vertical; /* Memungkinkan textarea diubah ukurannya secara vertikal */
min-height: 100px;
}
.submit-button {
width: 100%;
padding: 12px;
background-color: #28a745; /* Warna hijau untuk tombol submit */
color: white;
border: none;
border-radius: 5px;
font-size: 1.1em;
cursor: pointer;
transition: background-color 0.3s ease;
}
.submit-button:hover {
background-color: #218838;
}
.error-message {
color: #dc3545; /* Warna merah untuk pesan error */
margin-top: 10px;
text-align: center;
font-weight: bold;
}
</style>
</head>
<body>
<div class="contact-form-container">
<h2>Hubungi Kami</h2>
<form action="YOUR_APPS_SCRIPT_WEB_APP_URL" method="POST">
<div class="form-group">
<label for="nama">Nama:</label>
<input type="text" id="nama" name="nama" required>
</div>
<div class="form-group">
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
</div>
<div class="form-group">
<label for="pesan">Pesan:</label>
<textarea id="pesan" name="pesan" rows="6" required></textarea>
</div>
<input type="hidden" name="tanpaScript" value="false"> <button type="submit" class="submit-button">Kirim Pesan</button>
<div class="error-message" id="error-message"></div>
</form>
</div>
</body>
</html>Salin kode HTML diatas kemudian tempelkan kode ke bagian yang sesuai di blog stastis kamu.
Ganti
YOUR_APPS_SCRIPT_WEB_APP_URL di atribut action pada tag <form> dengan URL yang kamu salin dari langkah deploy.Setelah langkah-langkah ini, formulir kontak kamu seharusnya berfungsi dengan baik.
Membuat formulir Contact Form di Blogger adalah cara yang efektif untuk meningkatkan interaksi dengan pembaca blog, terlihat lebih profesional, dan membuka peluang kerjasama.
Keyword: Cara membuat formulir kontak di Blogger, Formulir kontak Blogger, Tutorial Blogger, Membuat formulir online, Google Forms Blogger, Cara menambahkan formulir di Blogger, Tips dan trik blog, Blogger pemula, Meningkatkan interaksi blog, Blog profesional.
Post a Comment