منشئ النماذج BB

أنشئ نماذج قوية في دقائق

قم بإنشاء نماذج معقدة ومتعددة الخطوات باستخدام منشئنا البديهي بالسحب والإفلات. لا حاجة للبرمجة.
عرض توضيحي

سحب وإفلات

واجهة بديهية لبناء النماذج. ما عليك سوى سحب الحقول إلى منطقة العمل.

متعدد الخطوات

قسّم النماذج الطويلة إلى خطوات قابلة للإدارة لتحسين تجربة المستخدم ومعدل التحويل.

التكاملات

اتصل بأدواتك وخدماتك المفضلة لأتمتة سير عملك.

مميزات BB Form Builder

كل ما تحتاجه لإنشاء نماذج احترافية لموقعك.

منشئ السحب والإفلات

منشئ مرئي بديهي مع واجهة السحب والإفلات. لا حاجة للبرمجة لإنشاء نماذج جميلة.

نماذج متعددة الخطوات

قسّم النماذج الطويلة إلى خطوات قابلة للإدارة مع تخطيطات معالج أفقية أو رأسية.

أكثر من 15 نوع حقل

نص، بريد إلكتروني، هاتف، قائمة اختيار، مربع تحديد، زر راديو، رفع ملف، منتقي تاريخ، تقييم بالنجوم، والمزيد.

إشعارات البريد الإلكتروني

أرسل إشعارات بريد إلكتروني قابلة للتخصيص للمسؤولين وردود تلقائية للمستخدمين.

Webhooks والتكاملات

اتصل بـ Zapier أو Make أو أي نقطة نهاية webhook. التكامل مع Mailchimp و GetResponse.

الحماية من البريد العشوائي

دعم مدمج لـ Google reCAPTCHA و CAPTCHA الرياضي لمنع الإرسالات العشوائية.

تصدير الإرسالات

صدّر إرسالات النماذج إلى تنسيق CSV أو Excel للتحليل وإعداد التقارير.

تضمين في أي مكان

استخدم الأكواد المختصرة أو قم بتضمين النماذج عبر iframe في المواقع الخارجية مع التنسيق الكامل.

معاينة مباشرة

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

دليل البدء السريع

  1. انتقل إلى لوحة الإدارة > BB Form Builder > النماذج
  2. انقر على "إنشاء" لبناء نموذج جديد
  3. اسحب الحقول من اللوحة اليسرى إلى منطقة العمل
  4. تكوين إعدادات الحقل (التسمية، النص التوضيحي، التحقق)
  5. إعداد الإجراءات (إشعارات البريد الإلكتروني، webhooks، إلخ.)
  6. حفظ وتضمين باستخدام الكود المختصر أو iframe

الإجراءات المتاحة

إشعارات البريد الإلكتروني
تخزين قاعدة البيانات
API / Webhooks
Mailchimp
GetResponse
المزيد قادم...

النماذج المنبثقة

عرض النماذج في نوافذ منبثقة مع خيارات تشغيل متنوعة

نقر الزر

يفتح النموذج عندما ينقر المستخدم على زر. الأفضل لنماذج الاتصال والتسجيل والإجراءات عند الطلب.

تأخير زمني

انقر للمعاينة (التشغيل التلقائي معطل للعرض التوضيحي)

يظهر النموذج تلقائياً بعد وقت محدد (5 ثوانٍ). رائع للاشتراك في النشرة الإخبارية.

نسبة التمرير

انقر للمعاينة (التشغيل التلقائي معطل للعرض التوضيحي)

يظهر النموذج عندما يمرر المستخدم أكثر من 50% من الصفحة. مثالي لنماذج التغذية الراجعة.

نية الخروج

انقر للمعاينة (التشغيل التلقائي معطل للعرض التوضيحي)

يظهر النموذج عندما يحرك المستخدم المؤشر لمغادرة الصفحة. مثالي لاستهداف الزوار المغادرين.

أوضاع عرض النوافذ المنبثقة

قم بتكوين إعدادات النوافذ المنبثقة في منشئ النماذج ضمن الإعدادات → إعدادات عرض النوافذ المنبثقة. اختر من نقر الزر، التأخير الزمني، نسبة التمرير، أو محفزات نية الخروج. تظهر كل نافذة منبثقة مرة واحدة فقط لكل جلسة (باستثناء النوافذ المنبثقة التي يتم تشغيلها بالزر).

أنماط النماذج

اختر من بين 5 أنماط نماذج جميلة لتتناسب مع تصميم موقعك

افتراضي نظيف واحترافي مع ظلال خفيفة
عصري زوايا مستديرة مع خلفيات ناعمة
بسيط حقول بدون حدود مع تركيز بخط سفلي
عريض حدود قوية مع ظلال متحركة
تأثير الزجاج تأثير الزجاج المصنفر مع الضبابية

نموذج الاتصال

