Jump to content
horst

CSS TIP: Send form only with active GDPR checkbox

Recommended Posts

... ...and show it visually!

Following is a snippet, not a tutorial. But maybe it is useful for someone.

Everyone knows the possibility to define a checkbox as required. However, a submit button would then visually execute the click movements and show the active color on hover.

Depending on the status of the checkbox, you can either disable the functionality of the submit button via CSS ( pointer-events: none; ), or display a not-allowed cursor. But IMO, each of the two is asking for the other. If you embed the button in a wrapper element, you can marry both of them together.

 

<fieldset class='gdprconsent'>
	<input type='checkbox' name='gdprconsent' id='gdprconsent' required='required' autocomplete='off' />
	<label for='gdprconsent'>I agree to the privacy policy.</label>
	<div class='submitWrapper'>
		<input type='submit' name='submit' id='submit'  value='Submit'>
	</div>
</fieldset>
#gdprconsent:not(:checked) ~ div.submitWrapper {
	cursor: not-allowed;
}
#gdprconsent:not(:checked) ~ div.submitWrapper > input[type='submit'] {
	pointer-events: none;
}
#gdprconsent:checked ~ div.submitWrapper > input[type='submit'] {
	cursor: pointer;
}

1040045286_css--pointer-event-none-pluscursor-not-allowed.gif.e7a28e8c7ef91e3c5fc4834ec7ccf7da.gif

 

  • Like 4
  • Thanks 1

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...