Collect consent

Collect consent from your users integrated with all forms.

Legal.js is currently in beta.

Add consent collection to your form

Make sure that you have followed the setup instructions in the setup section.

Signup consent requires both a <div> element and a JavaScript snippet to work. Place the <div> where you intend to place the consent statement in your form. The target element must be located inside the <form> element that requires consent.

Give the <div> a unique ID attribute value such as signup-consent in the example below:

<form>
<div id="signup-consent"></div>
<input type="text" name="fullname" value="Type your name" />
<input type="submit" name="checkoutBtn" value="Checkout" />
</form>

This element is the target element and is replaced with our widget, so it is perfectly fine to just use an empty <div> element as shown here. If you cannot alter the HTML of your page, you can still use our signup consent. See the section on adding a target element. If you have several buttons with a submit action (such as updating a cart as well as checking out), see the section on multiple submit buttons.

Next, you insert the signup consent by calling the legal.signup() method in a <script> section, providing it with the ID you gave to your target element:

<script>
legal.signup("signup-consent");
</script>

Add target element (alternative)

If you are restricted and cannot change the HTML of your page, the legal.signup() method offers some options to add the signup consent before or after an existing target element that you choose.

Currently, the element must already have an ID attribute, and

<script>
legal.signup("target-element-id");
</script>

The above code searches for a target element with the ID target-element-id and replaces that element with the widget.

You can use theinsertMode option to change how and where the signup consent is placed in relation to the target element:

<script>
legal.signup("target-element-id", {
insertMode: "append",
});
</script>

You can change the insertion method to one of the following options:

Insertion mode

Description

replace (Default)

Replaces the specified target element with the widget

append

Inserts the widget after the specified target element

prepend

Inserts the widget before the specified target element

Styling options for the Signup widget

You can change the width of the outermost border, and the amount of outermost padding, by specifying the following options:

<script>
legal.signup("signup-consent", {
outerBorderWidth: 2, // Value in pixels
outerPaddingSize: 5, // Value in pixels
});
</script>

To entirely remove the outermost border and padding, set both options to 0 like so:

<script>
legal.signup("signup-consent", {
outerBorderWidth: 0, // Value in pixels
outerPaddingSize: 0, // Value in pixels
});
</script>

This approach can work well in combination with a wrapper element to style the widget more seamlessly within your existing page flow. In your page's HTML, include a wrapper element around the target element:

<form>
<div id="your-wrapper-to-style">
<div id="signup-consent"></div>
</div>
<input type="text" name="fullname" value="Type your name" />
<input type="submit" name="checkoutBtn" value="Checkout" />
</form>

You will now be able to specify custom border, padding, margin, and other styles on the wrapper element.

Please note: Legal Monster continually update the widget to provide improved legal compliance and a better user-experience. You should therefore not assume that the contents of the widget will never change, and you should not constrain the height of the widget.

Collect additional user information

The signup consent feature enables you to collect your users' name and email when they sign up to help identify them. This naturally assumes that your signup form contains input fields for name and email address:

<script>
legal.signup("signup-consent", {
nameInputField: "fullname_field",
emailInputField: "email_field",
});
</script>

The signup consent looks for two <input type="text"> fields. In the above example, these input fields are assumed to have name="fullname_field" and name="email_field" respectively.

This is all you need to start collecting consent in a compliant way from your users! You are good to go.

Note: Collecting name and email does not need to be done when your user signs up. Please see the next section for more information.

Collect user information separately

The legal.user() method lets you attach a full name and an email address to the current user at a later point. When using this method, the current user will be updated in our system with the name and email you define:

<script>
legal.user({
name: "John Doe",
email: "johndoe@example.com",
});
</script>

Of course, if your signup form already provided this information, there is no need to provide it again. However, legal.user() is useful if the user changes their email address or corrects their name.

If you are integrating with a form that already has one or more checkboxes to indicate consent to a particular type of agreement, you can specify that legal.js should control them. This can be useful for providing immediate integration with your existing systems.

The currently-supported categories for consent collection are:

  • Terms of service

  • Privacy policy

  • Email marketing

For a form with the following structure:

<form action="/acme/endpoint" method="post">
<label for="acme-terms">I agree to ACME's terms of service</label>
<input type="checkbox" name="acme-terms" id="acme-terms">
<label>I agree to ACME's privacy policy
<input type="checkbox" name="acme-privacy">
</label>
<span id="email-marketing-label">
Yes, I want to receive email marketing from ACME
</span>
<input
type="checkbox"
name="acme-email-marketing"
aria-labelledby="email-marketing-label"
>
<input type="submit" name="submit" value="Submit">
</form>

