Breadcrumbs

Typed Signature

The typed signature component adds a standard text field that also shows a live, cursive‑style preview of the user’s name as they type. It’s designed for forms that require a typed signature but still want a signature‑like visual.

image-20260503-204727.png

How It Works

  • The component saves the typed name as plain text in the submission data, just like a normal text field.

  • As the user types, a signature‑style preview appears above the input.

  • If the field is empty, the preview shows the placeholder text instead.

  • You can choose the font used in the preview by setting fontFamily.

  • You can also load a custom font by providing a fontUrl, such as a Google Fonts stylesheet.

You can:

  • Set Font Family to any valid CSS font stack.

  • Provide a Font Stylesheet URL if you want to load a custom font (for example, a Google Fonts link).

Font Configuration Tips

  • Use a standard web‑safe font stack or load your own font through a stylesheet URL.

  • fontFamily must be a valid CSS font-family value (example: Georgia, "Times New Roman", serif)

  • fontUrl should point to a stylesheet that defines the font you want to use.

  • For a more “scripted style” font, try Brush Script MT