تحميل قالب بلوجر سهل المجاني | قالب خفيف مميز واحترافي

تُعتبر صفحة "اتصل بنا" في بلوجر واحدة من أهم الصفحات الأساسية التي لا غنى عنها في أي موقع أو مدونة. فهي واجهة التواصل المباشرة بين الزائر وصاحب الموقع، كما تُعد من الصفحات الإلزامية لقبول مدونتك في Google AdSense. وجود صفحة تواصل فعّالة لا يضيف فقط مظهرًا احترافيًا للمدونة، بل يعكس أيضًا مصداقيتك ويُشعر الزوار بالثقة في المحتوى الذي تقدمه. ومع ذلك، يواجه أغلب المدونين مشكلة متكررة بعد إنشاء الصفحة، وهي أن نموذج الاتصال لا يعمل بالشكل الصحيح. أحيانًا لا تُرسل الرسائل إطلاقًا، وأحيانًا لا يظهر النموذج من الأساس، أو تظهر رسالة خطأ مزعجة بعد الضغط على زر الإرسال. هذه المشاكل تجعل العديد من المدونين في حيرة، خاصة أن الحلول المنتشرة على الإنترنت أصبحت قديمة أو غير فعّالة مع القوالب الحديثة.

السبب الحقيقي وراء هذه المشكلة هو أن نظام نموذج الاتصال في بلوجر نفسه أصبح محدودًا للغاية، ولا يتوافق مع التحديثات الأخيرة أو مع القوالب المعدّلة. لذلك ظهرت الحاجة إلى طريقة مختلفة تمامًا تتجاوز هذه القيود وتمنحنا صفحة اتصال تعمل بكفاءة على جميع القوالب. وهنا تأتي طريقة "الجسر"، وهي طريقة مبتكرة تعتمد على الجمع بين كود HTML داخل صفحة بلوجر وكود Google Apps Script لربط النموذج مباشرة بخدمة البريد الإلكتروني من جوجل. هذه الفكرة الذكية تتيح إنشاء قناة آمنة ومستقرة لإرسال الرسائل فورًا دون الاعتماد على أنظمة بلوجر القديمة، وبكده نقدر نقول إننا أمام حل نهائي لمشكلة صفحة اتصل بنا لا تعمل في بلوجر.

طريقة الجسر لإنشاء صفحة اتصل بنا في بلوجر

طريقة الجسر (Bridge Method) هي ببساطة أسلوب احترافي جديد لإنشاء نموذج اتصال مخصص لمدونات بلوجر يعمل بنسبة نجاح 100%. تعتمد الفكرة على بناء نموذج بسيط بلغة HTML داخل صفحة جديدة، ثم ربطه بكود خاص يتم إنشاؤه في Google Apps Script، بحيث يقوم هذا السكربت بإرسال الرسائل مباشرة إلى بريدك الإلكتروني في لحظة الضغط على زر الإرسال. ما يميز هذه الطريقة أنها تتجاوز تمامًا النظام التقليدي لبلوجر، وبالتالي لا تتأثر بأي تحديث أو مشكلة في القالب.

الجميل في طريقة الجسر أنها لا تتطلب خبرة برمجية كبيرة، ويمكن تنفيذها بسهولة بخطوات بسيطة. فقط تقوم بإنشاء صفحة HTML جديدة داخل مدونتك، وتضيف الكود الخاص بالنموذج، ثم تنتقل إلى Google Script لتوليد كود الجسر الذي سيربط الصفحة بالبريد الإلكتروني. بعد نسخ رابط السكربت داخل الكود، يصبح النموذج جاهزًا للعمل فورًا على أي قالب بلوجر دون أي إضافات خارجية. هذه المرونة جعلت الطريقة هي الخيار الأفضل لكل من يبحث عن صفحة اتصل بنا احترافية وآمنة وسريعة، خاصة للمدونات التي ترغب في القبول في AdSense أو تحسين تجربة المستخدم.

مميزات طريقة الجسر لإنشاء صفحة اتصل بنا لبلوجر

