BB Form Builder

Buat Formulir Powerful dalam Hitungan Menit

Buat formulir kompleks dan multi-langkah dengan pembuat drag-and-drop intuitif kami. Tidak perlu coding.
Lihat Demo

Seret & Lepas

Antarmuka intuitif untuk membuat formulir. Cukup seret field ke kanvas.

Multi-Langkah

Bagi formulir panjang menjadi langkah-langkah yang mudah dikelola untuk meningkatkan pengalaman pengguna dan konversi.

Integrasi

Hubungkan dengan alat dan layanan favorit Anda untuk mengotomatiskan alur kerja.

Fitur BB Form Builder

Semua yang Anda butuhkan untuk membuat formulir profesional untuk website Anda.

Pembuat Seret & Lepas

Pembuat visual intuitif dengan antarmuka seret-dan-lepas. Tidak perlu coding untuk membuat formulir yang indah.

Formulir Multi-Langkah

Bagi formulir panjang menjadi langkah-langkah yang mudah dikelola dengan tata letak wizard horizontal atau vertikal.

15+ Jenis Field

Teks, email, telepon, select, checkbox, radio, unggah file, pemilih tanggal, rating bintang, dan lainnya.

Notifikasi Email

Kirim notifikasi email yang dapat disesuaikan ke admin dan respons otomatis ke pengguna.

Webhooks & Integrasi

Hubungkan ke Zapier, Make, atau endpoint webhook apa pun. Integrasikan dengan Mailchimp dan GetResponse.

Perlindungan Spam

Dukungan bawaan untuk Google reCAPTCHA dan CAPTCHA matematika untuk mencegah pengiriman spam.

Ekspor Pengiriman

Ekspor pengiriman formulir ke format CSV atau Excel untuk analisis dan pelaporan.

Sematkan di Mana Saja

Gunakan shortcode atau sematkan formulir melalui iframe di situs web eksternal dengan styling lengkap.

Pratinjau Langsung

Pratinjau formulir Anda secara real-time saat membangun. Lihat dengan tepat bagaimana tampilannya di desktop, tablet, dan seluler.

Panduan Mulai Cepat

  1. Navigasi ke Panel Admin > BB Form Builder > Formulir
  2. Klik "Buat" untuk membuat formulir baru
  3. Seret field dari panel kiri ke kanvas
  4. Konfigurasi pengaturan field (label, placeholder, validasi)
  5. Siapkan aksi (notifikasi email, webhooks, dll.)
  6. Simpan dan sematkan menggunakan shortcode atau iframe

Aksi yang Tersedia

Notifikasi Email
Penyimpanan Database
API / Webhooks
Mailchimp
GetResponse
Segera hadir...

Formulir Popup

Tampilkan formulir dalam popup modal dengan berbagai opsi pemicu

Klik Tombol

Formulir terbuka saat pengguna mengklik tombol. Terbaik untuk formulir kontak, pendaftaran, dan aksi sesuai permintaan.

Penundaan Waktu

Klik untuk pratinjau (pemicu otomatis dinonaktifkan untuk demo)

Formulir muncul secara otomatis setelah waktu tertentu (5 detik). Bagus untuk pendaftaran newsletter.

Persentase Scroll

Klik untuk pratinjau (pemicu otomatis dinonaktifkan untuk demo)

Formulir muncul saat pengguna menggulir lebih dari 50% halaman. Ideal untuk formulir umpan balik.

Niat Keluar

Klik untuk pratinjau (pemicu otomatis dinonaktifkan untuk demo)

Formulir muncul saat pengguna menggerakkan kursor untuk meninggalkan halaman. Sempurna untuk menangkap pengunjung yang pergi.

Mode Tampilan Popup

Konfigurasikan pengaturan popup di pembuat formulir di bawah Pengaturan → Pengaturan Tampilan Popup. Pilih dari pemicu Klik Tombol, Penundaan Waktu, Persentase Scroll, atau Niat Keluar. Setiap popup hanya muncul sekali per sesi (kecuali popup yang dipicu tombol).

Gaya Formulir

Pilih dari 5 gaya formulir cantik untuk menyesuaikan desain website Anda

Default Bersih dan profesional dengan bayangan halus
Modern Sudut membulat dengan latar belakang lembut
Minimal Input tanpa border dengan garis bawah saat fokus
Tebal Border tebal dengan bayangan offset
Efek Kaca Efek kaca buram dengan blur

