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

Customize your form’s appearance to match your brand. You can:

  • Add your logo, change fonts, and adjust colors.
  • Apply themes for a quick style update.
  • Fine-tune design settings for a polished look.

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 the themes

Themes let you change your form’s look instantly.

  1. Click the Themes button at the bottom left corner.

    form themes

    The Themes panel will appear.

  2. Browse and select a theme that suits your form.

Save as shared form theme

If you want a custom theme for your team, use Save as Shared Form Theme.

  1. Click the Themes button to expand the Themes panel.

    form themes

  2. Choose a theme or customize one.

  3. Click Save as Shared Form Theme.

    save theme

  4. Name your theme and click Save.

    Now, your team can apply this theme to other forms.

Cutomize the form design

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

  1. On the preview page, click the Design Form button in the top right corner.

    Designer form

    You will open the Design Form panel.

  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.

Is the content helpful?
Give feedback about this article