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 and click on the WEBSITE option 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:
1. On the right-hand side of your screen, click the form icon. The form block will appear at the very bottom of your page.
2. 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 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 choose Advanced. A menu will open on the right side of your control panel, allowing you to choose a form.
Select the category the form is in, then select the form and click Save Changes.
STYLING OPTIONS FOR YOUR FORM BLOCK
IMAGE
You can add a visual element to your form block by including an image. Upload a new image, insert an image from the clipboard, or use an image from the Stock Image library.
Adjust the focal point of the image and add alt text if needed. Click Save Changes to finalize your selections.
Form Overlay Options:
- Form Overlay Left
- Form Overlay Right
- Form Overlay Bottom
- Form Left
- Form Right
FORM BLOCK LAYOUT OPTIONS
Choose from 6 different form block layouts to display your form:
- Single Form: Only your form will display (without an image).
- Form Overlay Left: The form will overlap the left portion of the image.
- Form Overlay Right: The form will overlap the right portion of the image.
- Form Overlay Bottom: The form will overlap the bottom portion of the image.
- Form Left: The form will appear to the left of your image without an overlap.
- Form Right: The form will appear to the right of your image without an overlap.
STYLING OPTIONS
The form styling section lets you control how your forms are displayed within the selected layout. This section uses the global styling and spacing settings of your website by default. You can override these settings for your form block:
- Space Below Blocks: Controls the amount of space before the next block begins.
- Space Inside Blocks: Controls the amount of space at the top and bottom of a block.
COLORS
The form color section includes 7 color options. These colors override the global color settings under the DESIGN tab. Customize the color for the following sections:
- Title Color
- Form Field Color
- Form Field Text Color
- Text Color
- Button Text Color
- Button Background Color
- Background Color
- Overlay Color
The customized flag will appear next to any color you've selected to override the global color picker. Click Save Changes to apply your updates.
BACKGROUND
Add a background image to your form block. Upload a custom background image or choose one from the Background Library. Customize how the background image is displayed under Background Settings:
- Tile: Will tile your image to fill the background.
- Top Left: Will align your image to the top left.
- Centered: Will align your image at the center of the available space.
- Cover: Will scale your image to be as large as possible to completely cover the background.
Click Save Changes to apply your background settings.
FONTS
Click on the Fonts option in the right-side menu.
Customize the fonts for your form blocks to override your global font settings. Change the font, font size, letter spacing (kerning), and line height for the following items:
- Title
- Text
- Form Field Text
- Button Text
Click Save Changes at the bottom of the control panel menu to apply your changes.
PRO TIP!
Use your Form block to collect leads and build out your lists for your Zibster Marketing email newsletter!
0 Comments