الاشتراك في النشرة الإخبارية

ملاحظات العملاء

  • Step 1 الخطوة 1 من 3
  • Step 2 الخطوة 2 من 3
  • Step 3 الخطوة 3 من 3

Step 1

Step 2

Step 3

طلب توظيف

  • Step 1 الخطوة 1 من 3
  • Step 2 الخطوة 2 من 3
  • Step 3 الخطوة 3 من 3

Step 1

Step 2

Step 3

اختر ملفاً أو اسحبه هنا

يمكنك رفع أنواع الملفات التالية: .pdf,.doc,.docx وأقصى حجم للملف هو 2MB.

تسجيل الحدث

  • Step 1
  • Step 2

شاهده أثناء العمل

اختبر قوة وبساطة منشئ النماذج لدينا.

منشئ سحب وإفلات بديهي

منشئ سحب وإفلات بديهي

إدارة سلسة للإرسالات

إدارة سلسة للإرسالات

دليل التثبيت

ابدأ العمل في دقائق مع عملية التثبيت البسيطة.

المتطلبات

  • Botble CMS
    الإصدار 7.5.0 أو أعلى
  • PHP
    الإصدار 8.2 أو أعلى
  • الترخيص
    كود شراء صالح من CodeCanyon

خطوات التثبيت

1

تحميل الإضافة

قم بتحميل ملف ZIP للإضافة من تحميلات CodeCanyon صفحة.

2

استخراج ملف ZIP

استخرج ملف ZIP المحمّل إلى جهازك المحلي.

3

الرفع إلى الخادم

ارفع المجلد المستخرج إلى خادمك في:

platform/plugins/bb-form-builder
4

تفعيل الإضافة

انتقل إلى لوحة الإدارة → الإضافات وانقر على تفعيل زر.

5

أدخل مفتاح الترخيص

انتقل إلى لوحة الإدارة → الإعدادات → عام وأدخل كود الشراء لتفعيل الترخيص.

ابدأ ببناء النماذج!

الوصول BB Form Builder من قائمة الشريط الجانبي للإدارة وأنشئ أول نموذج لك.

نصيحة احترافية

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

تضمين النماذج في أي موقع

التضمين عبر iframe

يمكنك بسهولة تضمين نماذجك في أي موقع خارجي باستخدام iframe. اختر أحد تنسيقات URL أدناه:

رابط ودي

رابط قابل للقراءة باستخدام كود النموذج

<iframe
    src="https://bb-form-builder.botble.com/form/your-form-code"
    width="100%"
    height="500"
    frameborder="0"
></iframe>
رابط آمن

يستخدم الهاش لأمان أفضل (موصى به للنماذج الحساسة)

<iframe
    src="https://bb-form-builder.botble.com/forms/abc123xyz/embed"
    width="100%"
    height="500"
    frameborder="0"
></iframe>

التضمين عبر JavaScript

للحصول على المزيد من التحكم واستجابة أفضل، استخدم كود JavaScript للتضمين:

<div id="bb-form-builder-container"></div>
<script src="https://bb-form-builder.botble.com/vendor/core/plugins/bb-form-builder/js/embed.js?v=1.1.3"></script>
<script>
    document.addEventListener("DOMContentLoaded", function() {
        BbFormBuilder.embed({
            container: '#bb-form-builder-container',
            formCode: 'your-form-code',
            version: '1.1.3'
        });
    });
</script>

نصيحة احترافية

استبدل your-form-code برمز النموذج الفعلي (مثل: contact-form، newsletter). يمكنك العثور على رمز النموذج في لوحة الإدارة ضمن النماذج > تحرير النموذج.
يمكنك العثور على كلا تنسيقي URL في علامة التبويب "الإعدادات" الخاصة بنموذجك تحت "كود التضمين".

عرض التضمين المباشر

معاينة

غير محمّل

انقر على "تحميل النموذج" لمعاينة النموذج المضمّن

كود التضمين

<iframe
    src="https://bb-form-builder.botble.com/form/contact-form"
    width="100%"
    height="500"
    frameborder="0"
></iframe>

Integrate with Another Botble CMS Site

Easily embed forms from your BB Form Builder installation into any Botble CMS website.

How It Works

This integration allows you to host BB Form Builder on one site (e.g., form.domain.com) and embed forms on other Botble CMS sites using a simple shortcode. The forms are loaded via JavaScript for seamless integration.

1 Create Integration File

Create a new file named form-builder-integration.php in your theme's functions folder:

platform/themes/[your-theme]/functions/form-builder-integration.php

2 Add the Following Code

Copy and paste this code into your integration file. Update the $formBuilderBaseUrl to match your BB Form Builder installation URL:

<?php

use Botble\Shortcode\Compilers\Shortcode;