طريقة الجسر تمنحك الحل النهائي لإنشاء صفحة اتصل بنا على بلوجر تعمل بكفاءة عالية، وتتجاوز كل القيود الموجودة في نماذج الاتصال التقليدية على بلوجر. الطريقة تدمج بين كود HTML داخل الصفحة و Google Apps Script لتقديم نموذج اتصال آمن واحترافي، سريع الاستجابة، وسهل التركيب على أي قالب.

أبرز مميزات طريقة الجسر

تعمل على كل القوالب

مهما كان القالب مجاني أو مدفوع أو معدل، النموذج يعمل بدون أخطاء.

🧩

إرسال فوري وآمن

كل رسالة تصل مباشرة إلى بريدك Gmail بدون تأخير أو فقدان بيانات.

📨

نموذج مخصص بالكامل

ألوان، خطوط، حقول كاملة، عناصر تصميمية متوافقة مع موقعك.

🎨

تصميم خفيف وأنيق

صفحة سهلة التحميل، تحتوي على أيقونات واضحة تعزز شكل القالب وتجعل التفاعل مع الزوار أسهل.

✨

سهولة التركيب

خطوات واضحة وبسيطة، لا تحتاج خبرة برمجية كبيرة.

🛠️

تحسين تجربة الزوار

النموذج يعمل بسلاسة وسرعة، مما يعزز التفاعل ويترك انطباع احترافي.

👍

كيفية عمل صفحة اتصل بنا بطريقة الجسر

إنشاء صفحة اتصل بنا تعمل بكفاءة على بلوجر ليس مجرد نسخ ولصق نموذج، بل يحتاج إلى إعداد متكامل يجمع بين واجهة HTML داخل الصفحة ومعالجة الرسائل بواسطة Google Apps Script. الهدف من هذه الطريقة هو إنشاء نموذج اتصال آمن، سريع، واحترافي يصل مباشرة إلى بريدك الإلكتروني دون أي أخطاء أو تأخير، ويعمل بشكل متوافق مع أي قالب بلوجر. هذا يضمن أن كل رسالة من زوارك تصل لك فورًا، مع تصميم جذاب وسهل التخصيص يتناسب مع هوية موقعك.

في الجزء التالي من المقال، سنقسم العملية إلى خطوات واضحة، بحيث تتضمن كل خطوة شرحًا لما ستقوم به، وأين سيتم وضع الأكواد (HTML أو Google Script)، بالإضافة إلى شرح بالصور لطريقة عمل صفحة اتصل بنا تعمل بشكل صحيح على جميع قوالب بلوجر. حيث ستمثل كل خطوة جزءًا أساسيًا من طريقة الجسر، لذلك ارجو منك الإنتباه جيدا وتنفيذ التعليمات بدقة لإصلاح مشكلة نموذج الإتصال في مدونات بلوجر.

إعداد Google Apps Script

هذه ستكون الخطوة الأولى لإنشاء صفحة اتصل بنا لمدونة بلوجر، سنقوم فيها بإنشاء مشروع جديد في Google Script، وقبل كل شيء يجب نسخ الكود التالي واضافه بريدك الإلكتروني في المنطقة TO_ADDRESS، ومن ثم إضافة عنوان مدونتك في منطقة BLOG_NAME. بعد هذه التعديلات اتبع الشرح التفصيلي الآتي:

