Easy Contact form 7 Guide, Customization and most wanted tips. Set replay to. change submit button style. Add multi recipients , BB or BCC. Get all the sender info right inside email body. and give sender a copy too!
—————– Mail section ———–
Example: http://screencast.com/t/YjEzYmI1NGEt
- To: field: The e-mail address that will receive the results.( enter your email )Note: You can add multi recipients. separate them with commas:
example:Admin@example.com,log@example.com,me@example.comyou also can display a selection of receptions to select.
Example: [select recipient "CEO|ceo@example.com" "Sales|sales@example.com" "Support|support@example.com"]
- From: field: sender email. example [your-name] <[your-email]>
- Subject: field: mail subject. example: [your-subject]
- Additional headers: type in Reply-To: [your-email]
(Very important) This will allow you to reply to the person directly when you are reading the email later.You also can add CC and BCC if you need.Example:
CC: mom@example.com
BCC:dad@example.com - Message Body field: Type like following:( thenyou will see all info in one place in email body)[your-message]Subject:[your-subject]
Name: [your-name]
Email: [your-email]
Website: [your-website]
IP:[_remote_ip]
—————— Mail section 2 ———————
Its good to send another email to sender to let him know we recived his email.
See example: http://screencast.com/t/ZTE0OTAyYT
If you like to see it in action, Try my contact page and say thank you to me! You will get similar to above screen-shot immediately in your mail box!
————— Messages —————————-
After form is submitted the viewer is able to see the response messages such as “Your message was sent successfully”, “Validation errors occurred.” etc.
You can change all kind of message that may appear to the sender here.
Example: http://screencast.com/t/NTRlYWU2M
————- Additional Settings ——————-
Good place to add your own JS script. for example if you want to nevigate to a thank you page after submitting a message you can write like this:
on_sent_ok: “location.replace(‘http://yourdomain.com/thank-you/’);”
*How to auto fill a form input?
Add a id to that input.
use below javascript plus exct php plugin to run the code within your post:
* how to change style of submit bottom?
Add a class to submit button :
example: <p align="left">[submit class:buttons_mainpage " "]</p>
then add the style like this:
.buttons_mainpage {
background-image: url("images/but_submit.png");
background-repeat: no-repeat;
margin: 0px 190px 0px 0px;
padding: 0px;
float: right;
height: 26px;
width: 69px;
border: 0 none;
cursor: pointer;
}
* How to erase fields on focus
No easy way! You need edit edited \modules\text.php and replace
$html = ' '
with
$html = '<input type="text" name="' . $name . '" value="' . esc_attr( $value ) . '"' . $atts . ' onfocus="if(this.value==\''; $html = $html . esc_attr( $value ) . '\') this.value=\'\';" onblur="if(this.value==\'\') this.value=\'' . esc_attr( $value ) . '\';" />';
* how to allow only admin edit the contact form and prevent others?
define( 'WPCF7_ADMIN_READ_CAPABILITY', 'manage_options' ); define( 'WPCF7_ADMIN_READ_WRITE_CAPABILITY', 'manage_options' );
read more about manage_options http://codex.wordpress.org/Glossary#Capabilities
* How to insert contact name and email in database after sucessfull submission?
Contact Form 7 has many action/filter hooks in its code. So, if you are familiar with WordPress plugin development, you can use them to save data into DB. best hook for it at wpcf7_before_send_mail in includes/classes.php
Example:
add_action( ‘wpcf7_before_send_mail’, ‘my_conversion’ );
function my_conversion( $cf7 )
{
$email = $cf7->posted_data["your-email"];
$name = $cf7->posted_data["your-name"];
insert_newsletter_subscriber($email, $name);
}
Note: You need to write your own insert_newsletter_subscriber()
———————– Tip ————————
You can use folowingspecial mail tags in main body too:
[_remote_ip] |
This tag will be replaced by the sender’s client IP address. |
[_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. |
Note that the [_post_*] tag has value only when you put the contact form into content of a post or a page. They are not available if the contact form is put inside a sidebar widget.
The form of those special mail tags has been changed in Contact Form 7 2.2. Old form ([wpcf7.*]) are still supported and able to work.
———————– Tip ————————
If you want to show a rest form button, add this:
<input type="reset" />
———————– Tip ————————
if you want to show post title in email body add this:
[wpcf7.post_title]
———————– Tip ————————
By default, Contact Form 7 loads three JavaScript files — contact-form-7.js, jquery.form.js and jquery.js — into the header of each page. They are necessary for Ajax. If you want to disable such loading of these files in all pages and control it to load in select pages only, you can do that by first prevent their loading totally by inserting the following line in the wp-config.php file.
define ('WPCF7_LOAD_JS', false );
Then you may call these files to load in a particular file by inserting the following line in the relevant template ahead of the call to wp_head():
wpcf7_enqueue_scripts();
Using this tip can improve your WordPress page loading and SEO!
———————– Tip ————————
you can use tag [response] anywhere you like. this tag is like place holder for displaying message. all message appear where you place a tag [response].
Do you know additional WordPress Contact Form 7 plugin tips? Please share it via commnets
Need Farther help and support? Contact me
Looking for different WordPress plugin? Try Wishlist member wordpress plugin.
Do you need Professional coder? Hire me
Looking for different WordPress plugin? Try Wishlist member
Andy is one of core WordPress WishList Member Developer. He is in love with WordPress and fun of turning new ideas to WordPress plugin or theme.
Mehmet
May 1, 2010
7:52 am
Hi,
About “how to change style of submit bottom?”
Which file should i add this class and where (row):
[submit class:buttons_mainpage " "]
thank you.
Carolyn
June 1, 2010
7:17 pm
I am having trouble getting sent the info I request with the special mail tags… I feel really stupid! Just getting [wpcf7.post_title] back!
Andy
June 6, 2010
11:34 pm
Hello Carolyn, special mail tags work perfect in contact form 7 only. if you installed contact form 8.then time to uninstall it and back to 7!
Remember you can use [_post_title] instead of [wpcf7.post_title] too
Steven
June 9, 2010
8:09 pm
Hello,
I would like to remplace a caracter in a tag:
example@test.com replaced by exemple=test.com
Do You know if anything is possible?
Thx
Morgan Daly
July 4, 2010
5:26 am
Hello,
You seem to know a fair bit. Do you know if it is possible to extend Contact Form 7 so that there was Mail (3) & Mail (4). At the moment there is an option to have Mail (2). Adding more of these would be awesome. Any ideas?
Thanks
Morgs
Ash
July 9, 2010
9:14 am
Hi Andy
Is there anyway i can get [_post_url] to work when using the Contact Form 7 widget?
john
July 12, 2010
10:35 am
How do you add onfocus to a textarea?
Peter
August 16, 2010
9:33 am
I want to autofill content of a field when a user clicks on the link on a different page.
Is there someway to send a url string with variables that auto fill a field?
Or maybe some java trick?
Andy
August 18, 2010
8:47 am
This is easy to do by using jQuery .
Stacey
August 23, 2010
12:55 pm
hey do you have any advice on “auto submitting”?
Steve Pasek
August 31, 2010
5:12 pm
Seems that the drop-down recipient functionality has broken. The drop-down menu just doesn’t appear, only the label (“choose the recipient”).
Version 2.3.1 Contact Form 7
Version 3.0.1 WordPress
Is there a solution for this?
Andy
September 1, 2010
9:22 am
Hey Stacey. Please use jQuery to auto submit any form.
liena
October 6, 2010
11:43 pm
is there anyway i can get [_date] with format YYYY-MM-DD?
thanks
john
October 13, 2010
9:26 am
Hey how do you remove the “send” value on the submit button in contact form 7?
————
Please look for
[submit "Send"]
at your contact form and change the Send value to ( is equal to space )
Andy
Joerg
December 5, 2010
11:06 am
Hi. Helpfull info here, thanks for that!
But how can I use a “special mail tag” in my functions.php?
I tried to get the post_id in the functions.php but everything I tried did not work.
Somebody knows a way to get the post_id? I need it to update a custom-field in the post, where the form is used, and I use the form in different posts.
Thanks for your help
Joerg
December 5, 2010
12:09 pm
I searched for a solution (see my last comment) for a couple of days… now I found it, maybe you can update your post for that?
To get the post_id of the sending post I used the following code in my functions.php:
function mycf7_before_send_mail($cf7) {
// Execute this Code only for Form-ID 3!
if ( 3 == $cf7->id ) {
$my_postid = wpcf7_special_mail_tag_for_post_data( $output, ‘_post_id’ ) ;
}
}
add_action( ‘wpcf7_before_send_mail’, ‘mycf7_before_send_mail’ );
Auz
January 17, 2011
9:21 pm
These are some great tips! Thanks for the post.
Travel
March 21, 2011
4:45 am
Some great tips here thanks
jim mccann
March 21, 2011
9:49 pm
HI,
I ther any way to load a form in a php file that is loded within WP?
I woul like to add a form into a shopping cart php file
Andy
April 9, 2011
9:16 am
Hello Jim
Try to use do_shortcode( $content ) to load a contact form in your php file.
http://codex.wordpress.org/Function_Reference/do_shortcode
Andy
Cory
April 12, 2011
7:02 pm
Great tips here for Contact Form 7… Thanks!!
Does anyone know how to style/edit the ‘File Upload’ tag? I can’t seem to size the input field nor remove or style the ‘browse’ button.
thanks….
Musti
June 4, 2011
12:05 pm
I have learned many things from your excellent tips. I am working currently on a website where I have a contact form 7 implemented in a lightbox. On a successful submit I hide the form and show a success message using jquery. The problem I have right now is I do not know how to retrieve the name of the sender so as to print it in the success message like this: Thank (sender´s name)! yor message have sent successfully. We we´ll get back to you as soon as possible.
Anyone knows how to retrive the senders mail from CF7. Thanks in advance
Rudolf
June 9, 2011
6:38 pm
Hi, does anyone know how to add an image (jpg or gif) to the contact form? ideally to the right of the contact form…
jack
June 28, 2011
10:06 am
Is there anyway i can get [_post_url] to work when using the Contact Form 7 widget?
jack
June 28, 2011
10:07 am
Is there anyway i can get URL which page user can came to Contact Form 7 widget?
Chris Matthias
July 9, 2011
9:31 pm
Hey guys,
I’ve got some jQuery that when someone chooses their location on a select field (#myLocation) it changes the options on another select element (.preffered-time). All this works fine.
However, when I submit the form, the options that get added to the .preferred-time select box don’t get sent along with the form.
Is there anything I should know about manipulating form fields before the submit button is sent?
Andy
August 9, 2011
6:28 pm
@cory
From What I know style/edit the ‘File Upload’ tag is not easy. or the solution do not works at all browsers.
Beth
November 28, 2011
7:04 pm
Thank you so much for this post! VERY helpful.
I was wondering, is there a way to set it up so that I get an email if someone gives a specific response or even if it’s been filled out?
Thanks again!!
RC
December 8, 2011
12:28 am
Thanks for this post. It really helped me filter and modify form input before outputting it in an email.
Andy
December 24, 2011
1:05 pm
Thanks. I’m glad to hear it worked for you. Andy
Dino
January 6, 2012
2:19 pm
Just wondering, is there any way of sendng the sender’s location with the form? I could do a manual lookup with the [_remote_ip] data but wondered if there was an automatic way.
Great post BTW! Very useful.
Ben
March 20, 2012
3:02 pm
Here is a code snippet that will put the subject|emailaddress as a dropdown menu.
Subject*
[select recipient
“Membership|Membership ”
Hopefully this helps someone!