Een formulier aan je website toevoegen

Er zijn verschillende manieren om een document dat ondertekend dient te worden toe te voegen aan je website. De twee voornaamste opties zijn:

1. Een standaard HTML-formulier toevoegen aan je site

2. Een SignRequest onderteken link  aan uw website toevoegen

Optie 1 is wat ingewikkelder, maar heeft als voordeel dat de informatie die de ondertekenaar invult automatisch wordt toegevoegd aan het document. 

Optie 2 is relatief eenvoudig te implementeren, maar hierbij moet de ondertekenaar alle gegevens in het document invullen in plaats van op een formulier op jouw website.  Daarnaast, is het moeilijker te combineren met een (al bestaand) formulier op uw website.

Andere opties vereisen de SignRequest API en meer technische kennis van uw ontwikkelaars. 

Klik hier voor een voorbeeld van de twee opties: Voorbeelden direct ondertekenen vanaf een website.

Voor een voorbeeld van een Nederlands Loonheffingsformulier: Onderteken je loonheffingsformulier online

 

1. Een standaard HTML-formulier toevoegen aan je site

1.1 SignRequest template van het document maken

Eerst dien je een template aan te maken. Je kunt dit doen met behulp van template tags of door de velden in SignRequest zelf toe te voegen. Kijk hier voor meer info over templates: Hoe maak ik een template?

Bij het maken van een template voor een formulier, de velden van de 'Zender' zijn bedoeld voor de bezoeker van je website. (Let op: dit is anders voor een normale template.) Als je zelf ook wilt ondertekenen, dan ben je zelf 'Contact 1'. Als je een afbeelding van je handtekening gebruikt of helemaal niet hoeft te ondertekenen, stel je 'Contact 1' in als 'Alleen een kopie'.

Zorg ervoor dat elk veld dat automatisch ingevuld dient te worden een duidelijke naam (Externe ID) krijgt. Deze zal ook in stap 2 worden gebruikt.

(Het gebruik van ID's werkt niet alleen voor het vooraf invullen van informatie maar ook om gegevens uit de documenten op te halen en in een Excel-bestand te exporteren.) 

 

1.2 Een formulier op je website aanmaken

Je kunt een standaard HTML formulier op je website maken of kopieer en plak onze code op de site. Geef elk veld een passende naam, bij voorkeur dezelfde naam als de naam van de externe ID in stap 1.1.

 

1.3 De Javascript-code toevoegen

1.3.1 Kopieer en plak de benodigde 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 Benoem de velden van het formulier met de externe ID's die je hebt gedefinieerd in punt 1.1.

Zorg ervoor dat de externe ID's in 'var prefill_tags' overeenkomen met de formuliergegevens. 

 

1.3.3 Genereer de openbare onderteken link uit de template en vervang de ID van de template met de ID in je openbare ondertekening link. 

SignRequest-signing-link.png 

Voorbeeld van een openbare onderteken link:

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

Na het toevoegen van de ID (in het voorbeeld in vette letters) ben je klaar om je klanten online te laten ondertekenen!

 

2. Een onderteken link aan je website toevoegen.

 De makkelijkste manier om een document dat moet worden ondertekend aan je website toe te voegen is een openbare onderteken link.

 

 

2.1 Maak een SignRequest template

Dit is dezelfde stap als in 1.1 van dit artikel. Het is echter niet nodig om externe ID's toe te voegen, omdat het document niet vooraf ingevuld wordt. Je kunt er voor kiezen externe ID‘s toe te voegen mocht je later de data uit de documenten willen exporteren.

 

2.2 Genereer de openbare onderteken link uit je template

Dit is dezelfde stap als in 1.3.3 uit dit artikel met de uitzondering dat je de volledige link en niet alleen het ID gebruikt.

Daarnaast kun je extra informatie toevoegen aan de link. Met name het verwijderen van de sms-verificatie wordt vaak uitgevoerd.

Voeg "no_phone = 1" toe naar de URL om sms-verificatie te verwijderen.

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

2.3 De koppeling toevoegen aan je website

Je kunt nu deze link nu aan je website toevoegen zoals je dat met iedere andere link zou doen. 

 

Was dit artikel nuttig?
Aantal gebruikers dat dit nuttig vond: 4 van 7

Opmerkingen

0 opmerkingen

Artikel is gesloten voor opmerkingen.