Tip of the day

Support tickets can be submitted directly from application

Templates

HTML template

Estimated reading: 6 minutes 172 views

HTML template is responsive, automatically adapted to the client’s screen and rich of display capabilities.

After adding a template name and saving, the application will go to the template editor screen with the template in “Draft” mode.

HTML template is built from four nested components:

  • Page: The template contains one or more pages. Switching between the pages in the form is possible for the user using the navigation buttons at the bottom of the page.
  • Section: Each page contains one or more sections.
  • Row: Each row contains at least one column and up to three columns.
  • Column: A column may contain one or more controls.

At the top of the template editor is “Intro” section, that allows a Welcome message to be displayed in the form.

At the bottom of the form editor is “Outro” section, that allows the completion message to be displayed to the person filling out the form.

Below is an example of a template consisting of one page, in which one section includes four rows and three columns in each row.


Page


Template contains pages that the user can navigate through. It is recommended to use division into pages when the form is loaded with controllers, and we want to create a more pleasant experience when filling out the form. For each page in the template, you can apply a title and additional design options.

To enter the page’s options, click on the margin of the page, the page will have a light green background and a panel for the page’s options will open on the right.

Page titleInsert a textual title for the page.
ClassUsed by developers to generate additional options in the code.
Delete pageDeleting the page with all the components.

      Page design includes the following options:

      Title Background Select the color of the page title background.
      Title styleHeader 1 is the largest font and Header 4 is the smallest.
      Font colorSelect the color of the page title text.
      Title position “Fixed at the top” will mean that on a mobile phone the title will be pinned to the top.
      “Non fixed” will scroll along with the page.
      Show logo Set to ON to add the logo to the title.
      Height in pixelsHeight of the logo in pixels.


            Section


            As mentioned before, page contains one or more sections.

            Similar to the page options, the section also includes design options. To enter the section’s options, click on the section’s margin. The section will have a pink background and a panel for the section’s options will open on the right.

            Section titleInsert a textual title for the section.
            CLASSUsed by developers to generate additional options in the code.
            Delete SectionDeleting the section and its components from the page.

                Background colorSelect the color of the section background.
                Title styleHeader 1 is the largest font and Header 4 is the smallest.
                Font colorSelect the color of the section title text.
                Title BackgroundSelect the color of the section title background.
                IconsSelect the icon for the section title, its color and position to the right or left of the title.
                Search Icons [English]
                Search Icons [English] Allows searching by English text relevant to the icons, for example “arrow”.

                Rows and columns


                The template editor allows us to create a form that will automatically adjust to the size of the user’s screen.

                If we use only one column per row throughout the form the entire form, the form will be presented to the client as one column of the fields.

                If we use more than one column in a row, then:

                • If the client uses a large screen such as a tablet or a desktop computer, the controls will be displayed as they are displayed in the template.
                • If the client uses a narrow screen, for example a mobile phone, the controls in the column will be displayed in a column one after the other.
                This image has an empty alt attribute; its file name is image-72-1024x724.png
                • Display of the form on a tablet and a desktop computer.
                • Display of the form on a mobile phone.

                Intro


                Clicking on the “Intro” button at the top of the template entry will display the panel on the right.

                The “Hide Welcome screen” button will hide the rest of the parameters in the panel and will also hide the welcome screen for the client, so that the link to the form will go directly to the form itself.

                Hide Welcome screenWhen set to ON it will hide the rest of the parameters in the panel and will also hide the welcome screen for the client, so that the link to the form will go directly to the form itself.
                TitleText that appears in the title of the welcome page. The default font is H1, size and color can be edited in the text editor.
                Description Text that appears below the welcome page title. The default font is H3, size and color can be edited in the text editor.
                Start text buttonIf no value was entered the default value “Start” will be used.

                Outro


                The completion page displays an indication that the procedure has been completed successfully and even navigates it to another page such as your home site.

                Auto redirectIf set to ON, enter a web address to which the client will automatically redirected without going through an end page in Cellosign.
                Title Text that appears in the title of the Outro page. The default font is H1, size and color can be edited in the text editor.
                DescriptionText that appears below the Outro page title. The default font is H3, size and color can be edited in the text editor.
                Redirection buttonThe button to redirect to another address. If set to ON, enter a text of the redirect button and a web address to which the client will be redirected.


                In the HTML template it is possible to hide any specific controllers from the preview and the final PDF by adding “pdf_hidden” class under the Developer tab.

                In this case fields with pdf_hidden class will be shown in client’s form to add the values and complete the form.

                But they will not be shown in the preview and in the final PDF after submission.

                For more information about the Developer tab click here.

                Leave a Comment

                Share this Doc

                HTML template

                Or copy link

                CONTENTS