To simplify embedding contact collection forms into your blog or website, we have teamed up with Weebly, a leading drag-and-drop website builder.
This step-by-step guide walks you through the process of seamlessly adding a Donorbox Contact Collection Form directly onto your Weebly site, allowing donors to submit their details without ever leaving your webpage.
Step 1 - Create a new Contact Collection Form
From your Donorbox dashboard, open the Engage section on the left-hand rail and select "Forms." Then click "+ New Form."
Step 2 - Complete the form settings
On the Settings screen, add the basic information for your form:
- Form Name - Enter a name that will help your team identify the form. This name is only visible internally.
- Description - Add an optional internal description.
- Form Language - Choose the language for the form.
- Dynamic List - Choose whether Donorbox should create a dynamic List of contacts captured through this form.
- Double Opt-In - If enabled, supporters must confirm their email subscription before they become active email subscribers.
Click "Next" when you are ready to continue.
Step 3 - Choose the form content and information to collect
Add the content visitors will see on the form. You can enter an optional title and body message that explain why someone should stay connected with your organization.
Click "Next” to continue.
Next, choose the supporter information you want to collect. Full name and email are included by default. You can also collect a phone number and mailing address, and you can make the optional fields required if needed.
Click "Next” to continue.
Step 4 - Customize the appearance and confirmation message
On the Appearance step, customize the form’s submit button and the message supporters see after they submit the form. You can change the button text and color, then add an optional post-submission title and message.
Click “Next” when you are finished.
Step 5 - Preview and save the form
Review the form preview to make sure the content, fields, consent language, and button look the way you expect. When everything looks right, click "Save."
Step 6 - Copy the embed code
Open the Contact Collection Form you created and locate the "Embedded Form" section. Scroll below the form preview to the "Embed Code" area, then click "Copy Code."
Step 7 - Add the code to Weebly
Open your Weebly site editor and choose the page where you wish to embed the contact collection form.
7.1 Find the "Embed Code" option on the left-side menu, then drag and drop it onto the area of the page where you want your donation form or button to be displayed.
7.2 On the page, click the embed element you just placed where it reads "Click to set custom HTML".
Step 8 - Test the form on your live site
Choose the “Edit Custom HTML” button and paste the embed code previously obtained from Donorbox into the box.
Afterward, click anywhere outside of the box, and your Donorbox form will appear on your web page as shown below:
And you're done! As soon as you publish your website, you will be completely ready to use your new Contact Collection Form.