How to add a form to your website?

There are several ways to add a document that needs to be signed to your website. The two main options are:

1. Add a normal HTML form to your site

2. Add a SignRequest signing link to your website

Option 1 will take a little bit more effort but will offer you the benefit that the information added to the form by your signer will automatically be pre-filled into the document. 

Option 2 is relatively simple to implement but in that case, the signer will need to add all their data into the fields while signing instead of in the website form. In addition, it's more difficult to combine it with a standard (already existing) form on your website.

Other options will require the SignRequest API and require more technical knowledge from your developers. 

For an example of the two options have a look here: Examples signing directly from a website.

For a Dutch example of a tax form have a look here: Example of a form on a website

 

1. Add a normal HTML form to your site

1.1 Make a SignRequest template of the document

First, you'll need to make a template. You can do this using template tags or by adding the fields within SignRequest itself. For more info on templates have a look here: Create a template.

While making a template for a form the fields of the 'Sender' are for your website visitor. (Note that this is different for a normal template.) If you need to sign as well then designate yourself as 'Contact 1'. If you simply use an image of your own signature or don't need to sign you can designate 'Contact 1' as 'Copy only'.

Make sure to give every field that you want to be pre-filled a clear name (External ID) which will be used in step 2 as well.

(Note that the use of IDs not only works for pre-filling but also to retrieve any data that is added to the document while signing which can later be exported into an excel file.) 

 

1.2 Make a form on your website

You can make a normal HTML form on your website or simply copy paste our code on the site. Give every form field an appropriate name, preferably the same name as the external ID name in step 1.1.

 

1.3 Add the Javascript code

1.3.1 Copy and paste the necessary Javascript.


"use strict";
!function(t,e,n,i){var s=function(e,n){t.SignRequest&&t.SignRequest.loaded||setTimeout(function(){t.SignRequest.init(e,n)},50)};t.SignRequest=t.SignRequest||{loaded:0,init:s};var o="https:"==e.location.protocol?"https://":"http://",u=e.createElement("script");u.async=!0;var c=e.scripts[0];u.src=o+"cdn.signrequest.com/signrequest-js/v1/signrequest-js.min.js",c.parentNode.insertBefore(u,c),t.SignRequest.init(n,i)}(window,document,{
// this initial configuration is optional, may also be undefined
subdomain: ''  // you could for example initialize the library to use a specific team subdomain here
}, function (SignRequest) {
// this callback is optional, may also be undefined
// SignRequest library is loaded and also passed as first argument
// execute your code...
var template_form = document.getElementById('template_form');
template_form.onsubmit = function (event) {
event.preventDefault();
var form_data = SignRequest.browser.serializeFormAsObject(event.target);
// the template id can be found in the link visible when editing a template and clicking the
// 'Show public signing link' button.
// this example template has a template tag with the external_id: 'city'.
var prefill_tags = [{external_id: 'city', text: form_data.city},{external_id: 'country', text: form_data.country},{external_id: 'address', text: form_data.address},{external_id: 'postal', text: form_data.postal},{external_id: 'signer', text: form_data.signer},{external_id: 'company', text: form_data.company}];
console.log('Using prefill_tags: ', prefill_tags);
var tab = SignRequest.browser.signTemplate('ef09fddda3ef3ec733527a9c26409a28403931e88e6a23ce12cb83166f5f559c', {
	email: form_data.email,
	next: '/en/example-signed/',
	prefill_tags: prefill_tags
	});
	tab.onAny(function (event_type, payload, event) {
	console.log(event_type, payload, event);
});
return false;
};
});

 

1.3.2 Map the form fields with the appropriate external ID's which you defined in 1.1.

In 'var prefill_tags' make sure to map the external IDs with the form data. 

 

1.3.3 Generate the public signing link from your template and replace the ID of the template with the ID in your public signing link. 

SignRequest-signing-link.png 

Example of a public signing link:

https://example-team-forms.signrequest.com/#/sign-template/cbb2640b1a8fc806e54000dfdfa31d8244b780988d6024a8f365873425cf1adc/?p=1&no_phone=1

After adding the ID (in the example in bold letters) you're ready to have your customers sign the document online!

 

2. Add a signing link to your website

The simplest way of adding a document that needs to be signed to your website is to use a public signing link.

 

2.1 Create a SignRequest template

This is the same step as in 1.1 of this article. It is however not necessary to add external ID's because the document will not be pre-filled. You can, however, decide to add these ID's in case you want to export the signer input at a later stage.

 

2.2 Generate the public signing link from your template

This is the same step as in 1.3.3 from this article with the exception that you'll use the entire link and not just the ID.

In addition, you can add extra logic to the link. Especially removing the need for using a text message verification is often implemented.

Add "no_phone=1" to the URL to remove the need for a text message verification.

Example link: https://example-team-forms.signrequest.com/#/sign-template/cbb2640b1a8fc806e54000dfdfa31d8244b780988d6024a8f365873425cf1adc/?p=1&no_phone=1

 

2.3 Add the link to your website

You can now add this link to your website in the exact same way you would add any other link. 

Was this article helpful?
4 out of 7 found this helpful

Comments

0 comments

Article is closed for comments.