Cara Membuat Form Contact Us di Blogger dengan Formspree

Memiliki halaman Contact Us di blog sangat penting untuk memudahkan komunikasi dengan pengunjung, calon rekan bisnis, dan meningkatkan kredibilitas situs. Dalam panduan ini, saya akan menjelaskan cara membuat form kontak Blogger menggunakan Formspree, yang lebih fleksibel dan mudah digunakan dibandingkan metode bawaan Blogger.

Mengapa Harus Memiliki Halaman Contact Us?

1. Memudahkan Interaksi dengan Pengunjung
Pengunjung bisa menghubungi pemilik blog untuk bertanya, memberikan masukan, atau mengajukan permintaan artikel.
2. Menarik Calon Rekan Bisnis
Banyak brand atau perusahaan mencari blogger untuk kerja sama seperti content placement atau endorsement.
3. Meningkatkan Peluang Lolos Google AdSense
Google menyukai situs yang memiliki halaman navigasi lengkap, termasuk Contact Us, About, Privacy Policy, dan Disclaimer.

Cara Membuat Form Contact Us di Blogger dengan Formspree

Ikuti langkah-langkah berikut untuk membuat form kontak di Blogger dengan mudah:

1. Kunjungi Formspree dan Buat Akun

• Buka Formspree di browser.
• Buat akun gratis atau masuk jika sudah memiliki akun.

2. Buat Formulir Baru dan Dapatkan Form ID

• Klik "New Form" dan masukkan email tujuan.
• Salin Form ID yang diberikan (contoh: your_form_id).

3. Salin dan Tempel Kode ke Halaman Statis Blogger

Buka Blogger > Halaman > Buat Halaman Baru, lalu salin dan tempel kode berikut di mode HTML:

<div class="contact-container">
    <form id="contact-form" action="https://formspree.io/f/your_form_id" method="POST">
        <div class="form-group">
            <label for="name">Name</label>
            <input id="name" name="name" type="text" placeholder="Enter your name" required>
        </div>
        <div class="form-group">
            <label for="email">Email</label>
            <input id="email" name="email" type="email" placeholder="Enter your email" required>
        </div>
        <div class="form-group">
            <label for="message">Message</label>
            <textarea id="message" name="message" rows="5" placeholder="Write your message here..." required></textarea>
        </div>
        <button type="submit">Send Message</button>
    </form>
    <div id="form-response"></div>
</div>
<style>
    .contact-container {
        max-width: 600px;
        margin: 40px auto;
        padding: 20px;
        background: #ffffff;
        border-radius: 8px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        text-align: center;
    }
    .contact-container h2 {
        margin-bottom: 10px;
        font-size: 26px;
        color: #333;
    }
    .contact-container p {
        font-size: 14px;
        color: #666;
        margin-bottom: 20px;
    }
    .form-group {
        text-align: left;
        margin-bottom: 15px;
    }

    .form-group label {
        font-weight: bold;
        font-size: 14px;
        color: #333;
    }
    .form-group input,
    .form-group textarea {
        width: 100%;
        padding: 10px;
        margin-top: 5px;
        border: 1px solid #ddd;
        border-radius: 5px;
        font-size: 14px;
        transition: 0.3s;
    }
    .form-group input:focus,
    .form-group textarea:focus {
        border-color: #546de5;
        outline: none;
        box-shadow: 0 0 5px rgba(84, 109, 229, 0.5);
    }
    button {
        width: 100%;
        background: #546de5;
        color: white;
        padding: 12px;
        font-size: 16px;
        font-weight: bold;
        border: none;
        border-radius: 5px;
        cursor: pointer;
        transition: 0.3s;
    }
    button:hover {
        background: #3b50c1;
    }
    @media (max-width: 600px) {
        .contact-container {
            width: 90%;
        }
    }
</style>

<script>
    document.getElementById("contact-form").addEventListener("submit", function(event) {
        event.preventDefault(); // Mencegah reload halaman
        var form = this;
        var formData = new FormData(form);

        fetch(form.action, {
            method: "POST",
            body: formData,
            headers: { "Accept": "application/json" }
        }).then(response => {
            if (response.ok) {
                document.getElementById("form-response").innerHTML = "<p style='color: green;'>Thank you! Your message has been sent.</p>";
                form.reset();
            } else {
                document.getElementById("form-response").innerHTML = "<p style='color: red;'>Oops! Something went wrong.</p>";
            }
        }).catch(error => {
            document.getElementById("form-response").innerHTML = "<p style='color: red;'>Oops! Something went wrong.</p>";
        });
    });
</script>

Pastikan mengganti your_form_id dengan Form ID dari Formspree.

4. Simpan dan Publikasikan

Klik "Simpan" dan publikasikan halaman untuk mulai menerima pesan dari pengunjung.

Kesimpulan

Membuat halaman Contact Us di Blogger sangat penting untuk komunikasi dengan pengunjung dan peluang bisnis. Dengan Formspree, kamu bisa membuat formulir kontak yang lebih profesional, aman, dan mudah digunakan.

Jika ada pertanyaan, tulis di kolom komentar. Jangan lupa baca artikel lainnya untuk mendapatkan tips blogging terbaru!