Formulir Kontak

Langganan Buletin

Umpan Balik Pelanggan

  • Step 1 Langkah 1 dari 3
  • Step 2 Langkah 2 dari 3
  • Step 3 Langkah 3 dari 3

Step 1

Step 2

Step 3

Lamaran Kerja

  • Step 1 Langkah 1 dari 3
  • Step 2 Langkah 2 dari 3
  • Step 3 Langkah 3 dari 3

Step 1

Step 2

Step 3

Pilih file atau seret & lepas di sini

Anda dapat mengunggah jenis file berikut: .pdf,.doc,.docx dan ukuran file maksimal adalah 2MB.

Pendaftaran Acara

  • Step 1
  • Step 2

Lihat Beraksi

Rasakan kekuatan dan kesederhanaan pembuat formulir kami.

Pembuat Seret & Lepas yang Intuitif

Pembuat Seret & Lepas yang Intuitif

Manajemen Pengiriman yang Mulus

Manajemen Pengiriman yang Mulus

Panduan Instalasi

Mulai dalam hitungan menit dengan proses instalasi sederhana kami.

Persyaratan

  • Botble CMS
    Versi 7.5.0 atau lebih tinggi
  • PHP
    Versi 8.2 atau lebih tinggi
  • Lisensi
    Kode pembelian valid dari CodeCanyon

Langkah Instalasi

1

Unduh Plugin

Unduh file ZIP plugin dari Unduhan CodeCanyon halaman.

2

Ekstrak File ZIP

Ekstrak file ZIP yang diunduh ke komputer lokal Anda.

3

Unggah ke Server

Unggah folder yang diekstrak ke server Anda di:

platform/plugins/bb-form-builder
4

Aktifkan Plugin

Pergi ke Panel Admin → Plugin dan klik Aktifkan tombol.

5

Masukkan Kunci Lisensi

Navigasi ke Panel Admin → Pengaturan → Umum dan masukkan kode pembelian Anda untuk mengaktifkan lisensi.

Mulai Buat Formulir!

Akses BB Form Builder dari menu sidebar admin dan buat formulir pertama Anda.

Tips Pro

Setelah instalasi, lihat dokumentasi untuk panduan detail tentang membuat formulir, mengatur notifikasi email, dan mengintegrasikan dengan layanan pihak ketiga.

Sematkan Formulir di Website Manapun

Sematkan via iframe

Sematkan formulir Anda dengan mudah di situs web eksternal mana pun menggunakan iframe. Pilih salah satu format URL di bawah:

URL Ramah

URL yang dapat dibaca menggunakan kode formulir

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

Menggunakan hash untuk keamanan lebih baik (direkomendasikan untuk formulir sensitif)

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

Sematkan via JavaScript

Untuk kontrol lebih dan responsivitas yang lebih baik, gunakan kode JavaScript penyematan kami:

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

Tips Pro

Ganti your-form-code dengan kode formulir Anda yang sebenarnya (contoh: contact-form, newsletter). Anda dapat menemukan kode formulir di panel admin di bawah Formulir > Edit Formulir.
Anda dapat menemukan kedua format URL di tab Pengaturan formulir Anda di bawah "Kode Embed".

Demo Embed Langsung

Pratinjau

Belum dimuat

Klik "Muat Formulir" untuk melihat pratinjau formulir yang disematkan

Kode Embed

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

Cara Penggunaan

Penggunaan Shortcode

Gunakan shortcode berikut untuk menyematkan formulir di halaman Anda:

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

Formulir Demo yang Tersedia

  • contact-form - Formulir kontak sederhana
  • customer-feedback - Survei multi-langkah dengan rating bintang
  • job-application - Formulir multi-langkah dengan unggah file
  • newsletter - Langganan newsletter
  • event-registration - Pendaftaran acara dengan beberapa field

Siap untuk Memulai?

Buat Formulir Profesional dalam Hitungan Menit

Transformasi website Anda dengan formulir yang powerful dan indah. Buat formulir kontak, survei, pendaftaran, dan lainnya dengan pembuat drag-and-drop intuitif kami.

15+
Jenis Field
5+
Integrasi
100%
Responsif
24/7
Dukungan
Beli Sekarang
Halaman ini hanya untuk tujuan demo, tidak termasuk dalam paket unduhan. Kami hanya menjual plugin BB Form Builder.
Buy Now on Envato