BB Form Builder

Dakikalar İçinde Güçlü Formlar Oluşturun

Sezgisel sürükle-bırak oluşturucumuzla karmaşık, çok adımlı formlar oluşturun. Kodlama gerektirmez.
Demo Görüntüle

Sürükle ve Bırak

Form oluşturmak için sezgisel arayüz. Alanları tuvale sürüklemeniz yeterli.

Çok Adımlı

Kullanıcı deneyimini ve dönüşümü iyileştirmek için uzun formları yönetilebilir adımlara bölün.

Entegrasyonlar

İş akışınızı otomatikleştirmek için favori araçlarınız ve hizmetlerinizle bağlanın.

BB Form Builder Özellikleri

Web siteniz için profesyonel formlar oluşturmak için ihtiyacınız olan her şey.

Sürükle ve Bırak Oluşturucu

Sürükle-bırak arayüzlü sezgisel görsel oluşturucu. Güzel formlar oluşturmak için kod yazmanıza gerek yok.

Çok Adımlı Formlar

Yatay veya dikey sihirbaz düzenleriyle uzun formları yönetilebilir adımlara bölün.

15+ Alan Türü

Metin, e-posta, telefon, seçim, onay kutusu, radyo, dosya yükleme, tarih seçici, yıldız derecelendirme ve daha fazlası.

E-posta Bildirimleri

Yöneticilere özelleştirilebilir e-posta bildirimleri ve kullanıcılara otomatik yanıtlar gönderin.

Webhooklar ve Entegrasyonlar

Zapier, Make veya herhangi bir webhook uç noktasına bağlanın. Mailchimp ve GetResponse ile entegre olun.

Spam Koruması

Spam gönderimlerini önlemek için yerleşik Google reCAPTCHA ve matematik CAPTCHA desteği.

Gönderimleri Dışa Aktar

Form gönderimlerini analiz ve raporlama için CSV veya Excel formatında dışa aktarın.

Her Yere Yerleştir

Harici web sitelerinde tam stil ile kısa kodlar kullanın veya formları iframe aracılığıyla yerleştirin.

Canlı Önizleme

Oluştururken formunuzu gerçek zamanlı olarak önizleyin. Masaüstü, tablet ve mobilde tam olarak nasıl görüneceğini görün.

Hızlı Başlangıç Kılavuzu

  1. Yönetici Paneli > BB Form Builder > Formlar'a gidin
  2. Yeni bir form oluşturmak için "Oluştur"a tıklayın
  3. Sol panelden alanları tuvale sürükleyin
  4. Alan ayarlarını yapılandırın (etiket, yer tutucu, doğrulama)
  5. Eylemleri ayarlayın (e-posta bildirimleri, webhooklar, vb.)
  6. Kısa kod veya iframe kullanarak kaydedin ve yerleştirin

Mevcut İşlemler

E-posta Bildirimleri
Veritabanı Depolama
API / Webhooks
Mailchimp
GetResponse
Daha fazlası geliyor...

Açılır Formlar

Çeşitli tetikleme seçenekleriyle formları modal açılır pencerelerde görüntüleyin

Düğme Tıklaması

Kullanıcı bir düğmeye tıkladığında form açılır. İletişim formları, kayıtlar ve talep üzerine eylemler için en iyisi.

Zaman Gecikmesi

Önizlemek için tıklayın (demo için otomatik tetikleme devre dışı)

Form belirli bir süre sonra (5 saniye) otomatik olarak görünür. Bülten kayıtları için harika.

Kaydırma Yüzdesi

Önizlemek için tıklayın (demo için otomatik tetikleme devre dışı)

Kullanıcı sayfanın %50'sini geçtiğinde form görünür. Geri bildirim formları için ideal.

Çıkış Niyeti

Önizlemek için tıklayın (demo için otomatik tetikleme devre dışı)

Kullanıcı sayfadan ayrılmak için imleci hareket ettirdiğinde form görünür. Ayrılan ziyaretçileri yakalamak için mükemmel.

Açılır Pencere Görüntüleme Modları

Form oluşturucuda Ayarlar → Açılır Pencere Görüntüleme Ayarları altında açılır pencere ayarlarını yapılandırın. Düğme Tıklaması, Zaman Gecikmesi, Kaydırma Yüzdesi veya Çıkış Niyeti tetikleyicilerinden birini seçin. Her açılır pencere oturum başına yalnızca bir kez gösterilir (düğmeyle tetiklenen açılır pencereler hariç).

Form Stilleri

Web sitenizin tasarımına uygun 5 güzel form stilinden birini seçin

Varsayılan İnce gölgelerle temiz ve profesyonel
Modern Yumuşak arka planlarla yuvarlatılmış köşeler
Minimal Alt çizgi odaklı kenarlıksız girişler
Kalın Ofset gölgelerle güçlü kenarlıklar
Camlaştırma Bulanıklıkla buzlu cam efekti

