BB Form Builder

Créez des formulaires puissants en quelques minutes

Créez des formulaires complexes et multi-étapes avec notre constructeur intuitif par glisser-déposer. Aucun codage requis.
Voir la démo

Glisser-déposer

Interface intuitive pour créer des formulaires. Faites simplement glisser les champs sur le canevas.

Multi-étapes

Divisez les longs formulaires en étapes gérables pour améliorer l'expérience utilisateur et la conversion.

Intégrations

Connectez-vous à vos outils et services préférés pour automatiser votre flux de travail.

Fonctionnalités BB Form Builder

Tout ce dont vous avez besoin pour créer des formulaires professionnels.

Constructeur glisser-déposer

Constructeur visuel intuitif avec interface glisser-déposer. Aucun codage requis pour créer de beaux formulaires.

Formulaires multi-étapes

Divisez les longs formulaires en étapes gérables avec des dispositions d'assistant horizontales ou verticales.

Plus de 15 types de champs

Texte, e-mail, téléphone, select, checkbox, radio, téléchargement de fichier, sélecteur de date, notation par étoiles, et plus.

Notifications par e-mail

Envoyez des notifications par e-mail personnalisables aux administrateurs et des réponses automatiques aux utilisateurs.

Webhooks et intégrations

Connectez-vous à Zapier, Make ou tout endpoint webhook. Intégrez avec Mailchimp et GetResponse.

Protection anti-spam

Prise en charge intégrée de Google reCAPTCHA et CAPTCHA mathématique pour prévenir les soumissions de spam.

Exporter les soumissions

Exportez les soumissions de formulaire au format CSV ou Excel pour analyse et rapports.

Intégrer partout

Utilisez des shortcodes ou intégrez des formulaires via iframe sur des sites externes avec un style complet.

Aperçu en direct

Prévisualisez votre formulaire en temps réel pendant la création. Voyez exactement comment il apparaîtra sur ordinateur, tablette et mobile.

Guide de démarrage rapide

  1. Naviguer vers Panneau d'administration > BB Form Builder > Formulaires
  2. Cliquez sur "Créer" pour construire un nouveau formulaire
  3. Faites glisser les champs du panneau gauche vers le canevas
  4. Configurer les paramètres du champ (libellé, placeholder, validation)
  5. Configurer les actions (notifications e-mail, webhooks, etc.)
  6. Enregistrer et intégrer via shortcode ou iframe

Actions disponibles

Notifications par e-mail
Stockage en base de données
API / Webhooks
Mailchimp
GetResponse
Plus à venir...

Formulaires popup

Afficher les formulaires dans des popups modaux avec diverses options de déclenchement

Clic sur bouton

Le formulaire s'ouvre lorsque l'utilisateur clique sur un bouton. Idéal pour les formulaires de contact, inscriptions et actions à la demande.

Délai temporel

Cliquez pour prévisualiser (déclenchement auto désactivé pour la démo)

Le formulaire apparaît automatiquement après un temps défini (5 secondes). Parfait pour les inscriptions à la newsletter.

Pourcentage de défilement

Cliquez pour prévisualiser (déclenchement auto désactivé pour la démo)

Le formulaire apparaît lorsque l'utilisateur défile au-delà de 50% de la page. Idéal pour les formulaires de feedback.

Intention de sortie

Cliquez pour prévisualiser (déclenchement auto désactivé pour la démo)

Le formulaire apparaît lorsque l'utilisateur déplace le curseur pour quitter la page. Parfait pour capturer les visiteurs partants.

Modes d'affichage des popups

Configurez les paramètres de popup dans le constructeur de formulaires sous Paramètres → Paramètres d'affichage des popups. Choisissez parmi Clic sur bouton, Délai temporel, Pourcentage de défilement ou Intention de sortie. Chaque popup s'affiche une seule fois par session (sauf les popups déclenchés par bouton).

Styles de formulaires

Choisissez parmi 5 beaux styles de formulaires pour correspondre au design de votre site

Par défaut Propre et professionnel avec des ombres subtiles
Moderne Coins arrondis avec des arrière-plans doux
Minimal Champs sans bordure avec soulignement au focus
Gras Bordures fortes avec ombres décalées
Effet verre Effet verre dépoli avec flou