var TO_ADDRESS = "yourmail@gmail.com";
var BLOG_NAME = "اسم مدونتك بالعربي هنا";
function doPost(e) {
  try {
    var data = e.parameter;
    var name = data.name || "بدون اسم";
    var email = data.email || "بدون إيميل";
    var message = data.message || "لا توجد رسالة";
    var sanitizedName = sanitize(name);
    var sanitizedEmail = sanitize(email);
    var sanitizedMessage = sanitize(message).replace(/\n/g, '<br>');
    var timestamp = new Date().toLocaleString("ar-SA", { timeZone: "Asia/Riyadh" });
    var replySubject = "RE: رسالتك بخصوص " + BLOG_NAME;
    var mailtoLink = "mailto:" + email + "?subject=" + encodeURIComponent(replySubject);
    var subject = "رسالة جديدة من [" + BLOG_NAME + "]: " + sanitizedName;
    // --- (تصميم HTML جديد ومتجاوب) ---
    var htmlBody = `
<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>رسالة جديدة</title>
<style>
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
background-color: #f4f7f6;
}
.container {
max-width: 600px;
margin: 0 auto;
background-color: #ffffff;
border: 1px solid #e0e0e0;
border-radius: 8px;
overflow: hidden;
}
.header {
padding: 20px 25px;
text-align: center;
border-bottom: 1px solid #f0f0f0;
}
.header h2 {
font-size: 22px;
color: #333;
margin: 0;
}
.content {
padding: 25px;
}
.table {
width: 100%;
border-collapse: collapse;
font-size: 15px;
}
.table td {
padding: 10px 0;
border-bottom: 1px solid #f0f0f0;
}
.table .label {
font-weight: bold;
color: #555;
width: 90px;
}
.table .value {
color: #111;
}
.table .email-value {
color: #111;
text-align: right;
dir: ltr;
/* --- إصلاح مشكلة البريد الطويل --- */
overflow-wrap: break-word;
word-break: break-word; 
}
.message-header {
font-size: 16px;
color: #333;
margin-top: 25px;
margin-bottom: 10px;
}
.message-box {
background-color: #f9f9f9;
border-radius: 5px;
padding: 15px;
font-size: 14px;
line-height: 1.6;
color: #333;
}
.footer {
background-color: #f9f9f9;
padding: 20px 25px;
text-align: center;
border-top: 1px solid #e0e0e0;
}
.button {
display: inline-block;
padding: 11px 25px;
font-size: 15px;
font-weight: bold;
color: #ffffff;
background-color: #007bff;
border-radius: 5px;
text-decoration: none;
}
.footer-text {
text-align: center;
font-size: 12px;
color: #999;
padding-top: 15px;
display: block;
width: 100%;
}
/* --- الأكواد الخاصة بالهاتف (متجاوب) --- */
@media (max-width: 600px) {
.content {
padding: 20px 15px !important;
}
.header {
padding: 20px 15px !important;
}
.header h2 {
font-size: 20px !important;
}
.table {
font-size: 14px !important;
}
.message-box {
padding: 12px !important;
}
.button {
padding: 12px 20px !important;
font-size: 15px !important;
width: 90%;
box-sizing: border-box;
}
}
</style>
</head>
<body dir="rtl" style="font-family: Arial, sans-serif; background-color: #f4f7f6; margin: 0; padding: 10px;">
<table class="container" role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width: 600px; margin: 0 auto; background-color: #ffffff; border: 1px solid #e0e0e0; border-radius: 8px; overflow: hidden;">
<tr>
<td class="header" style="padding: 20px 25px; text-align: center; border-bottom: 1px solid #f0f0f0;">
<h2 style="font-size: 22px; color: #333; margin: 0;">رسالة جديدة من مدونتك</h2>
</td>
</tr>
<tr>
<td class="content" style="padding: 25px;">
<table class="table" role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%" style="width: 100%; border-collapse: collapse; font-size: 15px;">
<tr>
<td class="label" style="padding: 10px 0; border-bottom: 1px solid #f0f0f0; font-weight: bold; color: #555; width: 90px;">المرسل:</td>
<td class="value" style="padding: 10px 0; border-bottom: 1px solid #f0f0f0; color: #111;">${sanitizedName}</td>
</tr>
<tr>
<td class="label" style="padding: 10px 0; border-bottom: 1px solid #f0f0f0; font-weight: bold; color: #555; width: 90px;">البريد:</td>
<td class="email-value" style="padding: 10px 0; border-bottom: 1px solid #f0f0f0; color: #111; text-align: right; dir: ltr; overflow-wrap: break-word; word-break: break-word;">${sanitizedEmail}</td>
</tr>
<tr>
<td class="label" style="padding: 10px 0; border-bottom: 1px solid #f0f0f0; font-weight: bold; color: #555; width: 90px;">الوقت:</td>
<td class="value" style="padding: 10px 0; border-bottom: 1px solid #f0f0f0; color: #111;">${timestamp}</td>
</tr>
</table>
<h3 class="message-header" style="font-size: 16px; color: #333; margin-top: 25px; margin-bottom: 10px;">نص الرسالة:</h3>
<div class="message-box" style="background-color: #f9f9f9; border-radius: 5px; padding: 15px; font-size: 14px; line-height: 1.6; color: #333;">
${sanitizedMessage}
</div>
</td>
</tr>
<tr>
<td class="footer" style="background-color: #f9f9f9; padding: 20px 25px; text-align: center; border-top: 1px solid #e0e0e0;">
<a href="${mailtoLink}" class="button" style="display: inline-block; padding: 11px 25px; font-size: 15px; font-weight: bold; color: #ffffff; background-color: #007bff; border-radius: 5px; text-decoration: none;">
الرد على ${sanitizedName}
</a>
</td>
</tr>
</table>
<div style="text-align: center; width: 100%;">
<span class="footer-text" style="text-align: center; font-size: 12px; color: #999; padding-top: 15px; display: block; width: 100%;">${BLOG_NAME}</span>
</div>
</body>
</html>
`;
    // --- (نهاية التصميم) ---
    GmailApp.sendEmail(TO_ADDRESS, subject, "", {
      htmlBody: htmlBody,
      replyTo: email,
      name: BLOG_NAME
    });
    return ContentService
      .createTextOutput(JSON.stringify({ result: 'success' }))
      .setMimeType(ContentService.MimeType.JSON);
  } catch (error) {
    return ContentService
      .createTextOutput(JSON.stringify({ result: 'error', message: error.toString() }))
      .setMimeType(ContentService.MimeType.JSON);
  }
}
function sanitize(text) {
  return text.replace(/</g, "&lt;").replace(/>/g, "&gt;");
}

