Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. CSS

Quick Tip: How to Create an Off-Canvas Feedback Form With Pure CSS

by
Difficulty:BeginnerLength:ShortLanguages:

In this super-quick tutorial, we’ll walk through the process of creating an off-canvas feedback form. We won’t use any JavaScript to accomplish this, in fact, we’ll build it by taking advantage of the “CSS checkbox hack technique”. Sound interesting?

Here’s what we’ll be building:

Let’s get started!

1. Begin With the Page Markup

We’ll start with a checkbox along with its label and a form. Within the form, we’ll put some common form elements.

Keep in mind that the order here matters. First we’ll place the checkbox, then the label, and finally the form.

We’ll associate each form control with its label by setting the id value equal to the label’s for value:

Here’s the page markup:

2. Define Some Basic Styles

Now let’s define a few custom variables to give us our layout scheme plus some reset rules, especially for the form controls:

3. Style the Form Elements

Now onto the mechanics. As a first step, we’ll visually hide the checkbox:

Then, we’ll do the following things:

  • Set the checkbox’s label and form as fixed positioned elements. Additionally, we’ll position them in the center right corner of the page.
  • Display the label’s text in vertical orientation.
  • Hide the form off-canvas. By default, we’ll move it by 100% of its width to the right.

The corresponding styles are as follows:

Next, we’ll add some straightforward styles to the form elements:

Toggle Form

Each time we click on the checkbox’s label, the form should appear or disappear with a slide animation. To make that happen, we’ll take advantage of the :checked pseudo-class, the subsequent-sibling selector (~), and the adjacent sibling combinator (+).

Here are the required styles:

Let's discuss the first three styles above:

  • The first selector looks for .feedback-label elements that immediately follow checked checkboxes. Here, instead of the + selector, we could equally have used the more generic ~ selector. It then smoothly moves those elements right after the form. Notice the Y value of the translate() function which seems a bit chaotic. If you look at a previous rule this is initially -100%. Now it should be -(form width + 100%). To force the calc() function to return a negative value, we’ll multiply the result of the target operation by -1.
  • The second selector looks for .feedback-label elements that immediately follow focused checkboxes. Again here, the ~ selector would work as well. It then gives those elements an outline. This is useful for keyboard accessibility. Use the Tab key to move focus to the checkbox (label). Next, press the Spacebar key to toggle the form state. 
  • The third selector looks for .form elements that follow (even not immediately) checked checkboxes. It then smoothly moves those elements into view by removing the X value of the translate() function

4. Going Responsive

As a last (important) detail, we’ll specify a few rules for mobile screens. This doesn’t involve anything really drastic, we’ll just decrease the form width from 500px to 320px.

The responsive styles:

Conclusion

That’s it, folks! Without putting too much effort into this, we managed to implement a useful off-canvas feedback form. I hope you enjoyed this exercise and learned some new things which you can put into practice in the near future.

Let’s look again at what we built:

As always, thanks for reading!

Front-End Projects: Further Learning

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.