This would be the appropriate configuration to control the existing checkboxes, using the controlledConsentFields option of legal.signup():

legal.signup("signup-consent", {
controlledConsentFields: {
// Any CSS selector that matches a single element in your form may be used.
termsOfService: "#acme-terms",
privacyPolicy: '[name="acme-privacy"]',
emailMarketing: "#email-marketing-label",
},
})

Using this option will also automatically hide the checkbox field and any semantically-related labels in the same form, making integration as simple as possible. The labels that will be hidden are:

  • Labels that wrap the checkbox.

  • Labels that have a for attribute with a value corresponding to the label's id attribute.

  • Any other elements (e.g. span) acting as labels that have an id attribute corresponding to an aria-labelledby attribute on the checkbox.

Validation

We do front-end validation to ensure that the user has given the required consent for your form to be submitted.

However, for security reasons, when you process the submitted form, you should validate that the input named legalmonster-consent equals on, the default value of a checkbox.

Defining the name of the validation field

If required, you can define the name of the validation field by specifying the validationFieldName option.

<script>
legal.signup("signup-consent", {
validationFieldName: "consent-validation",
});
</script>

In this example, the validation input name would not be the default legalmonster-consent, but consent-validation.

By default, all submit-buttons in your form will be watched by legal.js, to ensure that the user gives consent before submitting.

Example button within <form>

Can submit form?

Is watched by default?

<input type="submit" value="Submit" />

Yes

Yes

<input type="reset" value="Reset" />

No

No

<button>Submit</button>

Yes

Yes

<button type="submit">Submit</button>

Yes

Yes

<button type="">Submit</button>

Yes

Yes

<button type="button">Non-submitting</button>

No

No

<button type="reset">Non-submitting</button>

No

No

There are situations when this might not be what you want. Using the submitButtons option you can provide a standard CSS selector that matches only the button, or buttons, that legal.js should watch. This option uses the standard Document.querySelectorAll() method internally.

Important: when using the submitButtons option, legal.js will watch only the buttons that are matched by the selector(s) you provide.

When your form has multiple submit-buttons

You might want to implement signup consent in a form with multiple submit-buttons, only some of which should be watched by legal.js. For example, you might have an "Update items" button that does not enter the checkout flow, and therefore does not require that the user gives consent to your agreements.

<form>
<div id="signup-consent"></div>
<button name="updateItems">Update items</button>
<input type="submit" name="checkout" value="Go to checkout" />
</form>

In this case, you probably do not want the "Update items" button to be dependent on the user consenting to your agreements.

By setting the submitButtons option to an appropriate CSS selector, you can target only the button (or buttons) that legal.js should watch:

<script>
legal.signup("signup-consent", {
// Matches all `input` elements anywhere within
// a `form` element, and only when the `input` has
// a `name` attribute with the value "checkout".
submitButtons: 'form input[name="checkout"]',
});
</script>

When your submit-button is outside your form

It is also possible to specify that legal.js should watch one or more buttons outside your form. Simply use an appropriate CSS selector to select the button(s).

For a document structure like this:

<form>
<div id="signup-consent"></div>
<button name="updateItems">Update items</button>
</form>
<input type="submit" name="checkout" value="Go to checkout" />

You might pass submitButtons an appropriate selector like so:

<script>
legal.signup("signup-consent", {
// Matches all `input` elements anywhere within
// the document, and only when the `input` has
// a `name` attribute with the value "checkout".
submitButtons: 'input[name="checkout"]',
});
</script>

You can of course use the flexibility of CSS selectors to match buttons inside and outside your form, by using multiple selectors:

<script>
legal.signup("signup-consent", {
// Matches all `button` elements anywhere within
// the document, and only when the `button` has
// a `name` attribute with the value "checkout".
// Also matches all `input` elements anywhere within
// a `form` element, and only when the `input` has
// a `type` attribute with the value "submit".
submitButtons: 'button[name="checkout"], form input[type="submit"]',
});
</script>

It is important to test that the selector(s) you pass to the submitButtons option match only the buttons you want legal.js to watch, and match all of them.

You can perform a simple test by using the standard Document.querySelectorAll() method in your browser console, and passing it the same selector(s) that you intend to pass to submitButtons.

Example

Here is a simple example of how the signup consent is incorporated into a checkout form:

<form>
<input type="text" name="name">
<input type="text" name="email">
<div id="signup-consent"></div>
<input type="submit" value="Submit">
</form>
<script>
legal.signup("signup-consent", {
nameInputField: "name",
emailInputField: "email",
});
</script>