In this example, we're going to be implementing a clickwrap agreement out of the box for a website registration form as demonstrated hereA “group” inside of PactSafe is a set of agreements you group together to present to your customer on your website in a form like this:

Check out this video to get a quick look at how to create your agreement group, give it a name, add your agreement to it, and save it:




There are a few options to help you load your legal agreements into your page. These options are configurable through the user interface. Here are the most important ones:

 

Key

The key is what you will use to programmatically load your group onto your web page. It’s automatically named by our system.


Style

Style determines how the agreements will render if you choose to use the PactSafe library to render your agreements. You can also render the agreements on the page and simply send the “agreed” status programmatically.


Signer ID Selector

Optional, Requires HTML knowledge. In your form where we’re capturing your opt in or purchase, the Respondent ID Selector automatically listens to a form field with the CSS ID of your specifying.


An example form for sign up might look like this:

<form action="..." method="post" id="form1" class="form">
<div>
<label for="first-name">First name:</label>
<input type="text" name="first_name" id="first-name" />
</div>
<div>
<label for="email-address">Email Address:</label>
<input type="email" name="email" id="ps-login-email" />
</div>
<p>By clicking "Submit", you agree to the <a href="#">Terms and Conditions</a>.</p>
<div id="agreements"></div>
<p><input type="submit" value="Submit" /></p>
</form>

The Signer ID Selector of this form would be ps-login-email.

 

Container Selector

Optional, Requires HTML knowledge. If you’d like PactSafe to render the agreements in your form automagically, you can create a <div></div> with a CSS ID that the library will listen for in order to inject the published agreements. The agreements will load based upon the Style you’ve configured for your group.


Note: The Container Selector can also be called as a part of _ps('load')so is completely optional.