كيفية إنشاء نموذج تواصل في ووردبريس بدون استخدام إضافات

يُعد نموذج التواصل (Contact Form) أحد أهم الأدوات لجمع آراء الزوار واستفساراتهم على موقعك. ورغم توافر العديد من الإضافات (Plugins) الشهيرة التي تسهّل عملية إنشاء نموذج تواصل، إلا أن بعض المستخدمين يفضّلون إنجاز الأمر يدويًا دون اللجوء إلى إضافات خارجية. في هذا الدليل الشامل، سنتعلّم سويًا كيفية إنشاء نموذج تواصل في ووردبريس باستخدام الأكواد فقط، خطوة بخطوة، وبأسلوب يناسب المبتدئين.

لماذا ننشئ نموذج تواصل يدويًا؟

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

الخطوة الأولى: إنشاء صفحة مخصصة (Template Page)

بدلًا من تعديل الصفحة الرئيسية للقالب الأساسي، يُنصح بإنشاء قالب فرعي (Child Theme) تفاديًا لفقدان التعديلات عند تحديث القالب. بعد إعداد القالب الفرعي، أنشئ ملفًا جديدًا باسم contact-template.php داخل مجلد القالب الفرعي وأضف التعليقات التعريفية في أعلاه:


<?php
/*
 * Template Name: Contact Form (No Plugin)
 * Description: صفحة مخصصة لنموذج التواصل اليدوي.
 */

get_header();
?>

<!-- اكتب محتوى الصفحة أدناه -->
<div class="contact-form-container">
    <h2>تواصل معنا</h2>
    
    <?php
    // التحقق من إرسال النموذج وعرض رسالة نجاح أو خطأ
    if ( isset($_POST['cf-submitted']) ) {
        
        // تعيين البيانات الواردة من النموذج
        $name    = sanitize_text_field( $_POST['cf-name'] );
        $email   = sanitize_email( $_POST['cf-email'] );
        $message = sanitize_textarea_field( $_POST['cf-message'] );
        
        // التحقق من عدم فراغ الحقول المطلوبة
        if ( ! empty($name) && ! empty($email) && ! empty($message) ) {
            
            // إعداد عناوين الرسالة
            $to      = get_option('admin_email');
            $subject = "رسالة جديدة من: $name";
            $headers = "From: $name <$email>\r\n";
            
            // إرسال البريد الإلكتروني
            wp_mail( $to, $subject, $message, $headers );
            
            // رسالة نجاح
            echo '<p style="color: green;">تم إرسال رسالتك بنجاح!</p>';
        } else {
            // رسالة خطأ
            echo '<p style="color: red;">الرجاء تعبئة جميع الحقول المطلوبة بشكل صحيح.</p>';
        }
    }
    ?>
    
    <form action="<?php the_permalink(); ?>" method="post">
        <label for="cf-name">الاسم:</label><br />
        <input type="text" id="cf-name" name="cf-name" placeholder="اكتب اسمك هنا" required /><br /><br />
        
        <label for="cf-email">البريد الإلكتروني:</label><br />
        <input type="email" id="cf-email" name="cf-email" placeholder="example@domain.com" required /><br /><br />
        
        <label for="cf-message">رسالتك:</label><br />
        <textarea id="cf-message" name="cf-message" rows="6" placeholder="اكتب رسالتك..." required></textarea><br /><br />
        
        <input type="hidden" name="cf-submitted" value="1" />
        <button type="submit">إرسال الرسالة</button>
    </form>
</div>

<?php get_footer(); ?>

ملاحظات حول هذا الكود:

get_header() / get_footer(): يستدعي رأس وتذييل الموقع (Header & Footer) من القالب الحالي.
sanitize_text_field() / sanitize_email() / sanitize_textarea_field(): تستخدم لتنظيف البيانات المُرسلة من المستخدم قبل معالجتها أو إرسالها عبر البريد.
wp_mail(): الدالة المضمنة في ووردبريس لإرسال رسائل البريد الإلكتروني.

الخطوة الثانية: ربط الصفحة بالقالب المخصص

بعد حفظ ملف contact-template.php ورفعه إلى القالب الفرعي، قم بالتالي:

من لوحة تحكم ووردبريس، انتقل إلى صفحات > أضف جديد.
أنشئ صفحة جديدة باسم “اتصل بنا” أو الاسم الذي تفضله.
ضمن قسم سمات الصفحة (Page Attributes) في العمود الجانبي، اختر Contact Form (No Plugin) من قائمة القالب (Template).
انقر على نشر.

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

الخطوة الثالثة: تنسيق النموذج عبر CSS

لتحسين مظهر النموذج، يمكنك إضافة أكواد CSS في ملف style.css بالقالب الفرعي أو عبر المظهر > تخصيص > CSS إضافي. مثال بسيط:


.contact-form-container {
    max-width: 600px;
    margin: 0 auto;
    padding: 20px;
    background: #fafafa;
    border: 1px solid #ddd;
    border-radius: 5px;
}

.contact-form-container h2 {
    text-align: center;
    margin-bottom: 15px;
    color: #333;
}

.contact-form-container label {
    font-weight: bold;
}

.contact-form-container input[type="text"],
.contact-form-container input[type="email"],
.contact-form-container textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

.contact-form-container button {
    background-color: #0073aa;
    color: #fff;
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.contact-form-container button:hover {
    background-color: #005177;
}

نصائح:

قم بتعديل الألوان والمساحات حسب هويتك البصرية.
استعمل ميديـا كويري (Media Queries) لجعل النموذج متجاوبًا مع جميع الشاشات.

الخطوة الرابعة: إضفاء تحسينات على الأمان والمرونة

استخدام Nonce: لضمان أمان أعلى يمكنك إضافة Nonce (رقم فريد) للتحقق من صحة الطلبات المرسلة عبر الفورم.
تخصيص الوجهة البريدية: بدلًا من إرسال الرسالة إلى بريد مدير الموقع فقط، يمكن إضافة حقل CC أو BCC أو حتى إضافة شروط لتغيير الوجهة بناءً على مدخلات المستخدم.
تعديل الرسائل النصية: يمكنك تعديل نصوص رسائل النجاح والخطأ وفق لغة الموقع وهوية العلامة التجارية.

اختبار النموذج والتأكد من عمله

افتح صفحة “اتصل بنا” التي أنشأتها على موقعك.
قم بتعبئة الحقول (الاسم – البريد – الرسالة) واضغط على زر الإرسال.
تأكد من ظهور رسالة نجاح في الموقع ووصول رسالة البريد الإلكتروني إلى العنوان المُحدد في كود $to.
في حال حدوث أخطاء، تحقق من ملف error_log على الاستضافة أو من وحدة تتبع الأخطاء في لوحة التحكم، وحل أي مشكلة في إعدادات بريد الاستضافة (SMTP أو غيره).

لماذا تحتاج إلى موقع احترافي مع إتقان؟

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

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

تواصل معنا الآن!

لا تدع الفرصة تفوتك في تحسين تواصلك مع جمهورك. ابدأ رحلتك الرقمية معنا في إتقان وتواصل معنا عبر الرابط التالي:

تواصل مع إتقان

دعنا نساعدك في بناء موقع عربي احترافي، سريع وآمن، يعكس هوية علامتك التجارية ويحقق أهدافك بنجاح!

إنشاء نموذج تواصل في ووردبريس بدون إضافات