Post a Fillable, Signable Web Form

Transcript

[Instructor] Hello everyone and thank you for joining us today. Welcome to this edition of Acrobat Sign Skill Builder. Before we jump in, I’d like to remind you that this session is being recorded and will be available within 24 hours, right here where you joined today. You’ll also receive an email with a link to the recording for on-demand viewing. As always, please make sure to ask any questions in the Q&A pod on the right side of the screen. We’ll have Adobe experts on standby ready to answer. We’ll answer as many questions as possible, but for those that we aren’t able to get to, there are several great resources that you can visit to learn more. We’ve dropped those in the Q&A pod for you to bookmark. Let’s jump right in. There are many document processes where you might collect input, approvals, and signatures on your forms without knowing who the signing participants are ahead of time, until of course, they’ve completed the document and a copy has been provided. A perfect example of this would be a release form that an unknown participant might access on a website where the form is downloaded, completed, and then provided to the concerned party. Stick around to learn how you can use Adobe Acrobat Sign to create and embed web forms on your website or share the form as a web link, allowing your participants to easily access the form to begin the process themselves while being provided a seamless and embedded signing experience.

(upbeat music) Hi there. Weston Romero here, Technical Product Evangelist at Adobe. Today, I’m going to show you how you can use Adobe Acrobat Sign to create fillable and signable web forms that you can embed on your website or share as a web link. I like to start each session with this easy question. What’s your experience level with Adobe Acrobat Sign? We’ll cover first, the steps and the options available to create a new web form with fillable fields that you can then embed on your website or share as a web link. Then we’ll take a look at a published web form through the lens of a signing participant, as well as show you how you can manage, track and export the form field data of your web forms. Finally, we’ll show you the options that you have available for editing your existing web forms, should you need to make changes or disable a web form that’s already been published. Please note that if your Adobe Acrobat Sign account doesn’t show you the option to create web forms, check with your Acrobat Sign account admin to verify that the feature has been enabled in your account settings. Alright, let’s jump right in.

Creating a web form is as easy as the other methods for collecting signatures with Adobe Acrobat Sign, although there are some option differences that we’ll discuss since the first and even sometimes the following participant of a web form is often unknown ahead of time, so let’s take a look at the options now as we walk through the process of creating a new web form. First, we’ll start by making sure that we are logged into our Adobe Acrobat Sign account and before we go and select publish a web form, it’s best practice to make sure that you have the right settings enabled to begin creating and using web forms. These are settings that can be enabled at both the account level or for a particular user group and in my instance, I’ll be showing this example at the account level. In the account setting section, I’ll search by web forms so that we can quickly find the related settings and make sure that we have what we need enabled to begin creating our new web form. As you can see here, we’ve located the related settings for web forms where we have a few options available that we can enable or disable based on our preference. To start, we’ll leave the allow the use of web forms enabled since it will be needed to access the web form option from the homepage. We can also enable or disable allowing carbon copied recipients to be defined in a web form, allow PDF preview of web forms, as well as have the option to require an email address in the signature block for web form participants. We can also require the web form signer verify their provided email address by clicking a link in the verification email that’s sent to them after completing the form. This feature adds additional security to your web forms since the web form participants are unknown and will be required to verify their email address before the process can move forward. Finally, you can enable allowing additional participants, which I will check. This feature enables the ability for your initial web form participant to identify the next participant in the workflow and is great in scenarios where you have multiple unknown participants needing to complete your forms. A great example of this would be a form needing to be completed by both a minor and their legal guardian, only the minor in this case would know the email address of their legal guardian, who’s also required to sign. More on how this is set up later. And now that we’ve set the necessary settings, we’re now ready to return to the homepage where we’ll select publish a web form to begin the process. Here, we can begin the steps necessary to publish our web form. First, we can specify which user group this web form should be created under. I’ll leave mine set as default group. Then I’ll give this web form a name and for now, call it sample form.

The next section is where we begin defining the known details of the form’s participants. Do we need the participant to sign this form or simply approve or accept it? Perhaps they’re just a form filler. My first participant is a signer, so I’ll leave it as is.

