Signature Field For Elementor Pro Module

Getting Started with Signature Field For Elementor Pro Module #

Signature Field For Elementor Pro Module adds a new form field option to your Elementor Form. With the new form field, you can provide your user an option to submit their signature with the form. 

Users can use a mouse, touch pen, or finger touch to write their signature using this form field. Another useful feature of this new module is there is a reset button so in case your signature doesn’t turn out to be good, you can wipe off the written one with the reset button and write again.

Besides, as an admin, you also have many options to customize this signature form field for Elementor. You can choose to save the signature as an image file(PNG/JPEG) on your server or as raw data. Moreover, you can also change the outlook of the input field with style customization options. 

How to Add Signature Form Field to your Elementor Forms #

You can easily add a Signature field to your Elementor Form using ElementsKit Pro. Check out the easy steps to add a signature field on your Elementor Pro form.

Step 1: Enable Signature Field For Elementor Pro Module #

The first step is to turn on the Signature Field For Elementor Pro Form Module. For that, navigate to ElementsKit ⇒ Modules ⇒ Turn on the toggle button of Signature Field For Elementor Pro Module, and finally, click on Save changes. 

Step 2: Create a new page and edit with Elementor #

The first step is to create a New Page. For that, Navigate to WordPress Dashboard ⇒ Pages and click on Add New.

Now provide a Title, choose Template as Elementor Full Width, and finally click on Edit with Elementor to edit the page.

Note: You can also checkout how to add Conditional logic to Elementor Form.

Step 3: Drag and Drop Form widget of Elementor #

Search for the Form widget. Once you find the widget simply just drag and drop the widget to create a form in Elementor. The default form that Elementor provides has three fields: Name, Email, and Message.

Step 4: Add the Signature Field to your Elementor Form & customize the settings #

To add Signature Field, click on the + ADD ITEM  to add a new field. 

Now on the content tab, provide the following information:

• Type: Choose signature type from the drop-down.
• Label: Provide an appropriate label.
• Required: To make this field required turn this toggle button on.
• Signature Format: Choose the image format as JPG or JPEG.
• Save as File: You can turn this option on to save the image as a file otherwise it will be saved as base64 data format.
• Column Width: Here you can customize the column width of the signature field.

Step 5: Style Signature Form field #

To customize the style settings of the signature field, you will need to move to the Style tab and expand the signature field menu. Then you can customize the following options:

• Field Background Color: Here you can change the background color of the input field.
• Pen Color: With this option, you can change the pen color of the field.

Step 6: Publish and Preview #

After you make all the changes publish the page and check the preview. Here is a demo of how the Signature field in Elemntor forms:

Note: You can check the form entries from the WordPress dashboard. Navigate to Elementor ⇒ Submissions. Then click on the view option of any form entries. 

If you choose to save the signature field as a file on the server, then you will find the path.

If you choose to save the signature as a data value, then you will find the image file in base64 data format like the image below: