Contact Form 7 has a large range of possible CSS codes to help customise the form on your WordPress website. We list a few options that we use on some of our sites. We will continue to update this post with useful codes.
Change your check box lists into a vertical list
Add the following CSS code to your site:
span.wpcf7-list-item { display: block; }
Change the message box height
Control the textarea height on your contact form 7 by adding:
| (cols)x(rows) | 40x1080xx4 |
Columns (width) and rows (height) of text area. You can omit one of them. |
Example:
[textarea your-message 40x10 "your message here ..."]
Contact form fields don’t have a border
Some themes may display your contact form with no borders around the field entry. You can change this by adding the following CSS
.wpcf7 input, .wpcf7 textarea,.wpcf7 select {border: 1px solid black !important;}
Add placeholder text
To add Placeholder text in your input fields add the text such as placeholder "Email Address"
Example:
[email* your-email placeholder "Email Address"]p> |
|
Mail Tags
Additional tags to add to the email that you receive such as which url the contact form was filled out on [_url]
| TAG | DESCRIPTION |
|---|---|
[_remote_ip] |
This tag will be replaced by the sender’s client IP address. |
[_user_agent] |
This tag will be replaced by the sender’s user agent information. |
[_url] |
This tag will be replaced by the URL of the contact form. |
[_date] |
This tag will be replaced by the date of the submission. |
[_time] |
This tag will be replaced by the time of the submission. |
[_post_id] |
This tag will be replaced by the ID of the post which contains the contact form. |
[_post_name] |
This tag will be replaced by the name (slug) of the post which contains the contact form. |
[_post_title] |
This tag will be replaced by the title of the post which contains the contact form. |
[_post_url] |
This tag will be replaced by the permalink of the post which contains the contact form. |
[_post_author] |
This tag will be replaced by the author name of the post which contains the contact form. |
[_post_author_email] |
This tag will be replaced by the author email of the post which contains the contact form. |
[_serial_number] |
This tag will be replaced by a numeric string whose value increments. Requires Flamingo 1.5+ be installed. |
Contact Form 7 have a large range of useful CSS codes and shortcodes you can use on your site. A simple way to search them is to use google and such topics such as ‘ Contact Form 7 message box height’ and you should find some useful information for that topic on https://contactform7.com/
What Contact Form 7 codes or customisations have you used on your site that might be useful to others?
The post Useful Contact Form 7 Customisation and Codes appeared first on Smart Robbie Design.