Next we have the authentication options. Is the unknown participant required to enter in a password before they can view and sign the agreement or are they needing to use knowledge based authentication? In my example, I will leave it set to none. Next, we’ll add an additional participant, which is a setting we enabled just a bit ago in the account settings. Returning to the scenario of a minor and a legal guardian, let’s say the minor visits their school’s website where they have an online form to complete, because they are a minor, they’ll also need to capture a signature from their legal guardian, which only the minor would know the email address at the time of initiating. Adding participants to a web form will give the first participant the ability to enter the name, email address, and a message for the following participant, which again, only they can identify. In my example, I’ll add a participant and make them approver so that you can see what the process looks like when played out. Just like with the initial participant, here too, we can specify an authentication method should it be necessary. We also have the ability to require the first participant to identify the next signer or leave as optional. Finally, we can provide instructions to add additional detail for the first signer to follow to identify the next participant. So I’ll include a message here that says, please identify the appropriate approver for this form, and then select add. We’ve just added two unknown participants where the only thing we are defining for them is the role they’re expected to play and how they should authenticate before viewing and signing the form. Next, we can add the email addresses of counter signers or add ourselves to the workflow of this form, which are participants that we can predefine who will be asked to sign or approve the form only after the unknown participants have participated. We can add carbon copied recipients who will only receive email communications on the progress of the web form, as well as receive the completion email, including a copy of the fully signed PDF once all participants have completed their parts. One of the last things we’ll do on this page before moving on to the next step is add our file. This is the actual document or form that the participants will be completing. I’ll select add files, and as you can see here, we have the ability to access and attach documents from our existing Adobe Acrobat Sign library templates or choose from one of the many cloud storage options such as Document Cloud, Box, Dropbox, and Google Drive. In my example, I’m going to choose a file for my computer and show you the steps of placing and editing form fields on your document. So I’ll select choose files for my computer here and make my selection, which my file is a Word document that I’ll be attaching, but I can attach most file types here, including PDF, Excel files, JPEG images, as well as HTML files, all of which Adobe automatically converts to PDF.

Now that our file has been attached, the only thing that’s left to do is apply additional options, such as password protect the final signed PDF, and/or adjust the language settings for the intended recipients. At last, we can check the checkbox that says preview and add signature fields, and select next so that we can place the necessary form fields on our document before we publish our web form. On this page, we’ll see a preview of the document as well as the location for where I might place and assign form fields to the participants in my web form. I can either manually drag and drop each field from the right hand pane or I can leverage Adobe’s artificial intelligence agent, Adobe Sensei to detect and place the fields for me, saving me time from having to do so myself. As you can see here, Adobe Sensei did a nice job of detecting and placing most of the form fields on the document for us, going as far as detecting field type for both my signature and date field. The next thing we’ll do here is go through and review each of these fields, which we’ll do for a couple of reasons. First, we want to make sure the fields have been given the needed properties such as making the field optional or required for the participant to interact with. We’ll also want to make sure that each field has the necessary name that we can use to identify the data by when exporting the consolidated form field data to a spreadsheet. With this first field, you can see that the field was named custom field 1 by default. We’re gonna go ahead and rename that to full name. We can also adjust the field assignment from here, which we’ll leave as participant 1. Field type is indeed text input, so we’ll leave that. Then finally, we want to make sure this is a required field, that our participant will be required to complete before they can submit the web form. Onto our next field, which I’ll delete so that I can drag over a dropdown field, that way I can provide our participant with a dropdown list to choose a value from versus typing in the value themselves, which we’ll be using to ask our signer to choose from a list of all 50 states in the US. We’ll select edit, and the first thing we want to do is rename this field, which I will call…

Options include some sample values by default, option one and option two, which we’ll be replacing with a list of all 50 states in the US that I was able to simply copy and paste from a site I found online. Finally, we’ll make this field required and then select okay.

Onto our next field, which we’ll use to capture our participant’s favorite color. I’ll take the same steps as I did with my first field and change the default name to color, make the field required, and then select okay. The next section of our form is asking the participant if they have a pet, and if so, what kind? Here we can leverage radio buttons as well as form field logic that will allow us to show or hide fields based on the value of another field. With that, I’ll select the radio button field from data field in the pane on the right and we’ll drag and drop it to its place on the form. Selecting edit will then allow us to name the radio button group, which I’ll call pet. Next, I want to change the default value from zero to yes, make the radio button group required, and then select okay. And then for the second option, I’ll change the value from one to no.

