Useful Contact Form 7 Customisation and Codes

contact form 7

Useful Contact Form 7 Customisation and Codes

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) 40x10
80x
x4
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>
<p>[textarea your-message placeholder "Let us know what information you require"]</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?

No Comments

Post A Comment