How to Design Forms in Capture Forms

This article explains how you can use the design tools in Capture Forms to customize your forms.

Step 1: Access "Capture Forms"

Start by logging into your Pabau account using your login credentials. Then, navigate to the Marketing section located on the left sidebar menu and click to expand it. The "Capture Forms" tab will be revealed. 

Step 2: Access Form Builder

To access the form builder, you can create a new form or edit an existing one. In this case let's edit an existing form by navigating to the "Forms" tab on the top left corner.

Select the "Update" option to proceed to edit your form.

Step 3: Design Your Form

Use the panel on the right-hand side to access and adjust the form’s design options.

Step 4: Use Design Tools

The main tools capture forms offers are:

• Google Fonts - Select Google fonts with live preview from a dropdown list.

• Stock Images - Add stock images to your form. 

• Web Gradient Selector - You can find the gradient selector to build your own gradient (linear, radial, choose your colors and stops and more) or choose between 100+ ready-to-use beautiful web gradients.

• Subtle Patterns - Choose between hundreds of Subtle Patterns selected to you by Toptal, beautiful textures for your forms.

Step 5: Design Components

The “Design” panel lets you customize the appearance of your form by applying styles to different parts of it. Each section corresponds to a specific form component or group of components:

• Global: Refers to the overall form container. This controls the spacing, background, and layout of the entire form area.

• Form: This is the form element itself. By default, it has no padding to ensure it fits well when embedded into external websites.

• Form Group: A group that includes the label, input field, help text, and validation message. Styling this section affects the layout and spacing of these elements together.

• Form Control: Targets the input fields (e.g. text boxes, dropdowns, etc.) where users enter information.

• Button: Refers to the submit button of the form. By default, it follows the Bootstrap primary button styling, but you can customize its appearance here.

• Label: Styles the labels next to input fields. These are typically aligned with form controls and use Bootstrap control label classes.

• Placeholder: Allows you to customize the style of the placeholder text inside input fields.

• Heading: Used to style any headings you’ve added to your form for visual hierarchy or sectioning.

• Paragraph: Styles any paragraph text you’ve added to provide context or explanations within your form.

• Help Text: Controls the appearance of helper text that provides guidance for filling out specific fields.

• Form Steps: This section appears when you’ve added a Page Break field, enabling multi-step forms. You can customize the appearance of each step indicator.

• Form Alerts: Styles the success or error messages that appear after a form is submitted.

• Field Validation: Customize how error states (such as invalid input) are displayed across your form fields.

• Other Components: Offers styling options for custom checkboxes, custom radio buttons, reCAPTCHA, signature pad, and progress bar — enhancing both function and visual appeal.

To edit the details, click on each tab to expand it. This will reveal the corresponding design options described above.

Step 6: Copy & Paste Design

If you’ve created a form before, the “Copy Design” and “Paste Design” features let you quickly transfer CSS styles from one form to another by clicking the three dots at the top right corner of the design panel. You can also reset the design back to the default styles at any time with a single click.

Step 7: Save Changes

Once you have customized your form, click the "Save Form" button located at the bottom of the page to finalize. 

After you've selected "Save Form," a modal window will appear with 4 options:

• Continue editing the form
• Go to Advanced Form Settings
• Share form
• Go to Form Manager

In this case, select the 4th option to finalize. 

By following these steps, you can design your forms to match your brand.

---