PlatoForms User Guide
Ctrl+K

  • Form Builder

    Creating an Online Form for an Existing PDF

  • Custom Domain

    With Builder you can build three types of forms: online web forms, online PDF forms, and master forms.

  • Master Form Builder

    you will arrive at the Form Builder. On the form Builder, there are three main sections:

What's new? API Docs

Design web and web PDF forms

On this page

Use Preview & Design to customize how your form looks. The same designer is used for Web Forms, Web PDF Forms and Master Forms. You can:

  • Apply a theme and preview it immediately.
  • Add a logo and customize colors, fonts, spacing, and layout.
  • Save your design as a shared team theme or update an existing one.
  • Use custom CSS or JavaScript for advanced changes.

Access the form designer

  1. Open your existing web PDF form from the Dashboard.

  2. Click the Preview & Design button in the form builder at the top left.

    Open form designer

    This opens a preview where you can adjust your form’s design.

Apply a theme

Themes let you quickly change your form’s overall appearance.

  1. In Preview & Design, click Design Form in the top-right corner.

    Design Form button in Preview and Design

  2. In the panel on the left, click Browse Themes.

    Browse Themes in the Design Form panel

  3. Choose a theme. The preview on the right updates immediately.

Save a design as a shared form theme

Save your current design as a new theme that other members of your team can use.

  1. In Preview & Design, click Design Form and customize the form.

  2. At the bottom of the panel on the left, click Share.

    Share the current form design as a team theme

  3. In the Share Theme dialog, enter a Theme Name, then click Save.

    The new shared theme appears in Browse Themes.

Update or delete a shared theme

Use the controls on a shared theme’s card to update or delete it.

  1. In Design Form, click Browse Themes.

  2. Find the shared theme and click its red edit icon.

    Update an existing shared form theme

  3. Change the Theme Name if needed, then click Save. This updates the shared theme with the form’s current design.

To delete a shared theme, click the red trash icon on its card and confirm the deletion.

Customize the form design

You can also make more customizations to the form styles. All changes are instantly previewed.

  1. In Preview & Design, click Design Form in the top-right corner.

  2. Modify the design as needed.

    Note

    Learn about available customization options in the Form design properties section.

  3. After making your desired modifications, click Save. This stores the design for the draft and the preview; the live form changes only after you click Publish in the builder.

Form design properties

Property Description
Appearance Customize the form’s visual theme:

  • System Auto: Adjusts to the user’s device settings.
  • Light Mode Only: Ensures a bright, clear look with a consistent light-colored theme.
  • Dark Mode Only: Uses a dark color scheme for reduced eye strain in low-light environments.
When System Auto is selected, use the Light and Dark buttons to preview how the form looks in different modes.
Logo Upload a PNG, JPG or WebP image (max 5 MB) to display a logo on the form.

  • Embedded Logo: Automatically resizes and integrates the logo within the form.
  • Logo Background: Customize the background color behind the logo.
  • Logo Size: If Embedded Logo is disabled, manually adjust the size. The default placement is outside the form, at the top-left corner.
  • Logo Location: Choose alignment: Left, Center, or Right.
Navigation Bar If your form has multiple pages, enabling the navigation bar adds a top menu, allowing users to switch between pages.

Note: To add pages, use Add Page in the Web Form builder, or insert a Page Break in a Web PDF Form or Master Form.
Navbar Style Once the Navigation Bar is enabled, select a style that matches your form’s design. The options are Style 1 to Style 4.
Help Text If you’ve added help text for form fields, choose where it appears:

  • Below the Field: Places help text under the input box.
  • Below the Label: Positions help text under the field label.
RTL Form Displays the form in a right-to-left layout, suitable for languages such as Arabic, Hebrew, and Persian. This setting affects text alignment and overall form direction.
Rounded Corner Adds rounded corners to the form’s elements for a smoother, modern appearance.
Material Style Uses a minimalistic straight-line design for input fields, similar to Material Design.
Form Width Adjusts the overall width of the form. Options include:

  • S (Small): Compact layout.
  • M (Medium): Balanced width.
  • L (Large): Expands the form for wider screens.
  • Full: Stretches the form to the entire width of the container.
Form Margin Sets spacing around the form’s edges. Options include:

  • None: No extra spacing.
  • S (Small): Minimal padding.
  • M (Medium): Moderate spacing for a more structured look.
Font Pick a font from the list, or paste a Google Fonts import code to use a Google Font.
Font Size Adjust the text size to ensure readability. Options: XS, S, M, L, or XL.
Line Spacing Controls spacing between lines of text. Options: XS, S, M, L, or XL for optimal readability.
Label Layout Defines the arrangement of labels relative to input fields. If Customized is selected, return to each field’s Properties panel to adjust individual label positions.
Label Width Specifies the width of field labels to ensure consistent alignment across form elements.

More Custom Styles

You can further customize your form’s appearance and behavior using the More Custom Styles feature.

  1. In Preview & Design, click Design Form, then click the More Custom Styles button.

    Designer form

  2. Choose from three customization options:

    • Design tab: Change background images, adjust banner size, and modify layout elements.
    • CSS tab: Add custom CSS to style fonts, colors, and spacing.
    • JS tab: Use JavaScript to customize labels, add logic, and control form behavior.
    Note

    JavaScript runs only on a paid plan (not the free trial) with a connected custom form domain, to maintain security. Without them, the script is not served.

  3. After making adjustments, click Save. As with the other design settings, the live form changes only after you click Publish.

Good to know:

  • Custom JavaScript is limited to 16 KB.
  • The Classic and Conversational styles of a form keep separate CSS and JavaScript.
  • Custom CSS changes the online form only; it does not reach the generated PDF.

Video tutorial

Rather watch than read? We’ve got you covered with this video guide.

Is the content helpful?
Give feedback about this article