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

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

At present, we’ll be taught the steps wanted for including this conduct right into a type constructed with Contact Form 7 (CF7), one of the vital well-liked WordPress contact type plugins out there.

What We’ll be Constructing

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

Word: This tutorial assumes that you’re considerably accustomed to WordPress and Contact Kind 7.

Contact Kind 7 Plugins on Codecanyon

Occupied with extending your Contact Kind 7 rapidly 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 a good 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 Kind 7 to a WordPress venture, let’s get again into the tutorial and focus on the steps wanted for animating our CF7 type labels.

1. Take away Pointless Tags

Step one is to take away the additional tags that Contact Kind 7 throws within the type.

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 Kind

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

Contact Form 7 Shortcode

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

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

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

3. Add the CSS Kind Kinds

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

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

  • We’ll begin with some reset (generic) ones. Simply to make the shape a little bit extra enticing, we’ll use a customized Google Font. Remember to enqueue this font if you wish to use it in your venture.
  • Subsequent, we’ll outline the primary kinds for our type. As we’ll see later, the shape will obtain the form-with-animated-labels class. This may assist us isolate it and keep away from conflicts with different kinds.
  • Lastly, we’ll customise a little bit bit the looks of a few of the CF7 response messages.

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

Listed here are all of the required kinds:

Word: For this instance, I’m utilizing a vanilla theme. Relying in your theme although, a few of these kinds could also be overridden. Provided that reality, if the shape doesn’t seem as anticipated in your venture, make sure you test your theme kinds and make the required modifications. 

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

Why a CSS-Solely Strategy Gained’t Work

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

You’ve gotten most likely seen many CSS-only implementations for creating floating labels on the internet. These primarily benefit from the “CSS checkbox hack method”. Certainly, it’s a really useful method which we now have mentioned many occasions within the past.

Sadly on this case, we can’t use it. When you examine the markup that’s generated from Contact Kind 7’s shortcodes, you’ll discover that every one type controls are wrapped inside a span component.

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 capabilities.php file of our venture, like this (your vacation spot folder could differ although):

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

  1. Loop by way of all of the .form-with-animated-labels types.
  2. For every type, we’ll seize its goal controls (enters, textarea). In your case, these could differ.
  3. Then, for every management, we’ll hear for the focus and blur occasions. These occasions might be accountable for animating the labels by toggling the centered class which we outlined earlier.
  4. Lastly, we’ll use one in every of CF7’s AJAX events to carry again the labels to their preliminary place. Be at liberty to make use of any of these occasions in accordance with your wants.

Right here’s the corresponding JavaScript code:

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

5. Name the Contact Kind

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

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


And we’re accomplished, of us! On this brief tutorial, we mentioned a easy methodology for customizing the appear and feel of a Contact Kind 7 type by including floating labels. I’m positive there might be different efficient options as nicely, but this one appears to do its job! Hopefully you’ll give it a attempt in one in every of your upcoming WordPress initiatives.

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

As at all times, thanks quite a bit for studying!

Extra Contact Kind 7 Customization and Floating Labels

If you’re curious to learn to construct a responsive handmade SVG type with Contact Kind 7, or want to dive deeper into floating labels, check out these tutorials:

Source link

Leave a Reply

Your email address will not be published. Required fields are marked *