Monday December 21, 2020 By David Quintanilla
How to Customize Contact Form 7 for WordPress: Floating Labels

You may need seen types the place the placeholder textual content is animated once you begin typing into that enter. This sample isn’t new, but nonetheless stays a well-liked development in UX kind design.

Immediately, we’ll be taught the steps wanted for including this habits right into a kind constructed with Contact Form 7 (CF7), probably the most standard WordPress contact kind plugins accessible.

What We’ll be Constructing

Right here’s a fast video demo of the WordPress kind in motion:

Notice: This tutorial assumes that you’re considerably acquainted with WordPress and Contact Type 7.

Contact Type 7 Plugins on Codecanyon

Taken with extending your Contact Type 7 shortly and simply? Codecanyon is home to loads of scripts and plugins to take your CF7 types to the following stage. For instance, Multi Step for Contact Form 7 Pro is an effective way to enhance the UX of your lengthy types:

Multi step contact form 7

With that mentioned, assuming that you simply’ve put in Contact Type 7 to a WordPress challenge, let’s get again into the tutorial and talk about the steps wanted for animating our CF7 kind labels.

1. Take away Pointless Tags

Step one is to take away the additional tags that Contact Type 7 throws within the kind.

The extra tags that Contact Form 7 throws in the form

To do that, we’ll set the worth of the WPCF7_AUTOP constant to false within the wp-config.php file, like this:

Change the value of the WPCF7_AUTOP to false

2. Create the Contact Type

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

Contact Form 7 Shortcode

We’ll use a mix of Contact Type 7 shortcodes together with some customized HTML.

The shape will encompass two enter components, a textarea factor, and a submit button. Additionally, we’ll affiliate every of the enter and textarea components with a label factor. Every label will behave as a placeholder.

Right here’s the code that we have now so as to add to the Contact Type 7 editor:

3. Add the CSS Type Types

Shifting on, we’ll enqueue a brand new CSS file within the features.php file of our challenge, like this (your vacation spot folder could differ although):

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

  • We’ll begin with some reset (generic) ones. Simply to make the shape somewhat extra engaging, we’ll use a customized Google Font. Make sure to enqueue this font if you wish to use it in your challenge.
  • Subsequent, we’ll outline the primary types for our kind. As we’ll see later, the shape will obtain the form-with-animated-labels class. It will assist us isolate it and keep away from conflicts with different types.
  • Lastly, we’ll customise somewhat bit the looks of among the CF7 response messages.

Most significantly, take a look at how we model the labels. These are completely positioned components and vertically centered inside their .form-wrapper mother or father. As we’ll see in a bit, when their associated kind factor receives focus, they are going to be moved on high of it by way of the centered class. 

Listed below are all of the required types:

Notice: For this instance, I’m utilizing a vanilla theme. Relying in your theme although, a few of these types could also be overridden. Provided that truth, if the shape doesn’t seem as anticipated in your challenge, you’ll want to test your theme types and make the mandatory modifications. 

Tip: You need to use conditional tags to load this CSS file solely on the pages that embrace the shape.

Why a CSS-Solely Strategy Received’t Work

Earlier than transferring on, let me make clear one factor.

You might have most likely seen many CSS-only implementations for creating floating labels on the net. These primarily reap the benefits of the “CSS checkbox hack method”. Certainly, it’s a really useful method which we have now mentioned many instances within the past.

Sadly on this case, we can’t use it. In the event you examine the markup that’s generated from Contact Type 7’s shortcodes, you’ll discover that every one kind controls are wrapped inside a span factor.

Wrapper around a form control in Contact Form 7

Because of this, the controls and their related labels aren’t siblings and a method like this gained’t have any impact:

4. Add the JavaScript

As a subsequent step, we’ll enqueue a brand new JavaScript file within the features.php file of our challenge, like this (your vacation spot folder could differ although):

Inside it, we’ll carry out the next actions:

  1. Loop via all of the .form-with-animated-labels types.
  2. For every kind, we’ll seize its goal controls (enters, textarea). In your case, these could differ.
  3. Then, for every management, we’ll pay attention for the focus and blur occasions. These occasions will probably be liable for animating the labels by toggling the centered class which we outlined earlier.
  4. Lastly, we’ll use one among CF7’s AJAX events to convey again the labels to their preliminary place. Be at liberty to make use of any of these occasions based on your wants.

Right here’s the corresponding JavaScript code:

Tip: You need to use conditional tags to load this JavaScript file solely on the pages that embrace the shape.

5. Name the Contact Type

Final however not least, we’ll embrace the generated Contact Type 7 shortcode within the desired a part of our challenge:

Discover the category added by way of the html_class attribute. That is our acquainted form-with-animated-labels class.


And we’re carried out, people! On this brief tutorial, we mentioned a easy methodology for customizing the feel and appear of a Contact Type 7 kind by including floating labels. I’m positive there will probably be different efficient options as properly, but this one appears to do its job! Hopefully you’ll give it a attempt in one among your upcoming WordPress tasks.

Have you ever ever created such an impact with Contact Type 7? Have you ever managed to give you a CSS-only answer? Share your ideas within the feedback under.

As all the time, thanks loads for studying!

Extra Contact Type 7 Customization and Floating Labels

In case you are curious to learn to construct a responsive handmade SVG kind with Contact Type 7, or want to dive deeper into floating labels, check out these tutorials:

Source link