Onto the next field, where we’ll leverage conditional logic to show this field only if yes is selected from the radio button group above. So let’s walk through the steps of achieving that. First, I’ll name the field and call it pet kind. Then I’ll make this a required field and then come down to the condition section of the field where I’ll specify that I want to show this field when any of the following conditions are true. The condition in this case, is pet = yes, and now we know that this field will appear and be required only if yes is selected from our radio button group called pet. Alright, I’ll go ahead and select okay, which leaves us with the signature section of our form to review, which Adobe Sensei automatically placed and detected the field types appropriately that we can see as we click into each. And now that we’ve gone through the process of preparing our form with the necessary form field and field properties, we’re now ready to select save. We’ll now have the opportunity to access and use the URL to send participants a hosted version of the agreement or add to your website and copy the code and paste it into your HTTL for an embedded signing experience, which we can see an example of how the embedded form will look below. If you close out of this window before copying the URL or HTML, you can simply get back to that view by going to the manage page, selecting web forms, clicking into the desired web form, select get code, which will return us back to the view where we can access the needed URL or HTML. We just covered the steps for creating a new web form in Adobe Acrobat Sign. We went over the available options for customizing the workflow of the web form, as well as walk through the steps of uploading and placing form fields on the form itself. Finally, we went over where to go to access and what to do with the web forms provided HTML or web link based on how you plan to make the form accessible for your signing participants. It’s poll time again, we’d love to know, who is in our audience today? Now that we’ve gone over the steps for creating a new web form, we’re now going to show you what the signer’s experience can look like as well as show you how to track, manage and export the form data of your published web forms.

Regardless of how you share your Adobe Acrobats Sign web forms, the experience of the signer will mostly remain consistent, aside from how and where the form is being accessed. While some web forms are shared and made accessible to participants through an embedded experience on a website, others are shared as a URL in other forms of communications, such as email. Let’s take a look at that experience as well as walk through the process of managing, tracking, and exporting the data of a published web form. In this example, we can fully interact with the embedded form and play the part of the initiating signer, who is required to complete the required fields of this web form before they can identify the next signer and move the process along. The other option is copying and sharing the URL in hyperlinking on a site or sharing in another form of communication, which when selected, will redirect the participant to a page that’s solely used to host the web form, which we’ll take a look at now as we play the part of the first signer. Here, we’ll acknowledge that we’ve read and agreed to the terms before the document is displayed for us. We can see the options available for the signer. Now we’re able to go through the process of completing the document. I’ll enter in the name of our test participant, Ivanna Sign, select that Ivanna lives in Florida, which we’ll make the selection from a predefined dropdown. Next, we’ll enter in her favorite color, red, and then specify if she has a pet or not. Selecting yes will make our conditional field appear where she’s then required to enter the type of pet she has, which we’ll say she has a pet tiger. Okay, just one field left here, which is clicking to sign. She can either type her name or draw her signature. I’ll use the type option where Acrobat Sign chooses a signing font for her. And now that she’s applied her signature and completed all required fields, we’re now able to select click to sign. It is at this point where the first participant is asked to identify the second participant and can see the message that was included as instructions when this web form was created. Ivanna will then enter in the first name, last name, and email address of the appropriate approver and then enter in a private message that the participant will receive in the email, notifying them to take action. Selecting next will then ask Ivanna for her own email address, so that she can receive a copy of the fully signed PDF as soon as all participants have taken action. This will also be the email address where Ivanna will receive a verification email, confirming her address before the web form is sent to the next participant. After entering in her email address and selecting click to sign, she has just one more step to take, which is to go to her inbox to click the link in the email she just received, asking her to verify her email address. Switching to Ivanna’s inbox, we can see the email she just received asking her to confirm her email address, and once verified, her part of the process is now complete and the agreement is now off to the second participant for their approval. Requiring the signer to verify their email address for web forms is a setting that can be enabled or disabled based on your preference. Next, we’ll play the part of the second participant, where we can see the email that came through indicating that it’s our turn to participate now that Ivanna has completed her part. Clicking into the link will allow us to view and approve the document as well as see the message that Ivanna specified when defining the second participant. We can review the form in its entirety, including the fields completed by Ivanna and then finally, we’re able to approve and complete the process by selecting click to approve. All parties have completed signing at this point and we now have a copy of the fully signed and approved PDF as well as the audit report. Alright, so now what if we wanted to manage and track these web forms that are being completed or in progress, what does that process look like? Well, if we come to the manage page of our Adobe Acrobat Sign account, it’s as simple as going to web forms here. Here we can see our sample web form that we had set up earlier, and if we click into that, we’ll immediately see additional options on the right-hand side, where we can see some basic details such as the status, which we see the web form here is active. We also see some actions that are available here that allows us to open the web form, get the code, edit the web form, download the PDF or even the form field data, and then here, we can see some additional actions available, such as downloading the individual files, sharing, identifying a new owner for this web form, hide web form or add notes. Down below, we can see that three agreements have been initiated from this web form, two of which have been completed, the other that is still awaiting the second participant. We also see some other high level details around the activity relating to this web form. Clicking into the agreements, we can now see all three of the transactions that we can view the details of individually, zero in progress, one waiting my signature and two that have been completed. Clicking into the transaction that Ivanna initiated, I can select open to view the individual and fully signed PDF for this web form. I can download this PDF, the audit report, as well as the form data. We can also see the recipient details for this agreement, including other details, such as the activity that shows us the sequence of events that took place. Let’s say we now want to export the form field data for all of the agreements that have come from this web form, where we’d want to view the data in a consolidated way so that we don’t have to look at each individual file to get this information. In order to do this, it’s as easy as clicking into the web form and then coming over to the right here to select download form field data. Doing so will download a CSV that will show us the status of our agreements as well as the form field data that’s been captured. Here in the CSV file, we can see the agreement name, the date the form was completed, email address of each participant, including the role they played, first, last name, pet, pet kind, favorite color, and state, which were the input fields we included on our document when setting up the web form. We also see additional transaction details including the unique transaction ID for each agreement. Again, this provides us a convenient way to view the consolidated information that’s been captured with the web form without having to look at each completed form one by one. We just went over the web form participants experience as well as walk through how you can track, manage, and export the form data of your published web forms. I have another poll for you. Have you ever used web forms for capturing signatures? Now that we’ve gone over the web form participants experience in how to track, manage and export the form data of your published web forms, we’re now going to show you the options available for editing existing web forms.