İletişim Formu

Bülten Aboneliği

Müşteri Geri Bildirimi

  • Step 1 Adım 1 / 3
  • Step 2 Adım 2 / 3
  • Step 3 Adım 3 / 3

Step 1

Step 2

Step 3

İş Başvurusu

  • Step 1 Adım 1 / 3
  • Step 2 Adım 2 / 3
  • Step 3 Adım 3 / 3

Step 1

Step 2

Step 3

Dosya seçin veya buraya sürükleyip bırakın

Şu dosya türlerini yükleyebilirsiniz: .pdf,.doc,.docx ve maksimum dosya boyutu 2MB'dir.

Etkinlik Kaydı

  • Step 1
  • Step 2

Çalışırken Görün

Form oluşturucumuzun gücünü ve basitliğini deneyimleyin.

Sezgisel Sürükle ve Bırak Oluşturucu

Sezgisel Sürükle ve Bırak Oluşturucu

Sorunsuz Gönderim Yönetimi

Sorunsuz Gönderim Yönetimi

Kurulum Kılavuzu

Basit kurulum sürecimizle dakikalar içinde başlayın.

Gereksinimler

  • Botble CMS
    Sürüm 7.5.0 veya üstü
  • PHP
    Sürüm 8.2 veya üstü
  • Lisans
    CodeCanyon'dan geçerli satın alma kodu

Kurulum Adımları

1

Eklentiyi İndir

Eklenti ZIP dosyasını şuradan indirin: CodeCanyon İndirmeleri sayfası.

2

ZIP Dosyasını Çıkarın

İndirilen ZIP dosyasını yerel bilgisayarınıza çıkarın.

3

Sunucuya Yükle

Çıkarılan klasörü sunucunuza şuraya yükleyin:

platform/plugins/bb-form-builder
4

Eklentiyi Etkinleştir

Git Yönetici Paneli → Eklentiler ve şuna tıklayın: Etkinleştir düğmesi.

5

Lisans Anahtarını Girin

Şuraya gidin: Yönetici Paneli → Ayarlar → Genel ve lisansı etkinleştirmek için satın alma kodunuzu girin.

Form Oluşturmaya Başlayın!

Erişim BB Form Builder yönetici kenar çubuğu menüsünden ve ilk formunuzu oluşturun.

Profesyonel İpucu

Kurulumdan sonra şunu kontrol edin: dokümantasyon form oluşturma, e-posta bildirimleri ayarlama ve üçüncü taraf hizmetlerle entegrasyon hakkında ayrıntılı kılavuzlar için.

Formları Herhangi Bir Web Sitesine Yerleştirin

iframe ile yerleştir

iframe kullanarak formlarınızı herhangi bir harici web sitesine kolayca gömün. Aşağıdaki URL formatlarından birini seçin:

Dostça URL

Form kodu kullanarak okunabilir URL

<iframe
    src="https://bb-form-builder.botble.com/form/your-form-code"
    width="100%"
    height="500"
    frameborder="0"
></iframe>
Güvenli URL

Daha iyi güvenlik için hash kullanır (hassas formlar için önerilir)

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

JavaScript ile yerleştir

Daha fazla kontrol ve daha iyi duyarlılık için JavaScript yerleştirme kodumuzu kullanın:

<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>

Profesyonel İpucu

your-form-code öğesini gerçek form kodunuzla değiştirin (ör. contact-form, newsletter). Form kodunu yönetici panelinde Formlar > Formu Düzenle altında bulabilirsiniz.
Her iki URL formatını da formunuzun Ayarlar sekmesinde "Gömme Kodu" altında bulabilirsiniz.

Canlı Yerleştirme Demosu

Önizleme

Yüklenmedi

Yerleştirilmiş formu önizlemek için "Formu Yükle"ye tıklayın

Yerleştirme Kodu

<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.

Nasıl Kullanılır

Kısa Kod Kullanımı

Sayfalarınıza form yerleştirmek için aşağıdaki kısa kodu kullanın:

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

Mevcut Demo Formları

  • contact-form - Basit iletişim formu
  • customer-feedback - Yıldız derecelendirmeli çok adımlı anket
  • job-application - Dosya yüklemeli çok adımlı form
  • newsletter - Bülten aboneliği
  • event-registration - Birden fazla alanlı etkinlik kaydı

Başlamaya Hazır mısınız?

Dakikalar İçinde Profesyonel Formlar Oluşturun

Web sitenizi güçlü, güzel formlarla dönüştürün. Sezgisel sürükle-bırak oluşturucumuzla iletişim formları, anketler, kayıtlar ve daha fazlasını oluşturun.

15+
Alan Türleri
5+
Entegrasyonlar
100%
Duyarlı
24/7
Destek
Şimdi Satın Al
Bu sayfa yalnızca demo amaçlıdır, indirme paketine dahil değildir. Sadece BB Form Builder eklentisini satıyoruz.
Buy Now on Envato