Skip to main content
Version: 10.

Basics

The General Structure​

Each Form Template consists of at least one file: the HTML Form Template file. It serves as the fundamental basis for every Form Template. What does this HTML template look like, how is it structured?

First of all, the Form Template has to be a valid HTML 5 file (with some exceptions).
To ensure that an HTML file is a valid HybridForms Form Template file, it needs to adhere to the rules and syntax defined by the HTML specification. Here are key aspects that make an HTML Form Template file valid:

  1. Document Type Declaration (DOCTYPE): Every HTML document should begin with a DOCTYPE declaration, which specifies the version of HTML being used.
  2. HTML Element: The entire content of the HTML document should be wrapped within the <html> element.
  3. Head Section: The <head> section contains links to external resources like custom css and/or Custom Code. Go to Referencing custom CSS and Custom Code
  4. Body Section: The main content of the HTML document is contained within the <body> element.
  5. Valid HTML Elements and Attributes: Ensure that all HTML elements and attributes are used correctly according to the HTML specification. Elements should be properly nested and closed, and attributes should have correct syntax.
  6. Form tag: For a HybridForms HTML Form Template file, one crucial addition is necessary: It must include a <form> tag where the structure of the Form Template is defined. Within this tag, you configure the number of pages and the tabs each page should have. You also structure your Form by defining Form blocks, each containing your Form controls.
  7. Block definitions: Even though you can create Form Templates without blocks, it's likely quite pointless: Without block definitions, a Form Template has no content. Blocks are essential in structuring your content; here, you define the grid layout (rows and columns) and specify the Form controls each block should contain.

This is an overview of the key parts of a HTML Form Template file:

HTML structure
<!doctype html>
<html>
    <head>
        ...
    </head>
    <body>
        <form>...</form>

        <!-- block definitions -->
        <div data-hf-block>...</div>
        ...
    </body>
</html>
Note

Instead of writing the boilerplate code by yourself we recommend the usage of our boilerplate dev tool that generates the most important parts of a HybridForms Form Template automatically. Go to DevTools / Boilerplate

On the next pages you´ll find detailed explanations on these key parts.