This tutorial explains how to easily display the field label inside of the field in your WordPress site using Contact Form 7.
When creating a contact form for WordPress using Contact Form 7, the default setting is gives you the input field title sitting just above the field itself.
It looks clunky and uses way too much space. As a web designer, space is a commodity and every little bit counts.
We’re about to change that.
Using just a little bit of editing in the chosen contact form, we can easily move the titles to inside the input fields, setting it up as a placeholder.
This is going to save some much loved space for your site and give it a cleaner and simpler look, which I just love.
By default this is the code gives you this:
When you create a new contact form, the default settings and codes will give you the below set up where the titles are sitting above the input fields.
What you need to do is change the default code inside your form. (By removing the labels and adding the text as a placeholder)
Here is an example of the before and after code for my new form (which is pictured below).
Existing code: |
You’ll need to change it to: |
| <label> Your name [text* your-name] </label><label> Your email [email* your-email] </label><label> Subject [text* your-subject] </label><label> Your message (optional) [textarea your-message] </label>[submit “Submit”] |
[text* your-name placeholder “Name”] [tel* your-phone placeholder “Phone”] [email* your-email placeholder “Email”] [textarea your-message placeholder “Message”] [submit “Send Message”]
|
Once you have done the edits, you’ll need to go the mail tab and ensure your new edits in the form match what you changed in the form.
Save your form, go into your page that your applying your form to and edit the look and feel in Elementor as I have below to match the style of my website.
Don’t forget to test your changes live to see that everything is working ok.
If you’d like some more information.
I found a great video from Bjorn from WPLearningLab, who explains this process in detail.
