How To: Create a WordPress Form with Signature Field using WPForms

Gone are the days when signatures used to be the limitation of the digital assets like agreements and required people to sign them in person.

You can now digitally sign various documents online. If you are wondering how you can do that with your WordPress site, then you are at the right spot.

In this tutorial, I will show you how you can gather e-signatures or electronic signatures in WordPress using the Signature Addon for WPForms.

Create a WordPress Form with Signature Field

There used to be a time when you needed to download the forms, scan your signature, attach it with the forms, and re-upload them.

WPForms makes everything a piece of cake. It allows you to add a signature field to your forms so that you can let your users sign them online.

• No Waiting: With the power of WPForms, you can let your users add their signatures right away.
• Convenient: Digital signatures don’t require the signees to be physically available. They can sign forms from anywhere in the world.
• Business Growth: Since the forms are signed faster with no signee availability limitation, your business grows even quicker.

For this tutorial, we will be adding signature using WPForms to a Blank Form template to create a custom service agreement.

Step #1. Create a Signature Form

Install and activate WPForms on your site.

You’ll also need to install the Signature Addon so that users can submit digital signatures in WordPress as a part of the agreement.

Click on Addons under the WPForms section of your WordPress dashboard sidebar.

Look for Signature Addon there. When you find it, simply install and activate it.

With the Signature addon activated on your site, the Signature field option will be available to be added to any new or existing forms.

Click on Add New under WPForms dashboard menu and choose Black Form.

Add all the fields required like name, email, etc. Once you are done, go to the Fancy Fields option, and you’ll find Signature form field there.

Click the Signature button or drag and drop it to any specific location in your form.

To make changes to the Signature field like changing its label or making it required, simply click on it.

Then tick the checkbox for Required so that form doesn’t submit without user’s signature.

Step #2. Configure Signature Form Settings

Once your form’s layout is complete, it is time to configure its settings.

WPForms has a bunch of settings that you can play around with.

Below I have explained all the WPForms settings section and what they have:

General Settings

Here you can edit things like your form’s name and description. You can also make your form secure from unwanted form submissions by enabling enable additional spam-prevention features.

Form Confirmations

Form confirmations are the messages that display to users once they submit a form on your website. WPForms has 3 confirmation types to choose from:

• Message
• Show Page
• Redirect

You can select any one or a combination of all three.

Form Notifications

Whenever a form is submitted on your website, you receive an email notification to inform you.

You can also configure WPForms to automatically send an email to the user that submitted the form and anyone else that needs to be notified of form submission.

Step #3. Publish Your Signature Form

Now that you have created your first form, it is time to add it to a page and finally publish.

Go to Pages >> Add New to create a new page. You can name your page anything you want. I am calling it Service Agreement. Don’t forget to add the agreement text content.

For Gutenberg Editor

To add the service agreement form we just created to Gutenberg Editor, click on the Add Block (+) icon. Then search for the WPForms block using the search box and click on it.

Next, select your form from the dropdown box to embed it into your page.

Finally, click the Publish button so that your form goes live.

For Classic Editor

To add the form to the Classic Editor, click on the Add Form button above the page editor.

This will bring up the Insert Form popup. Select your form from the drop-down menu and then click on the Add Form button.

Your form’s shortcode will be added to the page editor. You can now publish the page and visit your website to see your live form in action.

Live Signature Form in Action

When someone fills up and submits a form on your site, a notification email is sent to you. You can even see the saved form submission by clicking Entries under WPForms dashboard sidebar menu.

The signature will be saved as an image that you can easily view it at a glance.

Done!

This is how you create signature forms in WordPress. Using WPForms, you can create any kind of forms like service agreements with a digital signature field.

WPForms has an easy to use interface with pre-made templates so that you can get a working form in a few clicks. Want to save more time with WPForms?

So, what are you waiting for? Get started with the most powerful WordPress forms plugin today.

I hope you found this tutorial helpful. Share it on your social media handles and don’t hesitate to use the comments section to ask your queries. Cheers!