خطوات تفصيلية لإعداد Google Apps Script

1

نسخ كود Google Script

احصل على كود Google Script الخاص بنموذج الاتصال، وأضف بريدك الإلكتروني واسم مدونتك في بداية الكود.

2

فتح Google Apps Script

ادخل على Google Apps Script واضغط New Project لإنشاء مشروع جديد.

3

تغيير اسم المشروع

اضغط على اسم المشروع الافتراضي وغير الاسم إلى شيء واضح مثل ContactFormBridge.

4

لصق كود السكربت

الصق كود السكربت الذي جهزته مسبقًا داخل ملف Code.gs واحفظ المشروع.

5

نشر Web App

من قائمة Deploy اختر New Deployment → Web App، اضبط Execute as و Who has access ثم اضغط Deploy.

6

نسخ رابط Web App

انسخ رابط Web App الناتج لاستخدامه لاحقًا في نموذج HTML داخل صفحة بلوجر.

إضافة كود Google Script بالصور

في هذا الجزء، سنشرح بالصور خطوة بخطوة كيفية إضافة كود نموذج الاتصال في Google Apps Script الصور ستوضح كل خطوة من فتح المشروع وحتى نسخ رابط Web App، لتسهيل متابعة العملية حتى للمبتدئين، وللتأكد من أن كل خطوة واضحة قبل الانتقال للخطوة التالية.

شرح بالصور كيفية إضافة كود نموذج الاتصال في Google Apps Script وربطه بمدونة بلوجر

إنشاء صفحة اتصل بنا لمدونة بلوجر وربطها بالمفتاح

في هذه الخطوة، سنقوم بإنشاء صفحة HTML خاصة بنموذج الاتصال، حيث سنضيف الكود الخاص بالنموذج ونجعلها جاهزة لاستقبال البيانات من Google Script. هذا يضمن أن النموذج سيعمل بشكل صحيح على أي قالب بلوجر.

<style>
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css');

