How to Use the Form Block in the Zibster Website Builder
Overview
The Form Block in the Zibster Website Builder allows you to display a form directly on any page of your website. You can use a Form Block to collect customer information, create signup or inquiry forms, accept order details, build questionnaires, collect applications, and more.
You can start with a Blank Form Block that follows your website's global design settings or choose a Predesigned Form Block with its own custom styling. You can select an existing form, edit a form, or create a new form directly from the Website Builder.
Information submitted through Zibster Forms is captured and stored in the Contacts section of your account. This guide walks you through adding a Form Block to a website page and customizing its form, image, layout, spacing, colors, background, fonts, and animations.
Note: This guide covers the Form Block available on pages in the Zibster Website Builder. If you want to add a Basic Form to your website footer, see How To Use Basic Forms In The Footer.
STEP ONE
Log in to your Zibster account and click WEBSITE in the left-side menu.
This opens the Zibster Website Builder, where you can manage your website pages and content.
STEP TWO
Click the website page where you want to display your form.
You can add a Form Block to any page in the Zibster Website Builder.
STEP THREE
Add a FORM BLOCK to your page and choose the design you want to use.
You can start with Blank or select one of the available Predesigned Form Blocks:
- Form 1
- Form 2
- Form 3
- Form 4
- Form 5
- Form 6
- Form 7
Click SELECT on the option you want to add.
A Blank Form Block starts with your website's global design settings. Predesigned Form Blocks include custom styling based on the design you select.
FINAL STEP
The EDIT FORM panel will open on the right side of the Website Builder.
Under CHOOSE A FORM, select the category where your form is located, then select the form you want to display.
Click SAVE CHANGES to add the form to the page.
Once saved, the selected form will display inside the Form Block using the block's current design settings.
Blank and Predesigned Form Blocks
The Form Block gives you two ways to start your design:
- Blank: Starts with your website's global design settings so the block follows the fonts, colors, spacing, and overall styling of your website.
- Predesigned: Starts with custom styling based on the selected Form Block design. You can still customize the layout, colors, fonts, background, and other settings after adding it.
Predesigned Form Blocks are useful when you want a ready-made design that you can customize to match the rest of your website.
Common Ways to Use the Form Block
You can use the Form Block anywhere you want website visitors to submit information.
Common uses include:
- Contact forms: Give visitors a way to contact your business.
- Inquiry forms: Collect information from prospective customers before following up.
- Signup forms: Collect names, email addresses, and other customer information.
- Order forms: Collect order details, product requests, or other information from customers.
- Questionnaires: Gather information before an appointment, session, event, or service.
- Applications and registrations: Collect information from people applying or registering for something you offer.
- Surveys: Gather feedback from your customers or website visitors.
- Lead capture forms: Collect contact information from potential customers for future follow-up or marketing.
You can build the form you need in the Zibster Form & Contract Builder and then use the Form Block to display it on the appropriate website page.
Form
The EDIT FORM panel controls which form is displayed inside the Form Block. You can display one form per Form Block.
Use the first dropdown menu under CHOOSE A FORM to select the form category. After selecting a category, use the second dropdown menu to select the form you want to display.
Click SAVE CHANGES to apply your selection.
You can also use:
- EDIT FORM: Opens the selected form so you can make changes to its fields, content, and settings.
- CREATE FORM: Creates a new form that you can use with the Form Block.
The Form Block controls where the form appears and how it is styled on your website. The form itself, including its fields and submission settings, is managed through the Zibster Form & Contract Builder.
For complete instructions on building a form, see How Do I Create a New Form?
IMAGE
Form Block layouts that support images allow you to add a visual element alongside or behind your form.
You can:
- Upload an image
- Insert an image from the clipboard
- Choose a Stock Image
After adding an image, you can:
- Adjust the image focal point. This option does not apply to Stock Images.
- Add alt text to describe the image.
You can write alt text manually or click ASK ZIBSTER AI to analyze the image and generate alt text for you.
Each time you use ASK ZIBSTER AI to generate alt text, it counts as 1 AI request toward your monthly total. Zibster Website Packages include 100 AI requests each month.
Use descriptive alt text when an image provides meaningful information to visitors. Alt text can improve accessibility and help search engines understand the content of your images.
Click SAVE CHANGES after making your updates.
Form Block Layout Options
The LAYOUT section shows the Form Block's current layout and the other layouts available to use.
You can choose from six layouts:
- Single Form: Displays the form without an image.
- Form Overlay Left: Displays the form over the left portion of the image.
- Form Overlay Right: Displays the form over the right portion of the image.
- Form Overlay Bottom: Displays the form over the bottom portion of the image.
- Form Left: Displays the form to the left of the image without overlapping it.
- Form Right: Displays the form to the right of the image without overlapping it.
Click SAVE below the layout you want to use.
Styling Options
A Blank Form Block follows your website's global spacing settings by default. You can override these settings for an individual Form Block when needed.
Available options include:
- Space Below Blocks: Adjusts the space between the Form Block and the next block.
- Space Inside Blocks: Adjusts the space at the top and bottom inside the Form Block.
Predesigned Form Blocks may already include customized spacing settings based on the design you selected.
Click SAVE CHANGES to apply your spacing settings.
Learn more about adjusting spacing and padding in the Zibster Website Builder
COLORS
A Blank Form Block follows your website's global colors by default. You can customize the colors for an individual Form Block to override those global settings.
Available color options include:
- Title Color
- Form Field Color
- Form Field Text Color
- Text Color
- Button Text Color
- Button Background Color
- Button Overlay Color
- Button Contrast Color
- Background Color
- Overlay Color
Click a color square or enter a HEX color code to make a change.
A Customized Flag appears next to a setting that has been customized for the individual Form Block.
Click SAVE CHANGES to apply your updates.
BACKGROUND
You can add a background image behind your Form Block.
Choose an image from the BACKGROUND LIBRARY or upload your own image.
Available background display options include:
- Tile: Repeats the image across the background.
- Top Left: Positions the image in the top-left corner.
- Centered: Centers the image within the background area.
- Cover: Scales the image to cover the available background area.
Click SAVE CHANGES to apply your background settings.
FONTS
A Blank Form Block uses your website's global fonts by default.
Use the FONTS section to customize typography specifically for an individual Form Block.
Available font settings include:
- Title Font
- Text Font
- Form Field Text
- Button Text
- Font size
- Letter spacing
- Line height
Changes made in this section override the corresponding global font settings for that Form Block.
Click SAVE CHANGES to apply your font updates.
ANIMATIONS
You can customize the hover animation used by the form's submit button.
Available options include:
- None
- Scale
- Blur
- Scale Blur
- Bounce
Choose your preferred animation and click SAVE CHANGES.
This setting overrides the global button hover animation for the individual Form Block.
What Happens When Someone Submits a Form?
When someone submits a form on your Zibster website, the submission is saved inside your Zibster account and the contact information collected through the form is stored in Contacts.
Zibster also sends a form submission notification by email.
By default, form submission notifications are sent to the email address you use to log in to your Zibster account. You can configure an individual form to send notifications to a different email address or multiple email addresses through the form's settings.
The Form Block controls where the form appears and how it is styled. Submission notifications, thank-you messages, confirmation settings, and other form behavior are managed separately through the Zibster Form & Contract Builder.
Using a Form Block for Email Signups
A Form Block is a convenient way to add an email or newsletter signup form to a page on your website.
Visitors can submit their contact information directly from the page, and information collected through Zibster Forms is stored in your Contacts.
You can then use your contacts, tags, and lists with Zibster Marketing to communicate with leads and customers through email marketing campaigns.
See How To Use Zibster Email Marketing to learn more about creating and sending email campaigns.
Additional Options and Helpful Notes
You can add more than one Form Block to a website page if you need to display multiple forms. Each individual Form Block displays one selected form.
If you need to change the questions or fields displayed in your form, click EDIT FORM or open the form through FORMS in the left-side menu. Changing the Form Block's design settings does not change the fields contained in the form.
If you choose a Predesigned Form Block, review its colors, fonts, spacing, and background after adding it. Predesigned blocks may contain customized settings that override your website's global design settings.
If you want your Form Block to match the rest of your website's global styling as closely as possible, starting with Blank is usually the simplest option.
Troubleshooting and FAQs
Can I display more than one form in a Form Block?
No. Each Form Block displays one selected form. If you need to display multiple forms on the same page, add another Form Block.
Can I create a new form without leaving the Website Builder?
Yes. Click CREATE FORM in the Form Block settings to create a new form.
Where do I change the fields in my form?
The fields themselves are managed through the Zibster Form & Contract Builder. Click EDIT FORM from the Form Block or click FORMS in the left-side menu and open the form you want to update.
Where are form submissions stored?
Form submissions and the customer information collected through them are available through your Zibster account. Contact information collected through Forms is stored in Contacts, and form submission activity can also be reviewed through your account notifications.
Where are form submission notifications sent?
By default, notifications are sent to the email address used to log in to your Zibster account. You can change the notification email address or add multiple addresses through the individual form's settings.
Why doesn't my Form Block match the rest of my website?
Predesigned Form Blocks can contain customized colors, fonts, spacing, backgrounds, and other design settings. These settings override your global Website Builder design settings.
Review each section of the Form Block settings for a Customized Flag or other customized options if you want the block to more closely match your website's global design.
Want Help With Your Website?
If you would like help building or updating your Zibster website, our We Build It For You service can help you create and organize your website using the tools available in your Zibster account.
Learn more about Zibster We Build It For You Service.
Need Help?
Zibster Support Hours: Monday–Friday, 9am–6pm EST
Phone: 844.353.3412
Channels: Phone, Live Chat, Support Ticket
