eSign Here: How To Capture eSignatures Using Forminator

eSign Here: How To Capture eSignatures Using Forminator

Signed, sealed, and delivered! With Forminator, you can receive electronic signatures on your WordPress forms.

Forminator‘s eSignature means that visitors can sign by mouse, trackpad, or finger (with touch devices) before submitting a form. Or, if they prefer, they can even upload signatures!

Inserting an eSignature form in your WordPress site has never been so simple. Users can now sign with their own signature…

…or upload them!

I’ll show you how to quickly and easily set up a form both ways and put it to use today!

This post covers:

Forminator cartoon signing a doc.
Forminator signing-off on the eSignature update.

Let’s get write into it!

How to Create a New Form with eSignature in Forminator

You can have an eSignature form set up and ready to use in just a few minutes (or less).

Just go to the Forminator dashboard and click the Create button to create a new form. If you need help learning how to set up a form, we show you step-by-step ways to create one here.

With the new form, selecting the E-Signature field in the Insert Fields screen will get you started. Add any additional fields you’d like, such as Name and Email.

When you click Insert Fields, they’ll all be added to your form.

Where you’ll pick what fields you want to include.
Pick the fields you want to include in your form.

Customize and edit the fields any way you want. Simply click the edit button and the Edit Field option.

What you’ll click to edit the fields.
What you’ll click to edit the fields.

The Signature field has a Labels tab where you can adjust the label, placeholder, and description.

The Labels tab.
The Labels tab.

There’s also a Settings area where you can adjust the signature file type to save your user’s signature in, customize the height of the signature field, adjust the stroke thickness, and even an option to force users to fill out this field.

The Settings area.
The Settings area to adjust several options.

If you want to incorporate CSS classes into your form you can do this in the Styling tab.

Where to add any additional CSS classes.
Where to add any additional CSS classes.

Finally, in the Settings area, there is the Visibility section.

The Visibility section.
The Visibility section where you’ll add rules.

This is where you can add Rules based on conditions and values (I’ll show you this below when we insert a file upload option).

An example of a rule.
An example of a rule.

In addition to being able to customize your eSignature forms, Forminator lets you edit options like recipient email notifications, colors, style, and more in the Edit Form area.

When you’re happy with the form you’ve created, preview it and hit Publish.

Presto! You now have a form that users can complete with their eSignature!

Example form with e-signature.
Example form with eSignature.

Forminator will give you a shortcode that you can use on your WordPress site in a post, widget, or page.

Along with signing digitally, users can also…

Add a Signature Upload Option

If you want to take eSignatures to the next level and give users an option beyond signing with their mouse or fingers, you can create a form with the capability to upload an existing signature. This is great for mobile devices and tablets, as you can upload a sig pic in a snap (try saying that 5x quickly).

When you create a new form, insert a Radio and Upload File fields along with the other necessary fields for eSignature.

The Radio and Upload file fields.
The Radio and Upload file fields.

We’ll go in and edit the Radio field and edit the Label and Options.

For the label, I’ve added the text: Do you want to sign or upload an existing signature image? You can customize the text however you want.


Our best pro WP tools in one bundle

Try free for 7 days
30-day money-back

For the Options, I’ve added Sign and Upload Image. Also, click the Selected box next to Sign.

The Radio options.
The Radio options.

After doing this, hit Apply.

Next, go to the Upload Field and edit its sections.

You may want to select Multiple in the Type tab. Also, change the Label to something like Upload Signature.

The Upload field area.
The Upload field area.

In the same area, click the Settings tab.

Change the File Upload Limit to one (multi-file uploads is a new feature that I’ll mention shortly). You can change this to multiple file uploads, but “1” looks more user-friendly and is all that you’ll probably need in most cases.

The file upload limit settings.
The file upload limit settings.

After you’ve done this, click Apply.

Next, go to the Signature field and the Visibility tab.

Here, you can adjust the settings to include the rule of signing or uploading an image in the Field section.

Also, make sure the Condition is required and you have Sign as the option.

Visibility settings where you can see the condition is set at ‘Is’ and ‘Sign’.
Visibility settings where you can see the condition is set at ‘Is’ and ‘Sign’.

Then, click Done and Apply.

Go to the Upload Field and set a similar condition there — just like the one you created in the Signature field.

The only difference is in the dropdown, you’ll want Upload Image to be displayed.

The Upload Field visibility section where ‘Is’ and ‘Upload Image’ are the conditions.
The Upload Field visibility section where ‘Is’ and ‘Upload Image’ are the conditions.

And once you have completed this, hit Apply, and you’re all set!

When you preview the form, you’ll see that there are now two options for signature fields: Sign or Upload Image.

Here’s what the form looks like when ‘Sign’ is selected:

The Sign preview.
The Sign preview.

And when ‘Upload Image’ is selected:

The Upload Image preview.
The Upload Image preview.

Users can drag and drop or choose files when uploading their eSignatures.

It’s always good to have options and now users can have their preferred method of signing the form.

Why You Will Want to Use eSignatures

Besides receiving a ton of requests from our members for this feature, eSignatures have a number of benefits and advantages that you might not be aware of, such as:

  1. Simplicity: eSignatures are simple and easy to use. This is probably the biggest reason to use them and Forminator makes it effortless and effective.
  2. Security: eSignatures are a safer and more secure option than using traditional paper documents. Why? Because you not only get their signature, you also have traceable information on when they signed it, who signed it, and where it was signed. Try to beat that using traditional paper!
  3. Convenience: With more and more businesses working remotely and transacting around the world, electronic signatures allow for remote authentication. That’s much easier (and cheaper) than mailing, printing, or scanning documents. And…we’re one step closer to living the paperless office dream…woohoo!
  4. Speed: Signing forms and documents digitally can all be done in a matter of seconds, so there’s much faster turnaround time.
  5. Low Cost: You save money on paper, postage, supplies, and time. Time is money, money is money, and using eSignatures saves both!
  6. It’s Legit: eSignatures are legally valid and can be used on registration forms, online petitions, any terms of service agreements, non-disclosure agreements, application forms, contracts, and more.
  7. The Future Is Now: You’re seriously not thinking about buying a new (gulp!) fax machine, are you?

A Sign of Things to Come

Features like eSignature are a sure “sign” of our commitment to keeping on improving Forminator and all of our other plugins regularly.

Keep in mind, eSignatures are only available with Forminator Pro. If you don’t have Pro, Forminator’s free version is available for lead generating quizzes, registration forms, payment options, calculations, and more.

To see what’s coming up next with Forminator, you can keep tabs on him by checking out our Roadmap.

And on that note, it’s time to sign off…

Have you tried Forminator’s new eSignature option on your WordPress site? If so, what do you think? Let us know in the comments!

N. Fakes

N. Fakes Nathanael Fakes is a blog writer and cartoonist at WPMU DEV. He’s worked with WordPress for over a decade. Beyond WordPress, he’s a published author, syndicated cartoonist, and donut enthusiast. Connect with Nate on Instagram and learn more about his work on his comics website.