Autograph for ExpressionEngine
Get it in writing.
A signature field for ExpressionEngine. Visitors sign with a mouse, a finger or a stylus, in your Channel Forms, member forms, Grid and Fluid, and the signature is checked, kept and ready for your templates.
ExpressionEngine 7+PHP 8.1+Version 2.0
Sold and downloaded through the ExpressionEngine add-on store.
{exp:channel:form
channel="waivers"
return="waivers/thanks"
}
<input name="title" value="{title}">
{field:customer_signature}
<button type="submit">Sign</button>
{/exp:channel:form}
New in 2.0
The biggest release yet.
Autograph 2.0 is rebuilt for ExpressionEngine 7, and a 1.x site updates without changing a template, a stylesheet or an entry.
- Signatures saved as files, S3 included
- A responsive, high-resolution pad
- Grid, Fluid and member fields
- The date and time it was signed
- A JavaScript API and events
- Every signature checked on the server
The pad
A signing pad that fits the page.
It fills the space it's given, keeps its shape, and draws at the screen's full resolution. The image you keep is always exactly the size you set.
Your pen
Color, and the thinnest and thickest stroke. Lines thin out as the pen speeds up, like real ink.
Your page
A border, a background color baked into the image, and placeholder text like "Sign here".
Your rules
Undo on or off, required with a message before the form is sent, and a maximum size.
Your styles
A small stylesheet with no specificity, so your CSS always wins. Every class is documented.
Accessible
A focusable, labelled pad with a visible focus ring, and a message for visitors without JavaScript.
Checked on the server
Every signature is decoded and checked before it's kept. What's saved is re-encoded from that check.
Storage
In the entry, or as files.
Choose per field. Change your mind later: signatures already saved keep displaying wherever they are.
In the entry
The default. Nothing to set up, and the signature travels with the entry, its copies and its exports.
{customer_signature:url} → data:image/png;base64,…As a file
A PNG in any upload directory or subfolder, S3 included, in the file manager like any upload. Ordinary links, so it shows up in emails and PDFs.
{customer_signature:url} → …/signature_waiver_3f9a.pngEverywhere
Wherever somebody needs to sign.
One fieldtype, in every place ExpressionEngine collects content. No template changes: output the field, and the pad and its scripts are there.
- Channel Forms
- Member registration
- Member profiles
- Grid rows
- Fluid fields
- The control panel
For developers
A pad you can script.
Every pad has an API on its element and fires events as it's used. Storage is pluggable from your own add-on.
document.addEventListener('autograph:changed', (event) => {
send.disabled = event.detail.autograph.isEmpty();
});
// A form loaded later:
Autograph.initAll(container);
Somebody needs to sign something.
Get Autograph from the ExpressionEngine add-on store, add the field to a form, and you're done.