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 PDF form

Tabs

Use Preview & Design to customize how your Web PDF Form looks. 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 to apply your changes.

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 or JPG (max 10MB) 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, insert a Page Break when designing your form.
Navbar Style Once the Navigation Bar is enabled, select a style that matches your form’s design. Options may include Tabs, Progress Bar, or Sidebar Navigation.
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 Use the system default font or upload a custom font to match your brand’s identity.
Font Size Adjust the text size to ensure readability. Available sizes range from Small to Extra Large.
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. Click on the More Custom Styles button in the form editor.

    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 is secure and only works with custom domains to maintain security.

  3. After making adjustments, click Save to apply your changes.

Video tutorial

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

Is the content helpful?
Give feedback about this article