Template Builder Guides
      Back to home
      1. Corfix Guide
      2. Template Builder Tutorials
      3. Template Builder Guides

      Corfix Form Builder: Using the Signature Component.

      This article will summarize how to use the Signature Component in Template Builder.

      This component allows users to draw or input a digital signature directly onto the form.

      *This component is not usually used, since the Corfix platform auto populates a signature function when signing a form.*

      Where to Find It

      In your Corfix Form Builder, click on a Signature Component to access the configuration panel. You’ll see four tabs:

      • Display

      • Data

      • Validation

      • Conditional

      1. Display Tab

      The Display tab controls how the Signature Component appears to the user.

      • Label:

        • This is the main title for your signature field that users will see. It is a required field.

        • Example: "Signature of Approval", "Witness Signature", "Client Signature".

      • Footer Label:

        • Text that appears directly below the signature drawing area, guiding the user on where to sign.

        • Example: "Sign above the line", "Draw your signature here".

      • Label Position:

        • Determines where the main label is displayed relative to the signature pad (e.g., Top, Left, Right, Bottom).

        • Default: Top.

      • Background Color:

        • Sets the background color of the signature drawing area.

        • Default: rgb(245,245,245) (a light gray).

      • Pen Color:

        • Sets the color of the "ink" or line drawn by the user's signature.

        • Default: black.

      • Description:

        • Provides additional explanatory text for the component, typically displayed below the main label.

        • Example: "Please provide your authorized signature."

      • Tooltip:

        • Text that appears when the user hovers their mouse over the component. Useful for providing quick help or context.

      • Custom CSS Class:

        • Allows advanced users to apply custom styling to the component using CSS classes.

      • Hide Label:

        • If checked, the main label for the component will not be displayed.

      • Modal Edit:

        • (Details not fully visible in screenshot, but typically relates to editing in a pop-up modal window).

      2. Data Tab

      The Data tab manages the underlying data properties of the signature field.

      • Multiple Values:

        • If checked, allows the user to provide multiple separate signatures in this field. This is generally uncommon for a single signature component unless it's for a list of signatories.

      • Default Value:

        • This field is for a pre-existing signature image or data. Given it's a drawing component, this is rarely used unless defaulting to a blank or placeholder image.

      3. Validation Tab

      The Validation tab defines rules for the signature field.

      • Required:

        • If checked, the user must provide a signature before submitting the form. This is very common for signature components.

      4. Conditional Tab

      The Conditional tab allows you to set up rules for when this Signature Component should be displayed or hidden based on the values of other components in the form.

      • Simple:

        • This is typically a toggle or a dropdown to select between simple and advanced conditional logic.

      • This component should Display:

        • Choose whether the component should "Show" or "Hide" (implied options) based on the condition.

      • When the form component:

        • Select another component in your form whose value will trigger the condition.

      • Has the value:

        • Specify the exact value that the selected form component must have for the condition to be met.

        Example: You could set up a rule so that the "Supervisor Signature" field only displays when "Requires Supervisor Approval" checkbox is checked.

      Preview Panel

      The Preview panel on the right side of the dialog box shows you how the "Signature" pad will visually appear on your form. It includes the drawing area and a "Sign above" footer label, giving you a real-time visual of the component's appearance.

      Actions at the bottom of the dialog:

      • Save: Saves all changes made to the Signature Component's settings.

      • Cancel: Discards any unsaved changes and closes the dialog.

      • Remove: Deletes the Signature Component from the form.

      Best Practices for Signature Component:

      • Clear Labels: Use a precise "Label" (e.g., "Employee Signature") and a guiding "Footer Label" (e.g., "Sign Here") so users know where and what to sign.

      • Make It Required: For legal or verification purposes, always check the "Required" box in the Validation tab to ensure a signature is provided.

      • Set Colors for Readability: Choose contrasting "Background Color" and "Pen Color" (like the default light gray background with black pen) for clear visibility of the signature.

      • Use Conditional Display: Only show the signature field when it's logically required (e.g., "Customer Signature" appears only after they agree to terms).

      • Limit "Multiple Values": Generally, keep "Multiple Values" unchecked unless you specifically need multiple distinct signatures within a single signature component instance.