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> tag and a JavaScript snippet to work. Place the <div> tag where you intend to place the consent statement on your site. The target element must be located inside the <form> element of the signup form that requires consent.

Give the <div> a unique ID attribute value such as signup-consent in the one shown 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.

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.

Multiple submit buttons

You might have a form with multiple buttons that can cause the form to submit.

For example, imagine that you have implemented the signup consent on a shopping cart checkout page. You might have two buttons that trigger a form submit:

<form>
<div id="signup-consent"></div>
<button name="updateItemsBtn">Update items</button>
<input type="submit" name="checkoutBtn" value="Checkout" />
</form>

An update button and the actual checkout button. In this case, you probably do not want the update button to run the signup consent validation.

We provide you with an option to specify the submitTargetName option with the element name of the actual checkout button:

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

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>