Monday, December 21, 2020

How to Customize Contact Form 7 for WordPress: Floating Labels

You might have seen forms where the placeholder text is animated when you start typing into that input. This pattern isn’t new, yet still remains a popular trend in UX form design.

Today, we’ll learn the steps needed for adding this behavior into a form built with Contact Form 7 (CF7), one of the most popular WordPress contact form plugins available.

What We’ll be Building

Here’s a quick video demo of the WordPress form in action:

Note: This tutorial assumes that you are somewhat familiar with WordPress and Contact Form 7.

Contact Form 7 Plugins on Codecanyon

Interested in extending your Contact Form 7 quickly and easily? Codecanyon is home to loads of scripts and plugins to take your CF7 forms to the next level. For example, Multi Step for Contact Form 7 Pro is a great way to improve the UX of your long forms:

Multi step contact form 7

With that said, assuming that you’ve installed Contact Form 7 to a WordPress project, let’s get back into the tutorial and discuss the steps needed for animating our CF7 form labels.

1. Remove Unnecessary Tags

The first step is to remove the extra tags that Contact Form 7 throws in the form.

The extra tags that Contact Form 7 throws in the form

To do this, we'll set the value of the WPCF7_AUTOP constant to false in the wp-config.php file, like this:

Change the value of the WPCF7_AUTOP to false

2. Create the Contact Form

The second step is to create the form from the WordPress dashboard. 

Contact Form 7 Shortcode

We’ll use a combination of Contact Form 7 shortcodes along with some custom HTML.

The form will consist of two input elements, a textarea element, and a submit button. Also, we’ll associate each of the input and textarea elements with a label element. Each label will behave as a placeholder.

Here’s the code that we have to add to the Contact Form 7 editor:

3. Add the CSS Form Styles

Moving on, we’ll enqueue a new CSS file in the functions.php file of our project, like this (your destination folder may differ though):

Inside it, we’ll place a bunch of styles:

  • We’ll start with some reset (generic) ones. Just to make the form a little more attractive, we’ll use a custom Google Font. Be sure to enqueue this font if you want to use it in your project.
  • Next, we’ll define the main styles for our form. As we’ll see later, the form will receive the form-with-animated-labels class. This will help us isolate it and avoid conflicts with other styles.
  • Finally, we’ll customize a little bit the appearance of some of the CF7 response messages.

Most importantly, have a look at how we style the labels. These are absolutely positioned elements and vertically centered inside their .form-wrapper parent. As we’ll see in a bit, when their related form element receives focus, they will be moved on top of it via the focused class. 

Here are all the required styles:

Note: For this example, I’m using a vanilla theme. Depending on your theme though, some of these styles may be overridden. Given that fact, if the form doesn’t appear as expected in your project, be sure to check your theme styles and make the necessary changes. 

Tip: You can use conditional tags to load this CSS file only on the pages that include the form.

Why a CSS-Only Approach Won’t Work

Before moving on, let me clarify one thing.

You have probably seen many CSS-only implementations for creating floating labels on the web. These mainly take advantage of the “CSS checkbox hack technique”. Indeed, it’s a very handy technique which we have discussed many times in the past.

Unfortunately in this case, we cannot use it. If you inspect the markup that is generated from Contact Form 7’s shortcodes, you’ll notice that all form controls are wrapped within a span element.

Wrapper around a form control in Contact Form 7

As a result, the controls and their associated labels aren’t siblings and a style like this won’t have any effect:

4. Add the JavaScript

As a next step, we’ll enqueue a new JavaScript file in the functions.php file of our project, like this (your destination folder may differ though):

Inside it, we’ll perform the following actions:

  1. Loop through all the .form-with-animated-labels forms.
  2. For each form, we’ll grab its target controls (inputs, textarea). In your case, these may differ.
  3. Then, for each control, we’ll listen for the focus and blur events. These events will be responsible for animating the labels by toggling the focused class which we defined earlier.
  4. Lastly, we’ll use one of CF7’s AJAX events to bring back the labels to their initial position. Feel free to use any of those events according to your needs.

Here’s the corresponding JavaScript code:

Tip: You can use conditional tags to load this JavaScript file only on the pages that include the form.

5. Call the Contact Form

Last but not least, we’ll include the generated Contact Form 7 shortcode in the desired part of our project:

Notice the class added via the html_class attribute. This is our familiar form-with-animated-labels class.

Conclusion

And we’re done, folks! In this short tutorial, we discussed a simple method for customizing the look and feel of a Contact Form 7 form by adding floating labels. I’m sure there will be other effective solutions as well, yet this one seems to do its job! Hopefully you will give it a try in one of your upcoming WordPress projects.

Have you ever created such an effect with Contact Form 7? Have you managed to come up with a CSS-only solution? Share your thoughts in the comments below.

As always, thanks a lot for reading!

More Contact Form 7 Customization and Floating Labels

If you are curious to learn how to build a responsive handmade SVG form with Contact Form 7, or would like to dive deeper into floating labels, take a look at these tutorials:

No comments:

Post a Comment