.eltiqni-contact-form {
    max-width: 600px;
    margin: 20px auto;
    border: 1px solid #eee;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    overflow: hidden;
    font-family: Arial, sans-serif;
}
.custom-contact-body {
    padding: 30px;
}
.contact-form-icon-container {
    text-align: center;
    margin-bottom: 25px;
}
.contact-form-icon-container i {
    font-size: 40px;
    color: #555;
}
.form-group {
    margin-bottom: 20px;
    position: relative;
}
.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: bold;
    color: #444;
    text-align: right;
    padding-right: 40px;
}
.form-group .icon {
    position: absolute;
    top: 35px;
    right: 0;
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    color: white;
    font-size: 14px;
    border-radius: 8px 0 0 8px;
}
.icon.user-icon { background: #007bff; }
.icon.email-icon { background: #e74c3c; }
.icon.message-icon { background: #2ecc71; }
.form-group input,
.form-group textarea {
    width: 100%;
    padding: 10px;
    padding-right: 48px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    box-sizing: border-box;
    background: #fff;
    text-align: right;
    font-size: 14px;
}
.form-group textarea {
    height: 150px;
    resize: vertical;
}
.form-buttons {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}
.form-buttons button {
    width: 100%;
    padding: 12px;
    border: none;
    border-radius: 8px;
    color: white;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: center;
}
button#custom-submit-btn {
    background: #007bff;
}
button#custom-submit-btn:hover {
    background: #0056b3;
}
button#custom-reset-btn {
    background: #e70000;
}
button#custom-reset-btn:hover {
    background: #c00;
}
#custom-reset-btn i {
    margin-right: 8px;
}
#custom-submit-btn i {
    margin-left: 8px;
}
#status-message {
    text-align: center;
    color: #2ecc71;
    font-weight: bold;
    margin-top: 15px;
    display: none;
}
</style>

<div class="eltiqni-contact-form">
    <div class="custom-contact-body">
    
        <div class="contact-form-icon-container">
            <i class="fas fa-envelope"></i>
        </div>

        <form id="custom-contact-form">
            <div class="form-group">
                <label for="custom-name">الإسم</label>
                <span class="icon user-icon"><i class="fas fa="user"></i></span>
                <input type="text" id="custom-name" name="name" placeholder="أدمن مدونة التقني للمعلوميات" required>
            </div>
            <div class="form-group">
                <label for="custom-email">الإيميل *</label>
                <span class="icon email-icon"><i class="fas fa-exclamation-triangle"></i></span>
                <input type="email" id="custom-email" name="email" placeholder="support@eltiqni.com" required>
            </div>
            <div class="form-group">
                <label for="custom-message">الرسالة *</label>
                <span class="icon message-icon"><i class="fas fa-pen"></i></span>
                <textarea id="custom-message" name="message" placeholder="اكتب رسالتك هنا..." required></textarea>
            </div>
            <div class="form-buttons">
                <button type="reset" id="custom-reset-btn">
                    <i class="fas fa-sync-alt"></i> مسح
                </button>
                <button type="submit" id="custom-submit-btn">
                    إرسال <i class="fas fa-paper-plane"></i>
                </button>
            </div>
            <div id="status-message">
                جاري إرسال رسالتك...
            </div>
        </form>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    
    const SCRIPT_URL = "الصق_رابط_تطبيق_الويب_هنا";

    const form = document.getElementById('custom-contact-form');
    const submitButton = document.getElementById('custom-submit-btn');
    const resetButton = document.getElementById('custom-reset-btn');
    const statusMsg = document.getElementById('status-message');

    form.addEventListener('submit', function(e) {
        e.preventDefault();
        const formData = new FormData(form);
        
        statusMsg.innerText = 'جاري إرسال رسالتك...';
        statusMsg.style.color = '#2ecc71';
        statusMsg.style.display = 'block';
        submitButton.disabled = true;
        submitButton.innerText = '...جاري الإرسال';

        fetch(SCRIPT_URL, {
            method: 'POST',
            body: formData,
        })
        .then(response => response.json())
        .then(data => {
            if (data.result === 'success') {
                statusMsg.innerText = 'تم إرسال رسالتك بنجا!
                statusMsg.style.color = '#2ecc71';
                resetForm();
                setTimeout(function() {
                    statusMsg.style.display = 'none';
                }, 4000);
            } else {
                throw new Error(data.message || 'حدث خطأ غير معروف');
            }
        })
        .catch(error => {
            console.error('Error:', error);
            statusMsg.innerText = 'حدث خطأ. حاول مرة أخرى.';
            statusMsg.style.color = '#e74c3c';
            submitButton.disabled = false;
            submitButton.innerHTML = 'إرسال <i class="fas fa-paper-plane"></i>';
        });
    });

    resetButton.addEventListener('click', function() {
        resetForm();
        statusMsg.style.display = 'none';
    });

    function resetForm() {
        form.reset();
        submitButton.disabled = false;
        submitButton.innerHTML = 'إرسال <i class="fas fa-paper-plane"></i>';
    }
});
</script>

