RackForms v7.2.2
signature
Site Tag Line
Latest Release: Build 926 - March 10, 2019
Contact Us  Purchase Options Purchase Options Contact Us
header-image


 
Top Link
Text Signature


In Brief: A digitial signature item that allows users to enter a written signature item on a page.

Dependencies: A signature Submission Page element to save signature data.

Hints & Tricks: Signature fields have legal requirements that we can read about here.

If we're building a form that uses tablemode span and we want the signature to span both columns, check the button under: Field Style Properties > Field Spans Both Columns In Table Layout Mode and then set the width of the element to be greater than 100%.

Skinny Signature? Make sure to remove the Draw It Text value so the clear button always shows. RackForms will automatically remove this value if the Canvas Width value is less than 180px.

Drawing Surface? Although some servers may have memory issues with signature pads over 200px wide by 200px high, but if needed, a signature field can also easily double as a simple drawing canvas. Collect sketches, rough drawings, and anything else that can be drawn.


Options/Properties

Basic Attributes

Name/Value

This field only becomes important if you have more than one submit button on the form, in that you are using the Submit Route feature. As a general rule, you should keep your Name/Value and id the same for your buttons.

id

Please see Name/Value above.

The second button would be called 'Add Friend' and have a value of page2.php. That means when clicked on, the user is taken to the optional, second page of the form. They could then add the friends info, and when they click submit on that page, would be routed back to page3.php.

Wrapper Class Name

Every field element in RackForms is wrapped in either a LI or DIV element for Sortable or Free Form page types, respectively. When you place a value in this box it becomes the class="" attribute for that wrapper. Because a wrapper encompass both the input element and wrapper, you can use this value to show and hide sections of your form.

Conditional Processing

Conditional Processing is the act of directing our forms users to different pages based on their responses to our forms questions. RackForms is particularly powerful in this regard as testing and acting on such conditions is handled using a simplified PHP code syntax. This means we can create just about any logic we need to handle our forms workflow, but it doesn't require complex programming knowledge.

At the most basic level each form field element we create is assigned a unique Name/Value property. This Name/Value property differentiates this form item from others, and because it is unique, is the key to creating conditional logic.

For example, if we create a text box and assign it a Name/Value of pet_preference, we can use that pet_preference identifier in our Conditional Code statement to route users to a particular form page when they hit submit based on their response that that form field.

Of course this example only makes sense if we have unique pages to go to, so for this example we'll create a three-page form. The first page will hold our text box with the pet_preference text box, the second and third pages will be named cat.php and dog.php, respectively.

Now we'll create our Conditional Logic on the first page's submit button as follow:

if(#{pet_preference} == 'Cats'){
	goto ${cat.php};
} 
if(#{pet_preference} == 'Dogs'){
	goto ${dog.php};
}

As you can see, the syntax isn't that difficult--we simply ask if a a field is equal to some value and then goto that page if it is. PHP developers will recognize this syntax immediately, though you will also notice the use of tokens #{} and the goto. The tokens are replaced with the field value at runtime, the goto is replaced with a simple header() call.

This is what is meant by 'simplified syntax'. The full PHP arsenal is at our disposal, but we needn't become bogged down by overly complex code structure and identifiers. Anytime we need to check on a form variable we use the token, when we want to go to a page we use goto and insert the page name, also in token format.

You can download this sample job here to give it a shot yourself!

Field Initially Visible?

Determines if this field is initially visible to your forms users.

Conditional Route Statement

This is the code that will be run when the submit button is pressed by the user. It is directly tied to the select items directly beneath, in that when you want to insert a field or page token we simply select one from the two lists.

Insert Field List

Conditional logic is performed by comparing a users entry value to a value you predetermine. Thus, a huge part of this process is inspecting our users input. This select item makes it easy to 'insert' the field elements you need to inspect, as it will automatically wrap the element in the proper token tag and insert it at the current location of your cursor.

If you need to check an array value, as you would for checkboxes, you would add the appropriate index position with a [n]. For example, a checkbox at position 1 would be:

if(#{checkbox1[1]} == 'Yes'){
	....  
}

Insert Page List

Similar to Insert Field List, only this item will insert a page token to be used with the goto keyword.

Digital Signature Field

Signature Type

We have four main types to choose from:

1. Draw Only - This will show the canvas to the user.

2. Type Only - This will only show the input field to the user.

3. Type and Draw - This will show the input field for typing, and if clicked on, allow them to sign as well.

4. Display Only - Only displays the canvas. Please note this option has limited value at this time.

If 'Display Only', The Signature Field To Show...

This field is used when Signature Type is set to Display Only mode.

The general idea is when using this mode we tell RackForms which signature field we want to show to the user. The key however is that this option only works if we have an existing signature to show. That is, on page 1 of the form we collect a signature, on page 2 we display it.

It's also important to note we can display a signature inline with other content in text display fields (Section Text, Body Copy and Confirmation Message) using a special token:

SIG{signature-field-id}

That is, upper case SIG, followed by an opening brace, the id of the signature field to show, followed by a closing brace.

The reason why this tokens exists is that using Display Only mode for a signature module item means we can be a touch limited in terms of where the signature is displayed, whereas when using the token we can drop the signature inline anywhere it's needed, such as a text field.

Accessing a Typed Signature Value

If our signature field uses Type and Draw Input, we can accesss our typed signature with the token:

F{SignatureFieldName}

This is useful for times when we wish to display the drawen and typed values to the user.

Signature Pen Color

The color of the signature.

Background Color

The background color of the signature image.

Pen Width (In Pixels)

The width of the 'pen' used to draw the signature.

Canvas Width

The width of the item being displayed.

Canvas Height

The height of the canvas being displayed.

Type It Text

The text that shows next to the text field for Text Input Only and Type And Draw Input (Both Required) modes.

Draw It Text

The text that shows just above the drawing area of the signature canvas.

General Required Field Error Text

The text shows to a user if they do not input text in Text Input Only mode.

General Drawing Required Error Text

The next that shows for required drawn signatures.

Signatures and PDF Library Comparability

RackForms ships with DOMPDF, this library will work fine with our digital signatures. mPDF, an optional library, also works fine with digital signatures. Unfortunately TCPDF does not work with signatures at this time.

Displaying Existing Signatures

A very common requirment for advanced forms is to query a database for raw signature image data and display that data in a template. This template could be a standard web page or PDF.

Too see just such an example in action, load up the display-existing-signature example job in the editor. The short version is we'll query the database for our image data, then use


So many features, So little time