Wix stands out as a highly popular and user-friendly website building platform—and with Donorbox, adding a customized Contact Collection Form to your site is straightforward!
This is an ideal option if you prefer to have your Contact Collection Form completely visible on your Wix webpage.
This guide provides a step-by-step walkthrough for embedding a Donorbox Contact Collection Form directly on your Wix site so visitors can submit their information without leaving your website.
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 Wix
Open your Wix site editor. Choose an existing page or create a new one where you intend to place the form.
To generate a new page, head over to the "Site Menu" options and select the "Add Page" button, as shown in the highlight.
7.1 To add a new page, click "+ Blank Page" or choose one of the Wix templates.
7.2 Within the page editor interface, press the "+ Add Elements" button on the left-hand menu.
7.3 From there, pick the "Embed Code" feature.
7.4 To open the "Settings" for the new element box, click the "gear" icon (1) or double-click inside the HTML Element box (2).
7.5 Next, choose "Code" from the "Choose what to embed" drop-down menu. Then, paste the embed code previously obtained from Donorbox into the field labeled "Enter HTML embed code".
Once pasted, click the "Apply" button.
7.6 After the contact collection form loads on the screen, resize and stretch the element box to verify that your form displays entirely without cutoff.
Step 8 - Test the form on your live site
Finally, click "Publish" to make your updated page live!