In some cases, you might need to make slight changes to your existing Adobe Acrobat Sign web forms, which might require you to disable it, so that anyone who has access to the web link cannot interact with the form until it’s been enabled again, or the web form may have served its purpose and no longer needs to be activated. Whatever the case might be, Adobe Acrobat Sign makes it extremely easy to make the necessary changes to your published web forms. Let’s take a closer look. To edit and maintain existing web forms, the process is as easy as returning to the manage page and then locating the web form that we want to change. At the very top, you’ll see that the status is listed here as active, and to disable this web form, it’s as easy as selecting disable, which we might disable it for a number of reasons. We might disable the web form if we need to make slight changes to it and make sure that anyone that has access to the web form’s URL isn’t able to interact with the document as it currently is. We might also disable this web form if it has served its purpose and we no longer need to use it, so let’s go in and let’s select disable to show you what happens here. Immediately, you’ll see you have the options to redirect the signers to another webpage. Again, just in case they have that URL. Then it specifies here, the format that we should use. We also have the ability to select the option for signers to see a custom message when trying to access the disabled web form, which I’ll type in a message here that says, this web form is no longer available, and then we’ll select disable. So what does that look like on the signer’s end if they happen to access the URL when disabled? You can see here in my other window that the signer will simply see the message that we just defined moments ago. Alright, so let’s return back now to our web form and let’s say that while it’s disabled, we need to make some changes to it. If we were to do that, we would simply come over to actions here and select edit web form. What that will do for us is it will allow us to come over to this edit view that lets us know immediately that the changes that we applied to this web form will be applied to its original URL. So what can we edit here? Well, we can change the name of the web form and while we can’t change the participant workflow, we do have the ability here to completely remove this form if necessary, add additional files or we can select next, which will navigate us back to the authoring environment where we can make the needed changes to the documents form fields. Once we’ve gone in and have made the necessary changes to the web form, we’re now ready to return to the managed page to reenable, which is as easy as selecting enable. Returning to the web form’s URL that we have opened in our webpage here, we can see that we’re no longer getting that message and can now begin interacting with this form once again. We just went over the steps for how to edit an existing web form. We covered how to disable and enable the form, the result on the signing participants end, as well as how to make changes to the form itself, whether we’re replacing the document altogether or simply making a change to the form fields on the existing document. I have one last poll for you. As always, we want to know if you learned something new today? Today, we showed you how you can get started with Adobe Acrobat Sign web forms, and the steps to create, publish, and maintain fillable and signable forms that you can embed on your website or simply share as a web link. As a reminder, this session has been recorded and will be available within 24 hours, right here where you joined today. You’ll also receive an email with a link to the recording for on-demand viewing. Before I let you go today, let me point out a few resources you can bookmark to help you find answers to any questions we weren’t able to get to today. We’ve dropped those links in the Q&A pod. The first is the Adobe Help Center, where you’ll find user guides, tutorials, and can use the search function to find what you are looking for. Next is the Adobe Experience League. Here, you can access a vast library of learning content and courses, get personalized recommendations, and connect with fellow learners. The Acrobat Sign Support Community is another resource where you can view past discussions, join current ones or start your own. These monthly Skill Builder webinars are at great place to learn new skills or brush up on existing. You can register for future events and watch past webinars on demand. And finally, the Acrobat Sign Resource Hub is a one-stop shop for everything Acrobat Sign. It includes tips and tricks, tutorials, customer stories, the latest integrations and more. We’re always updating and adding to it, so be sure to check back frequently. Thanks for joining. I’m Weston Romero, and this has been another session of Adobe Acrobat Sign Skill Builder. Happy signing. (upbeat music)