خطوات تفصيلية لإنشاء صفحة اتصل بنا HTML على بلوجر

1

إنشاء صفحة جديدة

افتح لوحة تحكم بلوجر، اذهب إلى الصفحات، واضغط إنشاء صفحة جديدة.

2

تحويل الي وضع HTML

اختر محرر HTML لإضافة كود نموذج الاتصال.

3

إضافة كود النموذج

الصق كود HTML الخاص بالنموذج داخل الصفحة.

4

إضافة مفتاح Web App

ضع رابط Web App الذي نسخته من موقع Google Apps Script في منطقة SCRIPT_URL داخل الكود.

5

تخصيص الصفحة

إذا أردت يمكنك تخصيص الألوان، الخطوط، والأيقونات لتتناسب مع مدونتك.

6

حفظ وتجربة الصفحة

احفظ الصفحة وجرب إرسال رسالة للتأكد من وصولها لبريدك Gmail.

شرح بالصور لإنشاء صفحة اتصل بنا لمدونة بلوجر

في هذا الجزء، سنشرح بالصور خطوة بخطوة كيفية إنشاء صفحة اتصل بنا لمدونة بلوجر html وربطها بالمفتاح من Google Apps Script، لتسهيل متابعة العملية حتى للمبتدئين، وللتأكد من أن كل خطوة واضحة قبل الانتقال للخطوة التالية.

شرح بالصور: كيفية إنشاء صفحة اتصل بنا لمدونة بلوجر وربطها بالمفتاح من Google Apps Script

معاينة صفحة اتصل بنا لمدونة بلوجر

الآن وبعد الإنتهاء من تنفيذ الخطوات السابقة يجب أن يعمل نموذج الاتصال على مدونتك في بلوجر بشكل سليم 100%,ولزيادة التأكد ولمعرفة اهم ميزات الصفحة ومشاهدة الشكل المميز كاملا، يمكنك معاينة صفحة اتصل بنا من خلال زيارة الرابط التالي للصفحة

صفحة اتصل بنا

خاتمة

إن تطبيق طريقة الجسر لإنشاء صفحة اتصل بنا على بلوجر يضمن لك نموذج اتصال آمن، سريع، وسهل التخصيص. باتباعك للخطوات من إعداد Google Apps Script، إضافة الكود وربطه بالمفتاح، ثم إنشاء صفحة HTML متناسقة، ستحصل على صفحة تعمل بكفاءة على أي قالب بدون مشاكل، مع تصميم جذاب يتناسب مع هوية موقعك.

باستخدام هذه الطريقة، يصبح من السهل على زوار مدونتك التواصل معك مباشرة، وتستطيع التحكم في كل جزء من النموذج بسهولة. لا تتردد في تجربة كل خطوة بعناية، وستلاحظ الفرق في الأداء والاحترافية، مما يجعل صفحة اتصل بنا جزءًا فعالًا وجذابًا من موقعك.

قد يعجبك ايضا: