Looking for a way to let users add signatures to your Bubble application?
Adding a signature pad can help you replicate features from popular products like DocuSign or Quickbooks. Signatures are perfect for client invoices, documents, or legal agreements.
This complete guide covers everything you need to know about adding a signature feature in Bubble.
The process to setup the signature pad plugin in Bubble.io includes:
- Setting up your database
- Learning how to create new documents
- Installing the signature pad plugin
- Designing the signature element field
- Building a workflow to create & save a signature
- Marking a document as signed
In our example today, we’re going to learn how we can not only display a list of documents a user is required to sign, but we’re also going to explain how they can actually sign those documents and store that signature in our database. Then finally, we’re going to mark those documents as complete.
1. Setting up your database
Before we can build out the signature pad element, we’ll need to first create the necessary data types and fields within our database. These data types will power our overall feature.
We’ll start by adding two new data types to our app:
- The first will be called ‘documents’
- The second will be ‘signatures’
Within our document data type, we’ll then add three new data fields. The first data field will be called ‘content’. This field will contain the actual content of a document e.g. the text that outlines the terms of a contract.
Next, we’ll create another field called ‘name’. This will act as the title of the document, so we’ll need to set this data field to be a text type.
Finally, we’ll add a third data field called ‘signatures’. The purpose of this field is to store and reference the actual signatures that have been added to a doc.
At this point, these data fields should look like this:
- Content – Text type
- Name – Text type
- Signatures – List of signatures data type
Now, under our separate ‘signature’ data type, we’ll build out the necessary data fields.
We’ll start by adding a field called ‘person’. This field will recognize who the user is that actually signed a document. When creating this field, we’ll link this to our ‘user’ data type.
Finally, we’ll then create another data field called ‘signature’. The purpose of this field is to store an image of the actual signature added by the user. This field type will need to be an image.
To summarize, the data fields under your Signature data type should look like this:
- Person – Linked to the user data type
- Signature – Image type
2. Learning how to create new documents
Now that we’ve taken the time to structure our database, we’ll need to build out the page where a user can sign a document.
If you open the design tab in Bubble, you can create a brand new page from scratch. After creating this page, you’ll then need to store a type of content in the page itself. Because we’d like to dynamically display a document on this page, the type of content will be linked to our ‘document’ data type.
Now, we can start adding the necessary elements on the page to display the content of a document.
Let’s start by dragging a text element into our Bubble canvas. This text element will act as a heading. Within this text element, we’ll have it display the value of the ‘current page’s document, its name’. This means it will display the title of the document.
Below this heading element, we’ll need to add yet another text element to display the full contents of the document.
Within this element, the dynamic data source will reference the ‘current page’s documents, content’.
Finally, at the bottom of the page, we’ll add a signature pad. Once a user has read through the document, this element will allow them to add their signature.
Before we can add this element to the page, we’ll first need to install the necessary plugin.
3. Installing the signature pad plugin
To install the signature pad plugin, start by opening the Bubble plugin library. Once open, search for the word ‘signature’, then install the first plugin. Thankfully, this plugin is free to use.
Now, if you open the design tab once again, you’ll have access to the signature pad element within your input forms menu. Select this element, then drag it onto your page.
4. Designing the signature element field
At this point, we can update the design settings for the signature pad. If we open the layout tab, we’ll update both the width and height of the element to 400px.
Changing the dimensions of this element not only makes it more legible on the page, but it also gives users more space to input their own signature.
5. Building a workflow to create & save a signature
Now, we’re ready to make out signature pad element functional. In order to trigger a workflow, we’ll right-click on the element and choose to ‘start/edit a workflow’. This workflow will now trigger whenever a user selects the save button next to the signature pad.
Within this workflow, the first step will create a brand new signature in our database. To do this, we’ll select from the data events, then choose the option to ‘create a new thing’.
The type of thing we’ll want to create is a ‘signature’. Then, from here, we’ll need to match the data fields within our database to the relevant information on our page.
The first field we’ll update is ‘person’. We’ll store the value of the ‘current user’ in this field. In this scenario, the current user is the person who just signed the document.
Next, we’ll need to save the signature as an image. To do this, we’ll store the URL of the signature pad’s current image to our data field.
From here, we’ll then need to add another step into our workflow. Within this step, we can now make changes to the document.
By selecting the option to ‘make changes to a thing’, we can change the ‘current page’s document’. The field we’ll want to change within this document is the list of signatures. We’ll add to this list the ‘result of step 1’ in our workflow.
Now, we’ll need to add one additional step to our workflow. Within this step, we’re going to send the user page to our home page. To do this, we’ll select from a ‘navigation’ workflow event, then set the destination page to our ‘index’ page.
6. Marking a document as signed
If we open the index page in our Bubble editor, I’d like to display a list of all the docs that a user must sign. This list should also mark any signed documents as complete.
In order to build this feature, we’ll start by adding a repeating group to our page. When working with repeating groups, we’ll need to first configure the data source of the element. This will allow Bubble to determine which list of data to display.
For the type of content, we’ll link this to our ‘document’ data type. Then, for the data source, we’ll need to perform a search in our database for all of the documents.
Now, we can design the elements that will display inside the repeating group.
We’ll start by adding a text element that shows the title of the document. When it comes to the data source of this text element, we’ll set this to be the ‘current cell’s document’s, title’.
Beside the title of the document, we’ll then add a small icon that will trigger a workflow when clicked. After placing an icon element into our repeating group, we can open the icon library, then select to display the ‘newspaper’ icon.
After adding this icon to the page, we can choose to start a workflow whenever this element is clicked.
Inside this workflow, we’ll select to run a ‘navigation’ event, then set the destination page to be the existing ‘document’ page we had previously created.
Because our document page has a type of content, we’ll also be required to pass the data of a document inside this workflow. The data we’ll send is the ‘current cell’s document’.
Finally, back on our home page, we’ll need to add one last icon into our repeating group. Beside our newspaper icon, we’ll add a green tick. This tick will indicate when a user has successfully signed a document.
Because we only want to display this icon after a document has been signed, we’ll need to hide this element on our page by default. To do this, we’ll open our layout tab, then unselect the option to ‘make the element visible on page load’.
Next, we’ll need to create a condition that determines when this green tick should be shown. In this case, our condition will recognize when the ‘current cell’s documents, list of signatures, contains the current user’. When this condition is true, we’ll select to ‘make this element visible’ once again.
Previewing the app
If we were to run a preview of the finished application, you’ll see that on our home page, there’s a list of documents we’re required to sign. If I click on one of these documents, it will redirect me to our dynamic document page, sending with it the data of the document I selected.
Once I then review the contents of the document, I’ll have the ability to add my signature to the signature pad element. If I then click save, it will run our workflow, add my signature to the total list of signatures in this document, then send me back through to my home page.
Finally, on my home page, I can now see that our document has been marked as complete.
And just like, you now know how to set up the signature pad plugin in Bubble.