The Zibster Form and Contract Builder is a feature within the Zibster platform designed to help users create and manage custom forms and contracts for their websites. This tool allows businesses to gather information, engage with clients, and streamline administrative processes efficiently. This guide will walk you through how to add a form to a page in your website using the Form Block.
STEP ONE
Log into your Zibster account, hover over the left side menu, click on WEBSITE in the left side menu.
STEP TWO
Click on the page name or add a new page where you want to use a Form block.
There are two ways to add a Form block to your page:
- On the right-hand side of your screen, click the Form icon. The Form block will appear at the very bottom of your page.
- Hover your mouse over the Form icon, left-click and hold, then drag the block to your preferred location. When a teal-colored line appears where you want the block, release the mouse button to drop it in that location. To move it, simply drag it up or down.
STEP THREE
To add a form to your Form block:
- Click inside the block or on the pencil icon at the top right, then select Advanced in the menu that appears.
- Under the Form section, select the category where your form is located.
- Choose the form you want to display.
- Click Save Changes to apply your selection.
STYLING OPTIONS FOR YOUR FORM BLOCK
IMAGE
If you want to add a visual element to your Form block, you can:
✅ Upload an image
✅ Insert one from the clipboard
✅ Use a Stock Image
You can also adjust the focal point and add alt text for accessibility. Click Save Changes when you're done.
FORM BLOCK LAYOUT OPTIONS
Choose from six different Form block layouts:
- Single Form – Only your form will display (no image).
- Form Overlay Left – The form overlaps the left portion of the image.
- Form Overlay Right – The form overlaps the right portion of the image.
- Form Overlay Bottom – The form overlaps the bottom portion of the image.
- Form Left – The form appears to the left of the image without overlap.
- Form Right – The form appears to the right of the image without overlap.
Click your preferred layout and then Save Changes to apply it.
STYLING OPTIONS
By default, your Form block will use the global styling settings from your website. However, you can override these settings within this section:
✅ Space Below Blocks – Adjusts the space before the next block.
✅ Space Inside Blocks – Adjusts the space at the top and bottom of the block.
Click the space options you prefer and Save Changes to apply them.
COLORS
Customize the colors of your Form block by clicking the color square or entering a HEX code. This will override the global color picker settings under the DESIGN tab.
You can change:
- 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
A Customized Flag will appear next to any color override.
Click Save Changes to apply your updates.
BACKGROUND
You can add a background image behind your Form block by choosing one from the Background Library or uploading a custom image. Adjust its display settings with one of these options:
- Tile – Repeats the image across the background.
- Top Left – Aligns the image to the top-left corner.
- Centered – Centers the image in the background space.
- Cover – Scales the image to fully cover the background.
Click Save Changes to apply your background settings.
FONTS
Click on the Fonts option in the right-side menu to customize fonts specifically for this Form block. You can adjust font type, font size, letter spacing (kerning), and line height for the following:
- Title font
- Text font
- Form field text
- Button text
Click Save Changes to apply your font updates.
ANIMATIONS
You can set a hover animation for the Form Submit button to override your global button hover settings. Choose from:
- None
- Scale
- Blur
- Scale Blur
- Bounce
Select your preferred button hover animation and click Save Changes to apply it.
PRO TIP!
Use your Form block to collect leads and build out your lists for your Zibster Marketing email newsletter!
Leave a comment
0 Comments