by Marshall | Dec 5, 2019 | Blog |
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"]
Placeholder text for Email Field in Contact Form 7
[email your-email placeholder "Your email here"]
Placeholder text for Telephone Field in Contact Form 7
[tel tel-103 placeholder "Your phone no"]
Placeholder text for URL Field in Contact Form 7
[url url-75 placeholder "https://example.com/"]
Placeholder text for Number Field in Contact Form 7
[number number-212 placeholder "Number of members"]
Placeholder text for Select Option in Contact Form 7
[select Text first_as_label "Select Option" "Option 1" "Option 2"]
Placeholder text for Textarea in Contact Form 7
[textarea your-message placeholder "Your message here"]
Below are the complete Shortcodes used to Add Placeholder Text in Contact Form 7.
This is the complete contact form resulted after implementing the Shortcodes, as mentioned above.
Placeholder in contact form 7 can be used for fields like text, email, url, tel, textarea, select, number.
by Marshall | Mar 13, 2015 | Blog |
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.
by Marshall | Feb 9, 2015 | Blog |
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]
