Streaming live at 10am (PST)

How to add a tick box to a form


#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!


#6

that'd be kinda amazeballs 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.


#9