hello@anzum.com
How To Add Placeholder Text in Contact Form 7 WordPress Plugin

How To Add Placeholder Text in Contact Form 7 WordPress Plugin

Contact Form 7 WordPress plugin allows you to add Placeholder text. So, you can eliminate the standard Your Name (required) next to the input fields and use HTML5 Placeholder.

This is how a placeholder can be added in Contact Form 7.

Placeholder text for Name Field in Contact Form 7
[text your-name placeholder "Your name here"]
Contact Form 7 Text Field Placeholder Text

Placeholder text for Email Field in Contact Form 7
[email your-email placeholder "Your email here"]
Contact Form 7 Email Field Placeholder Text

Placeholder text for Telephone Field in Contact Form 7
[tel tel-103 placeholder "Your phone no"]
Contact Form 7 Telephone Field Placeholder Text

Placeholder text for URL Field in Contact Form 7
[url url-75 placeholder "https://example.com/"]
Contact Form 7 Url Field Placeholder Text

Placeholder text for Number Field in Contact Form 7
[number number-212 placeholder "Number of members"]
Contact Form 7 Number Field Placeholder Text

Placeholder text for Select Option in Contact Form 7
[select Text first_as_label "Select Option" "Option 1" "Option 2"]
Contact Form 7 Select Option Field Placeholder Text

Placeholder text for Textarea in Contact Form 7
[textarea your-message placeholder "Your message here"]
Contact Form 7 Textarea Field Placeholder Text

Below are the complete Shortcodes used to Add Placeholder Text in Contact Form 7.

Contact Form 7 Placeholder Code

This is the complete contact form resulted after implementing the Shortcodes, as mentioned above.
Placeholder Text in Contact Form 7

Placeholder in contact form 7 can be used for fields like text, email, url, tel, textarea, select, number.

How to Make Formatting of Email and Text Field Same in Contact Form 7

If you want to separately format text field and email field in contact form 7, you can do it by this way


input[type="text"]
{
background-color:#000;
}

and


input[type="email"]
{
background-color:#000;
}

But in case if you want to keep formatting of input and email field in contact form 7, you can do it with the following custom css.


input[type="text"],
input[type="email"]
{
background-color:#000;
}

Don’t forget that it will apply the change to all the input field with text and email attribute. In order to avoid the global formatting of input and text fields, you can use the following CSS code


.wpcf7 input[type="text"], .wpcf7 input[type="email"]
{
background-color:#000;
}

The above code will only apply to the contact form 7 input fields with email and text attributes.

How to Create Contact Form Similar To Bubbles Parallax One Page WordPress Theme Demo

If you are using Bubbles WordPress theme and want to create contact form similar to the demo, you need to use contact form 7 plugin. By default the formatting of the contact us page won’t be same as the theme demo. You need to add contact form 7 short-code between this shortcode provided by Bubbles theme:

Thus, if you want to create a contact form like demo at WordPress Bubbles theme

Place your contact form 7 short-code between

[contact_form]

[/contact_form]

Final code looks like this

[contact_form]

[contact-form-7 id=”2458” title=”Contact form 1”]

[/contact_form]