Hey all,
This community has been super helpful to me and lately I’ve been thinking that I want to give back. So, today I was experimenting with ideas on how I can have users sign a license agreement for my creative works. I think I just found a really cool way of pulling it off, as seen below:
First step: Place a rich text editor on the page, with the contract in it, then “disable the input” so people can’t alter it.
Note: As you can see, I also added dynamic data to the contract, so everything is correct before signing.
Step 2: Place input fields, for the user to fill out and as it’s being filled out, it updates on the contract itself. Which you will see how, in step 3. For the signature field I’m using the “Signature Pad” plugin by Misha V.
Note: We will now have to store this data on the rich text editor, as seen below
Step 4: Make the information store on the contract itself, by creating a way for it to dynamically change at the bottom of the contract itself. As seen in the image below.
Note: As you will notice, I have creatively made the image of the signature post, by calling the signature pad image url between the two “img” brackets.
Now, lets see screen shots of it in action
Contract dynamically displaying data BEFORE it’s been filled out and signed by user(below)
Same with bottom of contract
NOW HERE IS THE MAGIC! HOW IT LOOKS AFTER SIGNED AND “SAVE” IS PRESSED(below):
Filling out the fields
It displayed on the contract after saving it
Now I can just have a workflow that saved the rich text input as well! This is great because before the only other way, I could find to do it would be to store the image separately and not on the contract itself. This way because it is being saved to an input field, it can all be saved and recalled in one concise place. Plus, the user gets to see their signature on the contract, how they’d do it in person. Best of all it’s free…
…I thought some of you would find this helpful. Happy signing…