Formulaire de contact

Inscription newsletter

Commentaires clients

  • Step 1 Étape 1 sur 3
  • Step 2 Étape 2 sur 3
  • Step 3 Étape 3 sur 3

Step 1

Step 2

Step 3

Candidature

  • Step 1 Étape 1 sur 3
  • Step 2 Étape 2 sur 3
  • Step 3 Étape 3 sur 3

Step 1

Step 2

Step 3

Choisir un fichier ou glisser-déposer ici

Vous pouvez télécharger les types de fichiers suivants : .pdf,.doc,.docx et la taille maximale du fichier est 2MB.

Inscription événement

  • Step 1
  • Step 2

Voyez-le en action

Découvrez la puissance et la simplicité de notre constructeur de formulaires.

Constructeur intuitif glisser-déposer

Constructeur intuitif glisser-déposer

Gestion fluide des soumissions

Gestion fluide des soumissions

Guide d'installation

Démarrez en quelques minutes avec notre processus d'installation simple.

Prérequis

  • Botble CMS
    Version 7.5.0 ou supérieure
  • PHP
    Version 8.2 ou supérieure
  • Licence
    Code d'achat valide de CodeCanyon

Étapes d'installation

1

Télécharger le plugin

Téléchargez le fichier ZIP du plugin depuis votre Téléchargements CodeCanyon page.

2

Extraire le fichier ZIP

Extrayez le fichier ZIP téléchargé sur votre ordinateur local.

3

Téléverser sur le serveur

Téléversez le dossier extrait sur votre serveur à :

platform/plugins/bb-form-builder
4

Activer le plugin

Aller à Panneau d'administration → Plugins et cliquez sur le Activer bouton.

5

Entrer la clé de licence

Naviguer vers Panneau d'administration → Paramètres → Général et entrez votre code d'achat pour activer la licence.

Commencez à créer des formulaires !

Accès BB Form Builder depuis le menu latéral d'administration et créez votre premier formulaire.

Conseil pro

Après l'installation, consultez la documentation pour des guides détaillés sur la création de formulaires, la configuration des notifications par e-mail et l'intégration avec des services tiers.

Intégrer des formulaires sur n'importe quel site

Intégrer via iframe

Intégrez facilement vos formulaires sur n'importe quel site externe avec un iframe. Choisissez l'un des formats d'URL ci-dessous:

URL conviviale

URL lisible utilisant le code du formulaire

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

Utilise un hash pour une meilleure sécurité (recommandé pour les formulaires sensibles)

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

Intégrer via JavaScript

Pour plus de contrôle et une meilleure réactivité, utilisez notre code JavaScript d'intégration :

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

Conseil pro

Remplacez your-form-code par votre code de formulaire réel (ex : contact-form, newsletter). Vous pouvez trouver le code du formulaire dans le panneau d'administration sous Formulaires > Modifier le formulaire.
Vous pouvez trouver les deux formats d'URL dans l'onglet Paramètres de votre formulaire sous "Code d'intégration".

Démo d'intégration en direct

Aperçu

Non chargé

Cliquez sur "Charger le formulaire" pour prévisualiser le formulaire intégré

Code d'intégration

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

Comment utiliser

Utilisation du shortcode

Utilisez le shortcode suivant pour intégrer des formulaires dans vos pages :

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

Formulaires de démonstration disponibles

  • contact-form - Formulaire de contact simple
  • customer-feedback - Sondage multi-étapes avec notation par étoiles
  • job-application - Formulaire multi-étapes avec téléchargement de fichier
  • newsletter - Inscription à la newsletter
  • event-registration - Inscription à un événement avec plusieurs champs

Prêt à commencer?

Créez des formulaires professionnels en quelques minutes

Transformez votre site web avec des formulaires puissants et beaux. Créez des formulaires de contact, sondages, inscriptions et plus avec notre constructeur intuitif.

15+
Types de champs
5+
Intégrations
100%
Responsive
24/7
Support
Acheter maintenant
Cette page est uniquement à des fins de démonstration, elle n'est pas incluse dans le package de téléchargement. Nous vendons uniquement le plugin BB Form Builder.
Buy Now on Envato