Advanced Responsive Blogger Contact Form | Pixlefy Free Widget

📨 Advanced Responsive Blogger Contact Form (With HTML, CSS & Blogger Backend)

Pixlefy নিয়ে এসেছে একটি প্রফেশনাল গ্রেড Contact Form যেটি সম্পূর্ণ Responsive, Lightweight এবং Blogger এর Default Inbox-এ মেসেজ পাঠাতে সক্ষম। এটি আপনার ব্লগের ইউজারদের কাছ থেকে ইনপুট নিয়ে সরাসরি আপনার Blogger ইমেইল ইনবক্সে পৌঁছে দেবে।

💡 ফিচারসমূহ

• ✅ Modern & Stylish UI
• 📱 100% Responsive – Mobile, Tablet, Desktop সাপোর্টেড
• 📧 Direct Blogger Message (Blogger default backend support) যুক্ত করা হলো। এটি এখন Blogger এর নিজস্ব inbox/contact email-এ message পাঠাবে।
• 📌 করণীয়: YOUR_BLOG_ID অংশে তোমার ব্লগের ID বসাও (যেমন 1234567890123456789)
• 🧩 শুধুমাত্র HTML + CSS + Lightweight JS (No external script needed)
• 🔐 Spam-Free & Secure

🔍 Live Demo & Code Preview

🚀 Live Demo View Code on CodePen

🧩 কোড স্নিপেট

<!-- START: Advanced Blogger Contact Form -->
<style>
.contact-form-wrapper {
  max-width: 600px;
  margin: 3rem auto;
  padding: 2rem;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.1);
  font-family: 'Segoe UI', sans-serif;
}
.contact-form-wrapper h2 {
  text-align: center;
  color: #222;
  margin-bottom: 1.5rem;
}
.contact-form input[type=\"text\"],
.contact-form input[type=\"email\"],
.contact-form textarea {
  width: 100%;
  padding: 12px;
  margin: 10px 0;
  border: 1px solid #ccc;
  border-radius: 8px;
  font-size: 16px;
  box-sizing: border-box;
}
.contact-form textarea {
  min-height: 150px;
  resize: vertical;
}
.contact-form .contact-button {
  background-color: #ff0056;
  color: white;
  padding: 12px 30px;
  font-size: 16px;
  border: none;
  border-radius: 30px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}
.contact-form .contact-button:hover {
  background-color: #e6004f;
}
@media (max-width: 600px) {
  .contact-form-wrapper {
    padding: 1rem;
  }
}
</style>

<div class=\"contact-form-wrapper\">
  <h2>Contact Us</h2>
  <form class=\"contact-form\" method=\"post\" name=\"contact-form\">
    <input type=\"text\" name=\"name\" placeholder=\"Your Name\" required />
    <input type=\"email\" name=\"email\" placeholder=\"Your Email\" required />
    <textarea name=\"message\" placeholder=\"Your Message\" required></textarea>
    <button class=\"contact-button\" type=\"submit\">Send Message</button>
    <div class=\"contact-form-widget\"></div>
  </form>
</div>

<script>
  window.addEventListener(\"DOMContentLoaded\", function() {
    var widgetContainer = document.querySelector(\".contact-form-widget\");
    if (widgetContainer) {
      widgetContainer.innerHTML = '<iframe allowtransparency=\"true\" frameborder=\"0\" scrolling=\"no\" style=\"height:0;width:0;display:none\" src=\"https://www.blogger.com/contact-form.g?blogID=YOUR_BLOG_ID\"></iframe>';
    }
  });
</script>
<!-- END: Advanced Blogger Contact Form -->

📌 কিভাবে ব্যবহার করবেন?

1. 🔧 Blogger Dashboard > Layout > Add a Gadget > HTML/JavaScript
2. 🧩 উপরের কোড কপি করে Gadget এ পেস্ট করুন
3. 📬 Contact Form Gadget Enable করে রাখুন Blogger Dashboard থেকে
4. ✍️ কোডে YOUR_BLOG_ID অংশে আপনার আসল ব্লগ আইডি বসান

❓ FAQ

১. Blogger Contact Form Gadget কীভাবে Enable করবো?

Blogger Dashboard > Layout > Add a Gadget > Contact Form থেকে Enable করুন।

২. Blog ID কোথায় পাবো?

Blogger Dashboard এর URL-এ দেখুন: blogID=1234567890123456789 এর মতো থাকবে।

৩. ফর্মটি কাজ করবে কি?

হ্যাঁ, এটি Blogger-এর Default Inbox সাপোর্ট করে এবং কোন থার্ড-পার্টি API প্রয়োজন হয় না।

📦 আরও প্রয়োজনীয় Widget

✍️ লিখেছেন: Nafich Shikdar | 🔗 Pixlefy – Design & Tools Hub