How to add a tick box to a form

Design help General
1

I’m creating a registration form for our application and part of the requirement is to add a tick box that allows the user to opt-in to our email marketing database.

I don’t need to tick box to do anything at the moment - our developers are likely to tweak and add their own code, but I do need to visually represent the functionality.

Any help?

2

Find an image on the web and upload it? If you wanted interaction, you could create a basic div block, give it a class name such as “tick” with a small border and set the background color to white, then add another class called “tick-active” and change the background color (to be the visually selected color). Then remove the extra class and add the following script:

<script src="http://code.jquery.com/jquery-2.0.3.js"></script>
<script>
$(function(){
  $('.tick').on('click', function(){
    $(this).toggleClass('tick-active');
  });
});
</script>
3

Hi @kain, you can insert a checkbox using an Embed block. Try pasting this into an Embed:

<input type=checkbox> Hello</input>

In order to further style the label on that checkbox, you might want to wrap it in a <span> tag and give it a custom class which you would have defined elsewhere in webflow. For example:

<input type=checkbox><span class=inputlabel>Hello</span></input>

“inputlabel” would be defined on another element, which allows you to edit the style and instantly see the result on the nested span tag.

Hope that helps!

4

Thanks @danro and @pingram3541 - i’ll give these a try.

Any ideas on when tick boxes might get added to the development roadmap?

5

Hey @kain, we’re working on native drop down and checkbox support in the next few weeks - should land by the end of the month!

1 Like
6

that’d be kinda amazeballs :slight_smile:

7

Hey it’s been a few months guys, this is basic stuff for most sites, cmon please do this asap

8

@callmevlad I think it would be awesome if we could add textbox WITHOUT forms. I don’t want to use embed-html since it’s little messed up… It would be best if we could simply drag&drop <input type="text" /> tag in webflow without using forms. Reconsider this, please.