Learn how to create a form library with multiple pre-built forms that users can select and drag into their Beefree SDK email designs through a modal interface.
Why Create a Form Library?
Instead of limiting users to a single default form, a form library provides the best of both worlds. Users can choose from a curated collection of pre-built, industry-specific forms that are ready to use and fully customizable.
A form library is perfect when you want to:
Offer multiple form templates for different use cases (contact, survey, application, etc.)
Provide industry-specific forms (auto loans, mortgages, credit cards, etc.)
Maintain consistent branding across form types
Speed up form creation with pre-configured field validation and layouts
With Beefree SDK's contentDialog.manageForm handler, you can create a modal selection interface that integrates with Beefree SDK's editor.
Project Map: Where to Look in the Sample Project
This recipe is based on the beefree-sdk-form-block-demo GitHub project. Clone it, then explore these key files:
Note: This example includes three pre-built forms: Auto Loan Pre-Approval, Mortgage Pre-Approval, and Credit Card Application.
Data Flow Diagram
Here's how the form library integrates with Beefree SDK:
Why this flow? Beefree SDK triggers the form library through the contentDialog, and end users select a pre-built form from the list of available forms within the custom modal. The chosen structure is returned as JSON, and then integrated into the page or popup design.
Step 1: Clone and Setup
Clone the repository and install dependencies:
Create your .env file with Beefree SDK credentials:
Define multiple form structures with complete field definitions
Create modal selection interface with form options
Configure contentDialog.manageForm handler for SDK integration
Implement form selection logic with proper validation
Set default form for initial drag-and-drop experience
Style the interface for professional appearance
Test complete workflow from selection to email integration
Consider advanced features like categories, search, and analytics
Clone the example project, explore the form-library-example.html file, and customize the form library to match your specific industry needs. Your users will have quick access to professional, pre-built forms that can be easily integrated into their email campaigns.
beeConfig = {
// ... other config options
contentDialog: {
manageForm: {
label: 'Edit Form',
handler: async (resolve, reject, args) => {
// Open the form selection modal
openModal();
// Wait for user to select a form
await new Promise((res) => {
window.selectForm = (formType) => {
let formStructure;
// Switch between available forms
switch (formType) {
case 'autoLoan':
formStructure = autoLoanForm;
break;
case 'mortgage':
formStructure = mortgageForm;
break;
case 'creditCard':
formStructure = creditCardForm;
break;
default:
reject(); // Cancel if no valid form selected
return;
}
resolve(formStructure); // Return selected form
closeModal(); // Close the modal
};
});
}
}
},
defaultForm: autoLoanForm, // Set default form for initial load
// ... other handlers
};
window.selectForm = (formType) => {
let formStructure;
switch (formType) {
case 'autoLoan':
formStructure = autoLoanForm;
break;
case 'mortgage':
formStructure = mortgageForm;
break;
case 'creditCard':
formStructure = creditCardForm;
break;
default:
reject(); // Invalid selection
return;
}
resolve(formStructure); // Return the selected form structure
closeModal(); // Close the selection modal
};
