Text or Pill Style Checkbox for Custom Contact Form

Design help General
1

Hey Y’all,

I’m trying to figure out how to create a text style checkbox for my contact form. Rather than having a dropdown, checkbox, or radio button, I’d like to have text that is highlighted when clicked.

Sure I can make that happen with a hover over or click interaction but I’d like multiple options. This also needs to connect to the contact form as an element/text field.

The example that I’m trying to replicate can be found here: https://deicreative.com/approach/ (click: “Get in Touch”).

Any help would be greatly appreciated.

Cheers

2

Welcome to the forum @Kevin_Mooney . An interaction will be your best option here. As far as the connecting bit, that’s an anchor link Section link | Webflow University

3

@sarahfrison Thank you for your reply.

The feature I’m trying to replicate is the contact form itself. More specifically, the multiple “text” checkbox feature.

So then you click, get in touch, the page scrolls down to the contact form. That contact form has multiple awesome features like the ability to type your name in-line and then choose from multiple options in a “checkbox” format.

Any thoughts on how to replicate this?

Your answer is greatly appreciated.

Cheers
Kev

5

@Kevin_Mooney - I was actually looking for a good example of this last night, but didn’t find one and went to sleep :stuck_out_tongue:

Generally people will hide the actually form input element and then use either the label or the before/after psuedo elements to add the styling they like. Then by using the :checked css selector you can change the style of the label or the element.

See this example using nothing but HTML & CSS:

And a more boring one from W3:

6

Kinda rude not to wait for my reply @Kevin_Mooney , I was building you prototype as we speak :joy:

7

@sarahfrison :man_shrugging: Under the gun, sorry. I’m open to all answers.

8

Here you go @Kevin_Mooney https://inline-form-830443.webflow.io/. Hasn’t got a way to indicate that the checkbox was actually checked yet. Do keep in mind it still has to be accessible too :wink:

9

@sarahfrison I’d love to get a read only link for this. I’m wondering if I can just add an interaction for on-click to change the text to bold…

10

Here’s the link and it’s cloneable in the showcase too. Read-only: https://preview.webflow.com/preview/inline-form-830443?utm_medium=preview_link&utm_source=dashboard&utm_content=inline-form-830443&preview=4ef6b5fd7eea72a9bd256158069781f3&workflow=preview. showcase: https://webflow.com/website/inline-form-830443 . (do thank me later :wink: )

11

@sarahfrison Thank you for this.

12

@Kevin_Mooney prototype now has a ‘click to select’ effect too

13

@sarahfrison for some reason when I clone the project again, it doesn’t have the effect :man_shrugging: but this is exactly what I’m trying to do.

14

ha, odd, is the interaction still there in the interactions menu?

image
image1611×789 66.3 KB

Here’s how it’s built
image
image1600×789 68.1 KB

15

No it is not. I don’t know what is going on. Maybe a cache thing?

16

not sure either, it’s a basic interaction so it doesn’t take long to rebuild :slight_smile: .

17

Okay, if you could leave it up for some time that would be really great. I’m working on another section and will need to come back to this. I like how you’ve removed the checkbox margin so the text isn’t offset.

18

Yes, totally. Webflow mods have unlimited projects so it’s there to stay :slight_smile: