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 a website page so visitors can submit information without leaving the page. Use Form Blocks for contact inquiries, signups, order details, questionnaires, applications, registrations, and other information you want to collect from website visitors.
You can start with a Blank or Predesigned Form Block, select an existing form, edit a form, or create a new form directly from the Website Builder. This guide explains how to add a Form Block and customize its form, image, layout, spacing, colors, background, fonts, and button animation. You will also learn how to manage the block, rename it for anchor links, and use it with DuoBuild.
This guide covers Form Blocks on website pages. To display a form in 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 to open the Website Builder.
STEP TWO
Click the website page where you want to display your form. You can add a Form Block to any page you have set up in your Website Builder.
STEP THREE
Click FORM BLOCK to view the available designs. Select BLANK or a Predesigned Form Block, then click SELECT on the design you want to add.
A Blank Form Block starts with your website's global design settings. A Predesigned Form Block starts with custom styling based on the design you select. You can customize either option after adding it.
FINAL STEP
If you added a Blank Form Block, click CLICK TO ADD A FORM, then click EDIT FORM to open its settings.
For an existing Form Block, click inside the block to open the EDIT FORM panel 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.
Your selected form now appears on the website page using the Form Block's current design settings. Saved Website Builder changes take effect on your website without a separate publishing step.
Open the page on your website to review the form and test a submission.
Blank and Predesigned Form Blocks
The Form Block gives you two starting points:
- Blank: Uses your website's global fonts, colors, spacing, and other applicable design settings.
- Predesigned: Uses custom styling from the selected design. You can still change its layout, colors, fonts, background, and other settings.
Predesigned choices include Form 1, Form 2, Form 3, Form 4, Form 5, Form 6, and Form 7.
These starting designs are separate from the 15 layouts available under LAYOUT after you add the block.
Global Design Settings and Block Customizations
Your website's global DESIGN settings provide the default styling for a Blank Form Block. Predesigned Form Blocks start with their own custom styling.
When you customize a setting inside a Form Block, that setting overrides the corresponding global setting for that individual block. This applies to available spacing, colors, background, fonts, and button hover animation.
Other blocks keep their own settings.
Block customizations remain in place when you change your template or update global design settings. If a Form Block does not match a recent global design change, check the block for customized settings.
Common Ways to Use the Form Block
Use a Form Block wherever you want visitors to submit information directly from a website page.
Common uses include:
- Contact forms for giving visitors a way to contact your business.
- Inquiry forms for collecting information from prospective clients.
- Signup forms for collecting names, email addresses, and other contact information.
- Order forms for collecting order details or product requests.
- Questionnaires for gathering information before an appointment, event, session, or service.
- Applications and registrations for collecting information from people applying or signing up for something you offer.
Build and manage the form in your Forms Dashboard, then display it on the appropriate website page using a Form Block.
Form
The FORM section controls which form appears in the block. You can display one form per Form Block.
Under CHOOSE A FORM, select the form category in the first dropdown menu. Select your form in the second dropdown menu, then click SAVE CHANGES.
You can also click:
- EDIT FORM to open the selected form and update it.
- CREATE FORM to create a new form to use in the block.
The Form Block controls the form's placement and appearance on your website. Manage its fields, submission settings, and notifications through the Forms Dashboard.
See What Are All the Different Form Fields I Can Use on My Forms? to learn more about the fields you can add to a Zibster form.
See How Do I Create a New Form for complete instructions.
IMAGE
Layouts that support images allow you to add a visual element alongside or behind your form. Click IMAGE to access the image options.
You can upload an image, insert an image from the clipboard, or choose a Stock Image. After adding an image, you can adjust its focal point and add alt text. The focal point option does not apply to Stock Images.
Use alt text to describe an image that provides meaningful information to visitors. You can also use ASK ZIBSTER AI to analyze the image and generate alt text. Each use counts as 1 AI request toward the 100 monthly AI requests included with your membership.
Click SAVE CHANGES after making your updates.
The image added under IMAGE is separate from an image added under BACKGROUND. Your selected layout determines how the accompanying image is arranged with the form.
Form Block Layout Options
Click LAYOUT to view your selection under CURRENT LAYOUT and compare the available layouts. The sample images show how each layout arranges the form and any accompanying image.
The Form Block offers 15 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.
- Overlay Box Left: Displays the form inside a shaded box over the left portion of the image.
- Overlay Box Right: Displays the form inside a shaded box over the right portion of the image.
- Image Overlay Left: Displays the image on the left, overlapping the edge of the panel containing the form.
- Image Overlay Right: Displays the image on the right, overlapping the edge of the panel containing the form.
- Image Overlay Top: Displays the image above the form, overlapping the top edge of the form's background panel.
- Image Border Text Bottom: Displays the image above the form, with a surrounding background panel framing both.
- Single Form Overlay: Displays the form without an image on an inset panel within a larger background area.
- Single Form Border: Displays the form without an image inside a bordered panel.
- Single Form Contemporary: Displays the form without an image inside an inset bordered panel with space around the form.
Click SAVE below the layout you want to use. The block will use the selected layout with your existing form.
Review your page on desktop and mobile to check the image placement, form fields, and submit button.
See How to Change the Layout of the Form Block for a complete walkthrough.
Styling Options
Click STYLING to adjust overlay opacity and spacing for the individual Form Block. Available settings depend on the layout you selected. A Blank Form Block follows your website's global spacing settings by default.
Available options include:
-
OVERLAY OPACITY: Controls how transparent or solid the overlay appears. 0% is fully transparent, and 100% is fully solid. This setting is available for layouts that support an overlay.
-
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.
Click SAVE CHANGES to apply your settings.
See How To Adjust Spacing and Padding for more information about global styling.
COLORS
Click COLORS to customize the individual Form Block's colors. A Blank Form Block follows your website's global colors by default.
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 the color setting you want to change or enter a HEX color code. A HEX code identifies a specific color.
A CUSTOMIZED flag identifies a setting that overrides the corresponding global setting for the individual block.
Click SAVE CHANGES to apply your updates. Make sure your form text, fields, and submit button are easy to read against the selected colors.
BACKGROUND
Click BACKGROUND to add a background image behind your Form Block. Choose an image from the BACKGROUND LIBRARY or upload your own.
Available 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 settings.
FONTS
Click FONTS to customize the Form Block's title, general text, form field text, and button text. These settings apply to the individual block.
A Blank Form Block starts with your global fonts.
To change a font face, click its preview or pencil icon to open the font bank. MY FONTS shows fonts selected in your global DESIGN settings. Browse the available fonts and click SAVE for your selection.
To adjust FONT SIZE, LETTER SPACING, or LINE HEIGHT, click the properties area or its pencil icon. Adjust the sliders, review the preview, then click SAVE CHANGES.
A CUSTOMIZED flag identifies a font property override. Click its X to return that property to the global value.
To choose a font face that matches your website design, open the font bank, click MY FONTS, and save your selection.
Form Blocks do not have separate desktop and mobile font settings. Review your form on both screen sizes after making changes.
See How to Change Fonts on a Form Block for the complete workflow. For site-wide changes, see How to Customize Fonts on Your Zibster Website.
ANIMATIONS
Click ANIMATION to customize the hover animation for the form's submit button.
Available options include:
- None
- Scale
- Blur
- Scale Blur
- Bounce
Select your preferred animation and click SAVE CHANGES.
This setting overrides the global button hover animation for the individual Form Block.
Block load animation is a separate global setting that controls how blocks appear as visitors view and scroll through your website. It cannot be customized for an individual Form Block.
See How to Change Block Load Animations for more information.
Move, Copy, Rename, Change Layout, Advanced, or Delete a Form Block
Click the pencil icon in the upper-right corner of the Form Block to open its management menu.
The available options are:
- COPY: Creates a duplicate of the Form Block and places the copy directly below the original in the page editor. Copying the block does not create a new underlying form.
- MOVE: Moves the Form Block to another location on the current page or to another website page. See How To Use Move for complete instructions.
- RENAME: Changes the internal name of the Form Block. This is useful for organizing blocks and identifying them when creating anchor links.
- CHANGE LAYOUT: Opens the Form Block layout options so you can select a different layout.
- ADVANCED: Opens the Form Block editing panel, where you can choose which form appears in the block, edit the selected form, or create a new form.
- DELETE: Removes the Form Block from the website page.
Deleting the Form Block does not delete the underlying form from your Zibster account. The form remains available in the Forms Dashboard and can be added to another Form Block later.
If you copy a Form Block and both blocks display the same underlying form, changes to that form's fields and submission settings will appear anywhere that form is used. The display blocks can still use different layouts and design settings.
You can also drag the Form Block to another position on the page.
Rename a Form Block for Anchor Links
Click the Form Block's pencil icon, then click RENAME. Enter a descriptive BLOCK NAME, such as Contact Form or Wedding Inquiry, and click SAVE CHANGES.
The block name is an internal Website Builder label. It does not change the title or other content visitors see on your website.
When you select a destination page for an anchor link, the custom block name appears in parentheses under CHOOSE A BLOCK, helping you identify the correct section.
You can link directly to the Form Block from the same page or another page on your website.
See How to Rename Blocks and Create Anchor Links for the full instructions.
Using the Form Block with DuoBuild
DuoBuild automatically places two supported blocks side by side when you position them together.
You can pair a Form Block with a Text Editor Block, Text + Image Block, Images Block, List Block, Banner Block, Video Block, Form Block, Button Block, or HTML Block.
Drag one supported block horizontally over the other until the placement indicator appears, then release it. The blocks snap into two equal-width columns. Each block keeps its own content and design settings.
DuoBuild arranges two separate blocks. The Form Block's LAYOUT setting arranges the form and accompanying image inside that individual block.
On smaller screens, DuoBuild blocks stack vertically, with the left block appearing first. Review your form on mobile to confirm its readability and stacking order.
See How to Use DuoBuild in the Zibster Website Builder for complete instructions.
What Happens When Someone Submits a Form?
Visitors see your selected form directly on the website page, styled with the Form Block's layout, fonts, colors, image, and other design settings. They can complete the fields and submit the form without leaving the page.
What happens after submission depends on the form's settings. You can display a confirmation message, redirect the visitor to another page, and/or send an automatic reply email.
An automatic reply is an email sent to the person who submitted the form. It is separate from the submission notification sent to you.
See How to Add an Automatic Reply to Form Submissions and How to Set Up a Custom Confirmation Page for Forms and Contracts for setup instructions.
Where Submissions and Notifications Are Managed
Every Zibster form requires an Email field. Submitted information is captured and stored in the CONTACTS section of your Zibster account, giving you a central place to manage customer and lead information.
By default, form submission notifications are sent to your account's primary login email address. Manage notification recipients and other submission settings through the Forms Dashboard.
The Form Block controls where the form appears and how it looks. Its design settings do not control submission notifications, confirmation behavior, or automatic replies.
Using a Form Block for Email Signups
A Form Block is a convenient way to display a newsletter or email signup form on your website. Visitors submit their information directly from the page, and their information is stored in your Contacts.
Use wording that clearly explains what visitors are signing up to receive. An inquiry form should not be presented as automatic newsletter enrollment.
Review your form and email opt-in settings before using collected contacts for marketing campaigns.
Learn more about creating a Zibster Email Marketing Campaign.
Troubleshooting and FAQs
Why is my form not showing?
Open the Form Block's FORM settings. Confirm that you selected the correct category and form under CHOOSE A FORM, then click SAVE CHANGES.
If you have not created the form yet, click CREATE FORM.
Why did my Form Block not change when I updated my website fonts or colors?
Check the block for custom settings. Block-level overrides take precedence over global design settings.
Predesigned Form Blocks also start with custom styling.
Where do I change form fields or submission notifications?
Click EDIT FORM or open the selected form through the Forms Dashboard.
The Form Block's design settings control how the form appears on the website. Fields, submission settings, and notifications are managed through the form itself.
See What Are All the Different Form Fields I Can Use on My Forms? for more information about available form fields.
Why does my accompanying image not appear?
Check LAYOUT.
Single Form, Single Form Overlay, Single Form Border, and Single Form Contemporary display the form without an accompanying image.
Choose a layout that supports an image and review the image selected under IMAGE.
Will deleting the Form Block delete my form?
No. Deleting the Form Block removes it from that website page. The underlying form remains in your Zibster account and can be used again.
What happens when I copy a Form Block?
The copied Form Block is placed directly below the original in the page editor.
Copying a Form Block does not create a separate underlying form. If both blocks display the same form, changes to that form's fields and submission settings will appear in both locations.
Each Form Block can still have its own layout and design settings.
Why did editing one form change it on another page?
Both Form Blocks may be displaying the same underlying form.
Form Block layouts and styling are separate, but changes to the underlying form apply everywhere that form is displayed.
Create a separate form when you need different fields or submission settings.
How do I change what happens after someone submits my form?
Open the form's settings through EDIT FORM or the Forms Dashboard.
Configure the confirmation message, redirect, and automatic reply there. These settings are separate from the Form Block's layout and design settings.
How can I help reduce spam form submissions?
Zibster forms can use Google reCAPTCHA as an additional spam protection measure. reCAPTCHA is optional and can be turned on or off in your Zibster account.
See How to Turn Google reCAPTCHA On or Off for Zibster Forms for instructions.
Want Help With Your Website?
If you would like help building or updating your Zibster website, our Custom Website Service can help you create and organize your website using the tools available in your Zibster account.
Learn more about Zibster Custom Website Design.
Need Help?
Zibster Support Hours: Monday–Friday, 9am–6pm EST
Phone: 844.353.3412
Channels: Phone, Live Chat, Support Ticket