/**
 * BB Form Builder Integration for Botble CMS
 *
 * This file integrates forms from a remote BB Form Builder installation
 * into this Botble CMS site using the Embed via JavaScript feature.
 *
 * Instructions:
 * 1. Copy this file to: platform/themes/[your-theme]/functions/
 * 2. Update the $formBuilderBaseUrl variable below
 * 3. Use the shortcode: [bb-form-builder-integration code="your-form-code"]
 */

// Configure your BB Form Builder installation URL (no trailing slash)
$formBuilderBaseUrl = 'https://bb-form-builder.botble.com';
$embedVersion = '1.1.3';

app()->booted(function () use ($formBuilderBaseUrl, $embedVersion): void {
    // Add the embed.js script to the footer
    add_filter(THEME_FRONT_FOOTER, function (?string $html) use ($formBuilderBaseUrl, $embedVersion): string {
        static $scriptAdded = false;

        if ($scriptAdded) {
            return $html;
        }

        $scriptAdded = true;

        $script = <<<HTML
<script src="{$formBuilderBaseUrl}/vendor/core/plugins/bb-form-builder/js/embed.js?v={$embedVersion}"></script>
HTML;

        return $html . $script;
    }, 100);

    // Register the shortcode to render forms
    add_shortcode(
        'bb-form-builder-integration',
        'BB Form Builder Integration',
        'Embed a form from your BB Form Builder installation',
        function (Shortcode $shortcode) use ($formBuilderBaseUrl, $embedVersion) {
            $formCode = $shortcode->code;

            if (empty($formCode)) {
                return '<p class="text-danger">Error: code attribute is required.</p>';
            }

            // Generate a unique container ID
            $containerId = 'bb-form-' . md5($formCode . uniqid());

            return <<<HTML
<div id="{$containerId}"></div>
<script>
document.addEventListener("DOMContentLoaded", function() {
    if (typeof BbFormBuilder !== 'undefined') {
        BbFormBuilder.embed({
            container: '#{$containerId}',
            formCode: '{$formCode}',
            baseUrl: '{$formBuilderBaseUrl}',
            version: '{$embedVersion}'
        });
    } else {
        document.getElementById('{$containerId}').innerHTML =
            '<p class="text-danger">BB Form Builder script not loaded.</p>';
    }
});
</script>
HTML;
        }
    );

    // Optional: Add admin UI for the shortcode
    shortcode()->setAdminConfig('bb-form-builder-integration', function (array $attributes) {
        return '
            <div class="mb-3">
                <label class="form-label">Form Code</label>
                <input type="text" name="code" value="' . ($attributes['code'] ?? '') . '" class="form-control" placeholder="e.g., contact-form">
                <div class="form-text">Enter the form code from your BB Form Builder installation.</div>
            </div>
        ';
    });
});

3 Use the Shortcode

Add this shortcode to any page or post on your Botble CMS site:

[bb-form-builder-integration code="your-form-code"]

Examples:

  • [bb-form-builder-integration code="contact-form"]
  • [bb-form-builder-integration code="newsletter"]
  • [bb-form-builder-integration code="job-application"]

Finding Your Form Code

  1. Go to your BB Form Builder admin panel
  2. Open the form you want to embed
  3. Click on the "Settings" tab
  4. Find the "Form Code" field
  5. Copy the code (e.g., "contact-form")

Cross-Domain Support

BB Form Builder supports cross-domain embedding out of the box. No additional CORS configuration is required. Simply install BB Form Builder on your form server and embed forms on any website using the shortcode above.

Pro Tips

  • Use a subdomain like form.yourdomain.com to host your BB Form Builder installation for easier management.
  • The embed script is loaded only once, even if you have multiple forms on the same page.
  • Form submissions are processed on your BB Form Builder server, keeping your main site lightweight.
  • You can customize the form styling using CSS on your theme.

كيفية الاستخدام

استخدام الكود المختصر

استخدم الكود المختصر التالي لتضمين النماذج في صفحاتك:

[bb-form-builder code="your-form-code"][/bb-form-builder]

نماذج العرض المتاحة

  • contact-form - نموذج اتصال بسيط
  • customer-feedback - استطلاع متعدد الخطوات مع تقييم بالنجوم
  • job-application - نموذج متعدد الخطوات مع رفع ملف
  • newsletter - الاشتراك في النشرة الإخبارية
  • event-registration - تسجيل الحدث مع حقول متعددة

هل أنت مستعد للبدء؟

أنشئ نماذج احترافية في دقائق

حوّل موقعك بنماذج قوية وجميلة. أنشئ نماذج اتصال واستطلاعات وتسجيلات والمزيد باستخدام منشئنا البديهي بالسحب والإفلات.

15+
أنواع الحقول
5+
التكاملات
100%
متجاوب
24/7
الدعم
اشترِ الآن
هذه الصفحة للعرض التوضيحي فقط، وليست مضمنة في حزمة التحميل. نحن نبيع إضافة BB Form Builder فقط.
Buy Now on Envato