Signature Field in WP Fluent Forms

By using the Signature field of WP Fluent Forms you can capture signatures online from your users using touchscreen devices, touchpads, or a mouse. It’s a quick and easy integration of signature capabilities into your forms where the end-user doesn’t require to use any special browser plugins. WP Fluent Forms takes signature information which is then converted into an image then sends and stores the data to your web server along with other form fields. This happens on-the-fly when the user signs the signature fields.

After installing the WP Fluent Forms Signature Add-On a new field type will be added to the Advanced Fields section of the Form Editor when creating a Fluent Form.

At first, In your WordPress admin dashboard, hover over or click on Fluent Forms Pro and then create a new form or edit an existing form from All Forms. You might want to take a look at how to create a form with Fluent Forms.

Drag & Drop the Signature field into your form from the Advanced Fields section.

Signature field on Fluent Form.png

Edit this new Signature field and configure the field options that best suit your site. From the Advanced Options, you can change the color, size, background, and border.

Signature field edit for Fluent Form.png

Pad background color: This is the color of the background of the pad in the front end. White suits great to the pad background but you can use any color.

Border color: This is the color of the border that surrounds the pad. By default, the signature field has a 2px dashed border. In my case, I have chosen yellow as the border-color

Pen color: The color of the pen when a user will sign the form. For my white background, a black pen color is appropriate in my case.

Pad height: The height of the pad. In the below example I had chosen 200px pad height.

Pad height signature field on Fluent Form.png

You can also use conditional logic and CSS classes for the Signature field also like all other Fluent Form Fields. Learn how to use conditional logic with WP Fluent Forms

Was this article helpful to you?

5 2

How can we help?

Please submit a support ticket if you have any question or pre-sale questions. Our Customer support engineers will answer your query as soon as possible

Open a support ticket