Author 诗语

Jetpack 覆盖联系表单

Styling contact form

How do I style contact form? This is a common question on the support forum. Contact Form 7 doesn』t provide any customization for styling. Editing CSS style sheets is the best method to style contact forms. In this article, I』ll show you some important steps for styling your contact forms. If you know about CSS, my explanation is simple. If you are not familiar with CSS, please learn CSS first with these informative websites:

Learning CSS – W3CCSS Tutorial – W3SchoolsLearn CSS | MDN – Mozilla Developer NetworkCSS Basics

Which style sheet should I edit?#Which style sheet should I edit?

Any style sheet is okay, but I recommend editing your theme』s main style sheet. It』s better not to edit style sheets in the plugin because your changes will be overwritten when the plugin is updated. Themes can be updated, but they are generally updated less frequently than plugins. If your theme is updated often, you might make a child theme and manage the style sheet in the child theme.

You can also use Additional CSS, and it has several advantages over modifying theme』s stylesheets directly.

Styling contact form fields#Styling contact form fields

Let』s see how we can style individual fields in a contact form. There are several types of input fields. The most common field is a single-line text input field so let』s add a style rule for it:

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

This selector matches all input elements whose type attribute has exactly the value text (i.e. single-line text input fields). Also, this style rule has three properties specifying white as background color, black as foreground (text) color, and 50% as width of field.

You may want to apply this style rule to other types of fields. Let』s add selectors for an email address input field and a multi-line text input area:

input[type="text"],
input[type="email"],
textarea
{
background-color: #fff;
color: #000;
width: 50%;
}

Now this style is applied to every part of your site. You may want to limit it to contact forms. Contact Form 7』s form has a wrapper element that has the wpcf7 class. You can limit the scope of target by adding ancestor selectors:

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

See also:

Why does my email address input field look different than other text input fields?Custom layout for checkboxes and radio buttons

Styling specific fields#Styling specific fields

You might want to style only specific fields. First, add an id or class option to the form-tags of the fields that you want to style:

[text text-123 id:very-special-field]

Then add style rules using the id or class:

#very-special-field
{
color: #f00;
border: 1px solid #f00;
}

Styling whole of contact form#Styling whole of contact form

As I mentioned earlier, the top-level element of contact form has the wpcf7 class. To style the whole contact form, add style rules for the class selector:

.wpcf7
{
background-color: #f7f7f7;
border: 2px solid #0f0;
}

This style rule gives your contact forms a light gray background and green border.

See also: Can I add id and class attributes to a form element?

Styling response messages#Styling response messages

The response message at the bottom of a contact form by default has the wpcf7-response-output class, so you can apply a style rule to this class to style the response message.

To decide on the style based on the status of the contact form, refer to the form element』s class attribute. It should have a class that reflects the current status. Possible values are: init, sent, failed, aborted, spam, invalid, or unaccepted.

For an example of styling, see the following default style rules that Contact Form 7 5.2.2 applies to a response message:

.wpcf7 form .wpcf7-response-output {
margin: 2em 0.5em 1em;
padding: 0.2em 1em;
border: 2px solid #00a0d2; /* Blue */
}

.wpcf7 form.init .wpcf7-response-output {
display: none;
}

.wpcf7 form.sent .wpcf7-response-output {
border-color: #46b450; /* Green */
}

.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output {
border-color: #dc3232; /* Red */
}

.wpcf7 form.spam .wpcf7-response-output {
border-color: #f56e28; /* Orange */
}

.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output {
border-color: #ffb900; /* Yellow */
}

See also: Locating response message box anywhere

Styling validation error messages#Styling validation error messages

When a field has an invalid value, a validation error message appears under the field. As the element of a validation error message has the wpcf7-not-valid-tip class, you can use the class to style validation error messages.

Contact Form 7 5.2.2 applies the following style rule by default:

.wpcf7-not-valid-tip {
color: #dc3232;
font-size: 1em;
font-weight: normal;
display: block;
}

See also: Customizing validation error messages
Share this:FacebookTwitterLike this:Like Loading...

Customizing validation error messages

When form submission includes invalid inputs (e.g., required fields are blank or email fields have invalid formats), the form displays validation error messages. This post describes how you can customize the validation error messages that Contact Form 7 produces.

Changing text

You can change the text used in each type of error message. For example, the default message for required fields is 「The field is required.」 To change this message, edit the text in the Messages tab panel.

Static or floating-tip

You have two different style options for validation error messages: static and floating-tip. Static is the current default option. Floating-tip was once the default option in Ajax submission mode before Contact Form 7 3.6 demoted it because of poor accessibility.

Look at these demo forms to see the differences between the two styles.

Static style

Lorem ipsum dolor sit amet, adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea consequat.

Δ

Floating-tip style

Lorem ipsum dolor sit amet, adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea consequat.

Δ

Each style has advantages and disadvantages.

 AdvantageDisadvantageStatic style (default)

Good accessibility
Same behavior in Ajax and non-Ajax submission modes

Possible to break the layout when used for inline fields

Floating-tip style

Not possible to break the layout even when used for inline fields

Poor accessibility
Only works in Ajax submission mode

Normally, static style is recommended as it causes less accessibility issues. However, if you have inline fields in a form and inserting static error message blocks after them breaks the form layout, using floating-tip style is the better option.

Switching the validation error message style can be done in a simple step. You can apply floating-tip style to specific fields or to all fields in a form. The basic rule is that when an element has the class use-floating-validation-tip, all fields under the element use floating-tip style.

Let me show some examples. To apply floating-tip style to a specific input field, wrap the field with an element that has the use-floating-validation-tip class.

Example:

[text* your-name]

If you want to apply floating-tip style to all fields in a form, add the use-floating-validation-tip class to the form element by adding the html_class attribute to [contact-form-7] shortcode.

Example:

[contact-form-7 id="1234" title="Contact form 1" html_class="use-floating-validation-tip"]

In non-Ajax submission mode, static style is used regardless of settings.
Share this:FacebookTwitterLike this:Like Loading...

Managing long lists with Listo

Imagine that you need to make a contact form that has fields for the sender』s location and you want them to choose their country from a list. There are about 200 countries in the world — you』ll soon realize that the list becomes terribly long.

Previously, the only way to generate such a long list with Contact Form 7 was to manually add all the options into a form-tag as shown below.

[select your-country 「Aruba」 「Afghanistan」 「Angola」 「Albania」 「Andorra」 「United Arab Emirates」 「Argentina」 「Armenia」 「American Samoa」 「Antigua and Barbuda」 「Australia」 「Austria」 「Azerbaijan」 「Burundi」 「Belgium」 「Benin」 「Burkina Faso」 「Bangladesh」 「Bulgaria」 「Bahrain」 「Bahamas」 「Bosnia and Herzegovina」 「Belarus」 「Belize」 「Bermuda」 「Bolivia, Plurinational State of」 「Brazil」 「Barbados」 「Brunei Darussalam」 「Bhutan」 「Botswana」 「Central African Republic」 「Canada」 「Switzerland」 「Chile」 「China」 「Côte d』Ivoire」 「Cameroon」 「Congo, the Democratic Republic of the」 「Congo」 「Cook Islands」 「Colombia」 「Comoros」 「Cape Verde」 「Costa Rica」 「Cuba」 「Cayman Islands」 「Cyprus」 「Czech Republic」 「Germany」 「Djibouti」 「Dominica」 「Denmark」 「Dominican Republic」 「Algeria」 「Ecuador」 「Egypt」 「Eritrea」 「Spain」 「Estonia」 「Ethiopia」 「Finland」 「Fiji」 「France」 「Micronesia, Federated States of」 「Gabon」 「United Kingdom」 「Georgia」 「Ghana」 「Guinea」 「Gambia」 「Guinea-Bissau」 「Equatorial Guinea」 「Greece」 「Grenada」 「Guatemala」 「Guam」 「Guyana」 「Hong Kong」 「Honduras」 「Croatia」 「Haiti」 「Hungary」 「Indonesia」 「India」 「Ireland」 「Iran, Islamic Republic of」 「Iraq」 「Iceland」 「Israel」 「Italy」 「Jamaica」 「Jordan」 「Japan」 「Kazakhstan」 「Kenya」 「Kyrgyzstan」 「Cambodia」 「Kiribati」 「Saint Kitts and Nevis」 「Korea, Republic of」 「Kuwait」 「Lao People』s Democratic Republic」 「Lebanon」 「Liberia」 「Libya」 「Saint Lucia」 「Liechtenstein」 「Sri Lanka」 「Lesotho」 「Lithuania」 「Luxembourg」 「Latvia」 「Morocco」 「Monaco」 「Moldova, Republic of」 「Madagascar」 「Maldives」 「Mexico」 「Marshall Islands」 「Macedonia, the former Yugoslav Republic of」 「Mali」 「Malta」 「Myanmar」 「Montenegro」 「Mongolia」 「Mozambique」 「Mauritania」 「Mauritius」 「Malawi」 「Malaysia」 「Namibia」 「Niger」 「Nigeria」 「Nicaragua」 「Netherlands」 「Norway」 「Nepal」 「Nauru」 「New Zealand」 「Oman」 「Pakistan」 「Panama」 「Peru」 「Philippines」 「Palau」 「Papua New Guinea」 「Poland」 「Puerto Rico」 「Korea, Democratic People』s Republic of」 「Portugal」 「Paraguay」 「Palestine, State of」 「Qatar」 「Romania」 「Russian Federation」 「Rwanda」 「Saudi Arabia」 「Sudan」 「Senegal」 「Singapore」 「Solomon Islands」 「Sierra Leone」 「El Salvador」 「San Marino」 「Somalia」 「Serbia」 「Sao Tome and Principe」 「Suriname」 「Slovakia」 「Slovenia」 「Sweden」 「Swaziland」 「Seychelles」 「Syrian Arab Republic」 「Chad」 「Togo」 「Thailand」 「Tajikistan」 「Turkmenistan」 「Timor-Leste」 「Tonga」 「Trinidad and Tobago」 「Tunisia」 「Turkey」 「Tuvalu」 「Taiwan, Province of China」 「Tanzania, United Republic of」 「Uganda」 「Ukraine」 「Uruguay」 「United States」 「Uzbekistan」 「Saint Vincent and the Grenadines」 「Venezuela, Bolivarian Republic of」 「Virgin Islands, U.S.」 「Viet Nam」 「Vanuatu」 「Samoa」 「Yemen」 「South Africa」 「Zambia」 「Zimbabwe」]

Managing 200 or more options is almost impossible, and parsing this form-tag would consume memory and time on your server computer. The situation of a list of countries in a contact form is not that rare; it should be easier to set up. That』s why I created Listo, another WordPress plugin.

Listo is a simple plugin that provides several kinds of common lists for other plugins like Contact Form 7. Listo currently provides lists of world countries, U.S. subdivisions, and world currencies (shown at the bottom of this page), with more to come.

Contact Form 7 supports cooperation with Listo and allows drop-down menus, checkboxes, and radio buttons, with a long list of options that Listo provides. You don』t need painful manual editing anymore.

How to manage long lists in a contact form

Let』s try creating a drop-down menu for selecting a country. We get the option values from Listo, so activate Listo if it』s not active yet.

Let』s start by creating a form-tag for a typical drop-down menu. We use [select] form-tag.

[select your-country]

This tag doesn』t have values yet, so it will be displayed as an empty menu. Next, we add the countries list as its option values. To add values provided by Listo, add a 『data』 option to a form-tag, like this.

[select your-country data:countries]

Just adding data:countries gives the menu about 200 country options. Simple, right?

Looking through the menu items, you may find something unexpected; for example, 「Antarctica」 is in the countries list. Is Antarctica a country where people live? The reason Antarctica is in the list is that the data source of the countries list is the ISO 3166 standard, which includes some non-country special areas.

Thus, the definition of a country can differ according to standards. For dealing with different definitions, Listo also provides a grouping function. For the world countries list, Listo provides two subgroups: 「un」 and 「olympic」. The 「un」 subgroup only includes members of the United Nations, while the 「olympic」 subgroup only includes participating nations at the 2012 London Summer Olympic Games. A complete list with subgroups is shown at the bottom of this page.

To specify the data option with subgroup, append a period (.) and the name of subgroup to the option.

[select your-country data:countries.olympic]

This menu will only include participating Olympic nations in its options; you won』t see Antarctica there.

The complete lists Listo provides

Countries [countries]

A list of countries and dependent territories based on the ISO 3166 standard.

Usage example:

[select your-country data:countries.olympic]

NameIn Group1Arubaolympic2Afghanistanun, olympic3Angolaun, olympic4Anguilla5Åland Islands6Albaniaun, olympic7Andorraun, olympic8United Arab Emiratesun, olympic9Argentinaun, olympic10Armeniaun, olympic11American Samoaolympic12Antarctica13French Southern Territories14Antigua and Barbudaun, olympic15Australiaun, olympic16Austriaun, olympic17Azerbaijanun, olympic18Burundiun, olympic19Belgiumun, olympic20Beninun, olympic21Bonaire, Sint Eustatius and Saba22Burkina Fasoun, olympic23Bangladeshun, olympic24Bulgariaun, olympic25Bahrainun, olympic26Bahamasun, olympic27Bosnia and Herzegovinaun, olympic28Saint Barthélemy29Belarusun, olympic30Belizeun, olympic31Bermudaolympic32Bolivia, Plurinational State ofun, olympic33Brazilun, olympic34Barbadosun, olympic35Brunei Darussalamun, olympic36Bhutanun, olympic37Bouvet Island38Botswanaun, olympic39Central African Republicun, olympic40Canadaun, olympic41Cocos (Keeling) Islands42Switzerlandun, olympic43Chileun, olympic44Chinaun, olympic45Côte d'Ivoireun, olympic46Cameroonun, olympic47Congo, the Democratic Republic of theun, olympic48Congoun, olympic49Cook Islandsolympic50Colombiaun, olympic51Comorosun, olympic52Cape Verdeun, olympic53Costa Ricaun, olympic54Cubaun, olympic55Curaçao56Christmas Island57Cayman Islandsolympic58Cyprusun, olympic59Czech Republicun, olympic60Germanyun, olympic61Djiboutiun, olympic62Dominicaun, olympic63Denmarkun, olympic64Dominican Republicun, olympic65Algeriaun, olympic66Ecuadorun, olympic67Egyptun, olympic68Eritreaun, olympic69Western Sahara70Spainun, olympic71Estoniaun, olympic72Ethiopiaun, olympic73Finlandun, olympic74Fijiun, olympic75Falkland Islands (Malvinas)76Franceun, olympic77Faroe Islands78Micronesia, Federated States ofun, olympic79Gabonun, olympic80United Kingdomun, olympic81Georgiaun, olympic82Guernsey83Ghanaun, olympic84Gibraltar85Guineaun, olympic86Guadeloupe87Gambiaun, olympic88Guinea-Bissauun, olympic89Equatorial Guineaun, olympic90Greeceun, olympic91Grenadaun, olympic92Greenland93Guatemalaun, olympic94French Guiana95Guamolympic96Guyanaun, olympic97Hong Kongolympic98Heard Island and McDonald Islands99Hondurasun, olympic100Croatiaun, olympic101Haitiun, olympic102Hungaryun, olympic103Indonesiaun, olympic104Isle of Man105Indiaun, olympic106British Indian Ocean Territory107Irelandun, olympic108Iran, Islamic Republic ofun, olympic109Iraqun, olympic110Icelandun, olympic111Israelun, olympic112Italyun, olympic113Jamaicaun, olympic114Jersey115Jordanun, olympic116Japanun, olympic117Kazakhstanun, olympic118Kenyaun, olympic119Kyrgyzstanun, olympic120Cambodiaun, olympic121Kiribatiun, olympic122Saint Kitts and Nevisun, olympic123Korea, Republic ofun, olympic124Kuwaitun, olympic125Lao People's Democratic Republicun, olympic126Lebanonun, olympic127Liberiaun, olympic128Libyaun, olympic129Saint Luciaun, olympic130Liechtensteinun, olympic131Sri Lankaun, olympic132Lesothoun, olympic133Lithuaniaun, olympic134Luxembourgun, olympic135Latviaun, olympic136Macao137Saint Martin (French part)138Moroccoun, olympic139Monacoun, olympic140Moldova, Republic ofun, olympic141Madagascarun, olympic142Maldivesun, olympic143Mexicoun, olympic144Marshall Islandsun, olympic145Macedonia, the former Yugoslav Republic ofun, olympic146Maliun, olympic147Maltaun, olympic148Myanmarun, olympic149Montenegroun, olympic150Mongoliaun, olympic151Northern Mariana Islands152Mozambiqueun, olympic153Mauritaniaun, olympic154Montserrat155Martinique156Mauritiusun, olympic157Malawiun, olympic158Malaysiaun, olympic159Mayotte160Namibiaun, olympic161New Caledonia162Nigerun, olympic163Norfolk Island164Nigeriaun, olympic165Nicaraguaun, olympic166Niue167Netherlandsun, olympic168Norwayun, olympic169Nepalun, olympic170Nauruun, olympic171New Zealandun, olympic172Omanun, olympic173Pakistanun, olympic174Panamaun, olympic175Pitcairn176Peruun, olympic177Philippinesun, olympic178Palauun, olympic179Papua New Guineaun, olympic180Polandun, olympic181Puerto Ricoolympic182Korea, Democratic People's Republic ofun, olympic183Portugalun, olympic184Paraguayun, olympic185Palestine, State ofolympic186French Polynesia187Qatarun, olympic188Réunion189Romaniaun, olympic190Russian Federationun, olympic191Rwandaun, olympic192Saudi Arabiaun, olympic193Sudanun, olympic194Senegalun, olympic195Singaporeun, olympic196South Georgia and the South Sandwich Islands197Saint Helena, Ascension and Tristan da Cunha198Svalbard and Jan Mayen199Solomon Islandsun, olympic200Sierra Leoneun, olympic201El Salvadorun, olympic202San Marinoun, olympic203Somaliaun, olympic204Saint Pierre and Miquelon205Serbiaun, olympic206South Sudanun, olympic207Sao Tome and Principeun, olympic208Surinameun, olympic209Slovakiaun, olympic210Sloveniaun, olympic211Swedenun, olympic212Swazilandun, olympic213Sint Maarten (Dutch part)214Seychellesun, olympic215Syrian Arab Republicun, olympic216Turks and Caicos Islands217Chadun, olympic218Togoun, olympic219Thailandun, olympic220Tajikistanun, olympic221Tokelau222Turkmenistanun, olympic223Timor-Lesteun, olympic224Tongaun, olympic225Trinidad and Tobagoun, olympic226Tunisiaun, olympic227Turkeyun, olympic228Tuvaluun, olympic229Taiwan, Province of Chinaolympic230Tanzania, United Republic ofun, olympic231Ugandaun, olympic232Ukraineun, olympic233United States Minor Outlying Islands234Uruguayun, olympic235United Statesun, olympic236Uzbekistanun, olympic237Holy See (Vatican City State)238Saint Vincent and the Grenadinesun, olympic239Venezuela, Bolivarian Republic ofun, olympic240Virgin Islands, Britisholympic241Virgin Islands, U.S.olympic242Viet Namun, olympic243Vanuatuun, olympic244Wallis and Futuna245Samoaun, olympic246Yemenun, olympic247South Africaun, olympic248Zambiaun, olympic249Zimbabweun, olympic

U.S. subdivisions [us_subdivisions]

The list of subdivisions of the United States based on the ISO 3166-2:US standard.

Usage example:

[select your-state data:us_subdivisions.states data:us_subdivisions.districts]

NameIn Group1Alaskastates2Alabamastates3Arkansasstates4American Samoaoutlying_areas5Arizonastates6Californiastates7Coloradostates8Connecticutstates9District of Columbiadistricts10Delawarestates11Floridastates12Georgiastates13Guamoutlying_areas14Hawaiistates15Iowastates16Idahostates17Illinoisstates18Indianastates19Kansasstates20Kentuckystates21Louisianastates22Massachusettsstates23Marylandstates24Mainestates25Michiganstates26Minnesotastates27Missouristates28Northern Mariana Islandsoutlying_areas29Mississippistates30Montanastates31North Carolinastates32North Dakotastates33Nebraskastates34New Hampshirestates35New Jerseystates36New Mexicostates37Nevadastates38New Yorkstates39Ohiostates40Oklahomastates41Oregonstates42Pennsylvaniastates43Puerto Ricooutlying_areas44Rhode Islandstates45South Carolinastates46South Dakotastates47Tennesseestates48Texasstates49United States Minor Outlying Islandsoutlying_areas50Utahstates51Virginiastates52Virgin Islands, U.S.outlying_areas53Vermontstates54Washingtonstates55Wisconsinstates56West Virginiastates57Wyomingstates

Currencies [currencies]

A list of currencies based on the ISO 4217 standard.

Usage example:

[select your-currency data:currencies]

NameIn Group1United Arab Emirates dirham2Afghan afghani3Albanian lek4Armenian dram5Netherlands Antillean guilder6Angolan kwanza7Argentine peso8Australian dollar9Aruban florin10Azerbaijani manat11Bosnia and Herzegovina convertible mark12Barbados dollar13Bangladeshi taka14Bulgarian lev15Bahraini dinar16Burundian franc17Bermudian dollar18Brunei dollar19Boliviano20Brazilian real21Bahamian dollar22Bhutanese ngultrum23Botswana pula24Belarusian ruble25Belize dollar26Canadian dollar27Congolese franc28Swiss franc29Chilean peso30Chinese yuan31Colombian peso32Costa Rican colon33Cuban peso34Cape Verde escudo35Czech koruna36Djiboutian franc37Danish krone38Dominican peso39Algerian dinar40Egyptian pound41Eritrean nakfa42Ethiopian birr43Euro44Fiji dollar45Falkland Islands pound46Pound sterling47Georgian lari48Ghanaian cedi49Gibraltar pound50Gambian dalasi51Guinean franc52Guatemalan quetzal53Guyanese dollar54Hong Kong dollar55Honduran lempira56Croatian kuna57Haitian gourde58Hungarian forint59Indonesian rupiah60Israeli new shekel61Indian rupee62Iraqi dinar63Iranian rial64Icelandic króna65Jamaican dollar66Jordanian dinar67Japanese yen68Kenyan shilling69Kyrgyzstani som70Cambodian riel71Comoro franc72North Korean won73South Korean won74Kuwaiti dinar75Cayman Islands dollar76Kazakhstani tenge77Lao kip78Lebanese pound79Sri Lankan rupee80Liberian dollar81Lesotho loti82Lithuanian litas83Libyan dinar84Moroccan dirham85Moldovan leu86Malagasy ariary87Macedonian denar88Myanma kyat89Mongolian tugrik90Macanese pataca91Mauritanian ouguiya92Mauritian rupee93Maldivian rufiyaa94Malawian kwacha95Mexican peso96Malaysian ringgit97Mozambican metical98Namibian dollar99Nigerian naira100Nicaraguan córdoba101Norwegian krone102Nepalese rupee103New Zealand dollar104Omani rial105Panamanian balboa106Peruvian nuevo sol107Papua New Guinean kina108Philippine peso109Pakistani rupee110Polish złoty111Paraguayan guaraní112Qatari riyal113Romanian new leu114Serbian dinar115Russian ruble116Rwandan franc117Saudi riyal118Solomon Islands dollar119Seychelles rupee120Sudanese pound121Swedish krona/kronor122Singapore dollar123Saint Helena pound124Sierra Leonean leone125Somali shilling126Surinamese dollar127South Sudanese pound128São Tomé and Príncipe dobra129Syrian pound130Swazi lilangeni131Thai baht132Tajikistani somoni133Turkmenistani manat134Tunisian dinar135Tongan paʻanga136Turkish lira137Trinidad and Tobago dollar138New Taiwan dollar139Tanzanian shilling140Ukrainian hryvnia141Ugandan shilling142United States dollar143Uruguayan peso144Uzbekistan som145Venezuelan bolívar146Vietnamese dong147Vanuatu vatu148Samoan tala149CFA franc BEAC150East Caribbean dollar151CFA franc BCEAO152CFP franc (franc Pacifique)153Yemeni rial154South African rand155Zambian kwacha156Zimbabwe dollar
Share this:FacebookTwitterLike this:Like Loading...

Best practice to set up mail

Setting up mail (header and message) properly is essential for successful mail delivery. In this article, I』ll describe how you can properly set up mail to maximize mail deliverability.

Avoid looking like spam

Mail service providers have been fighting relentless mail abuses like spam and spoofing. Since anti-abuse techniques aren』t flawless, there is always a possibility of false-positives; even if you are not a real spammer, behaving like a spammer can increase the likelihood of being treated that way.

Let』s consider the following situation. In the 「From」 header field, you can use an email address that has absolutely no connection to the domain of the site on which the contact form is placed. For instance, you can use your @yahoo.com address in the From field even when your site isn』t on yahoo.com. Consequently, the receiver sees an email claiming to be 「From」 yahoo.com, which is actually from a completely different server.

As you can do this, so can spammers — and they do. Therefore, if you use a From email address that does not belong on the site domain, especially if you haven』t implemented an authentication method (described later), it is difficult for mail service providers to distinguish your legitimate mail from spam.

Bottom line: in the From field, use an email address that belongs to the same domain as the site.

Specify Reply-to address#Specify Reply-to address

When you reply to email, the reply is normally sent to the address specified in the From field of the original mail. What if you didn』t want to receive replies at the From address?

In such cases, specify the address you want the receiver to reply to in the 「Reply-To」 header field of the original mail.

In the Contact Form 7 admin screen, you can set Reply-To in the Additional headers field in the Mail and Mail (2) sections.

Prepare a real 「WordPress」 email address

It is recommended you prepare a real wordpress@{your-site-domain} address on your host. Because the default mail template of Contact Form 7 uses this address in its From field, someone might try to send mail to this address. Some hosts also block outgoing mail from this address if it doesn』t exist.

WordPress also uses the wordpress@{your-site-domain} address in its notification mail, including comment notification and new user notification. It doesn』t hurt to make this address even if you don』t use Contact Form 7.

Utilize email authentication

Even if you set an email address belonging in the site domain in the From field, spammers can still send spoofed mail as if you sent it from your domain. As long as the possibility of email spoofing exists, the risk of mail service providers confusing your legitimate mail for spoofed mail remains.

To protect your mail from this risk, you can utilize email authentication methods including SPF and DKIM, which are supported by most major mail service providers. For detailed instruction about how to set up authentication methods, consult your provider』s support.

Make sure you have appropriate values in mail fields

Be careful when using values from optional form input fields. Are your mail header fields valid even when the values are empty?

Also, be careful not to make the message body empty or too short. It not only makes the mail look like spam, it makes mail sending function fail on some hosts.

See also

Setting up mailAdding Cc, Bcc and other mail headers

External links

WordPress emails are sent but not receivedAbout SPF records – Google Apps Administrator HelpAuthenticate email with DKIM – Google Apps Administrator HelpEmail service providers can』t send to / from Yahoo addressesDMARC.org – Domain-based Message Authentication, Reporting and Conformance
Share this:FacebookTwitterLike this:Like Loading...

Translating Contact Form 7

While the default language for this plugin is English, you can also use it in other languages. Contact Form 7 has been translated into more than 60 languages thanks to volunteer translators』 daily efforts. If you can』t find a translation for your language or you feel the existing translation needs correction or update, why not contribute to translation yourself?

To translate the plugin, use translate.wordpress.org (GlotPress). You only need your WordPress.org account to join the collaborative translation project.
https://translate.wordpress.org/projects/wp-plugins/contact-form-7
First, find the language to translate in the Locale column in the table. There are four sub projects: Development, Development Readme, Stable, and Stable Readme. I recommend starting from the Stable sub project.
Please refer to the Translator Handbook for the details of translate.wordpress.org.
Note that only Translation Editors can approve or reject suggested translations. If you』d like to become a Translation Editor for the Contact Form 7 translation project, please contact the General Translation Editors or administrators for the local WordPress.org site for the language, since they have the authority to do it.
Share this:FacebookTwitterLike this:Like Loading...

DOM events

Contact Form 7 provides several types of custom DOM events. You can utilize the events within your JavaScript code to run a function in a specific situation.

This article explains the DOM events that Contact Form 7 provides, in what cases those events fire, and how you can use them in your code. Since this article omits general explanation about the DOM event model, if you are not familiar with it please refer to external documents:

DOM events (Wikipedia)Overview of Events and Handlers (MDN)Document Object Model (DOM) Level 2 Events Specification

List of Contact Form 7 custom DOM events

wpcf7invalid — Fires when an Ajax form submission has completed successfully, but mail hasn』t been sent because there are fields with invalid input.wpcf7spam — Fires when an Ajax form submission has completed successfully, but mail hasn』t been sent because a possible spam activity has been detected.wpcf7mailsent — Fires when an Ajax form submission has completed successfully, and mail has been sent.wpcf7mailfailed — Fires when an Ajax form submission has completed successfully, but it has failed in sending mail.wpcf7submit — Fires when an Ajax form submission has completed successfully, regardless of other incidents.

Coding event handler

The code below is a simple example of registering an event handler. In this example, the function listens to the wpcf7submit event and just pops up an alert when the event occurs.

12345var wpcf7Elm = document.querySelector( '.wpcf7' ); wpcf7Elm.addEventListener( 'wpcf7submit', function( event ) {  alert( "Fire!" );}, false );

As you see in the example, you use addEventListener() to register an event handler function. Be aware that the event target (wpcf7Elm in the example) is not a form element, but its parent div element that has a wpcf7 class.

Since all of the wpcf7* events bubble up through a DOM tree toward the document root, if you don』t need to set a specific event target, you can make it simpler by setting the document property as the event target:

123document.addEventListener( 'wpcf7submit', function( event ) {  alert( "Fire!" );}, false );

User input data through the target contact form is passed to the event handler as the detail.inputs property of the event object. The data structure of detail.inputs is an array of objects, and each object has name and value properties.

This is an example that accesses the user input value through the 「your-name」 field:

12345678910document.addEventListener( 'wpcf7submit', function( event ) {  var inputs = event.detail.inputs;   for ( var i = 0; i < inputs.length; i++ ) {    if ( 'your-name' == inputs[i].name ) {      alert( inputs[i].value );      break;    }  }}, false );

There are also other properties of the event object that you can utilize in your event handler.

PropertyDescriptiondetail.contactFormIdThe ID of the contact form.detail.pluginVersionThe version of Contact Form 7 plugin.detail.contactFormLocaleThe locale code of the contact form.detail.unitTagThe unit-tag of the contact form.detail.containerPostIdThe ID of the post that the contact form is placed in.

For example, if you want to do something only with a specific contact form (ID=123), use the detail.contactFormId property as seen in the following:

123456document.addEventListener( 'wpcf7submit', function( event ) {  if ( '123' == event.detail.contactFormId ) {    alert( "The contact form ID is 123." );    // do something productive  }}, false );

See also

DOM event doesn』t work.

Share this:FacebookTwitterLike this:Like Loading...

如何解决配置错误

Contact Form 7 提供了 Configuration Validator，它可以验证您的联系表单配置以检测错误；这使您免于日后配置错误可能带来的麻烦。本系列文章解释了常见错误以及如何解决这些错误。

配置验证器的一般信息和介绍在关于配置验证器的常见问题解答中进行了解释。

表单选项卡中的错误

• 表单控件使用了不可用的名称。
• 多个表单控件位于单个标签元素中。
• 表单模板中使用了不可用的 HTML 元素。
• 点用于表单标签名称。

邮件选项卡中的错误

• 有一个可能的空字段。
• 使用了无效的邮箱语法。
• 发件人电子邮件地址不属于站点域。
• 存在无效的邮件标题字段。
• 附件文件不存在。
• 不允许使用 wp-content 目录之外的文件。
• 附件文件的总大小太大。

消息选项卡中的错误

• HTML 标签用于消息中。

「附加设置」 选项卡中的错误

• 使用过时的设置。

为什么我的 AJAX 联系表单不能正常工作？

Contact Form 7 支持 AJAX 提交。因此，Contact Form 7 中正确配置的联系表单的工作方式与以下演示表单完全相同。尝试在字段中输入任何文本并提交。

它怎么样？它是否像您网站上的联系表一样工作？有些人可能会惊讶地注意到您的表单和这个演示表单之间的差异，并认为，「我的表单在提交后总是重新加载页面，但这个表单不会。」

如果您的表单无法像这个演示表单那样工作，则可能是 Contact Form 7 的 JavaScript 在您的网站上无法正常运行。我会告诉你一些可能的原因。

• JavaScript 文件未加载这是我最近看到的原因。这是由于您的主题模板缺少用于排队 JavaScript 的调用函数。所需的功能是 wp_head() 和 wp_footer()，它们分别在 header.php 和 中 footer.php，在大多数正确的主题中。
• 与其他 JavaScript 的冲突许多插件和主题加载自己的 JavaScript 。其中一些可能创建不正确，因此与其他插件冲突。在大多数情况下，当发生此类冲突时，您可能能够通过浏览器的脚本控制台找到 JavaScript 错误。
• HTML 结构无效与其他 JavaScript 一样，Contact Form 7 的 JavaScript 遍历和操作 HTML 的结构。因此，如果原始 HTML 结构无效，它将无法工作。您可以使用 HTML 验证器检查您的 HTML 是否有效。在这种情况下，我建议使用 W3C 标记验证服务。

Stripe 集成

Contact Form 7 的 Stripe 集成模块允许您将信用卡支付小工具添加到您的联系表格中。您可以通过简单的步骤开始收款。使用此模块无需额外费用。

您需要一个 Stripe 帐户才能集成。如果您还没有，请先创建一个帐户。另外，请注意您需要一个支持 HTTPS 的站点才能使用此模块。

连接到 API #连接到 API

该模块使用 Stripe Elements 和 Stripe.js，并与 Stripe API 交互工作。要开始使用它，请先获取您的 API 密钥。

1. 登录到 Stripe 仪表板。
2. 转到开发人员 > API 密钥。
3. 复制实时模式的可发布密钥和秘密密钥。

然后，打开另一个浏览器选项卡并按照以下步骤操作：

1. 登录到 WordPress 仪表板。
2. 转到联系 > 集成。
3. 单击 Stripe 面板中的设置集成。
4. 将可发布密钥和密钥粘贴到面板的输入字段中。
5. 单击保存更改。

就这样。如果 API 与您的网站之间的连接已成功建立，您将在 Stripe 面板的边框周围看到蓝线。

设置您的联系表格#设置您的联系表格

与 API 建立连接后，下一步是通过为 Stripe 支付小工具添加表单标签来设置联系表单。

联系表格 7 为 [stripe] 支付小部件提供了表单标签。以下是 [stripe]form-tag 的示例：

[stripe currency:usd amount:700 "Proceed to checkout" "Pay 7 USD"]

一个 [stripe] 表单标签由两个选项和两个值组成。

该 currency 选项表示付款货币。该值必须是 Stripe 支持的三字母货币代码。

该 amount 选项是支付的金额。请注意，金额必须以货币的最小单位提供。例如，USD 的最小单位是 1 cent（不是 1 美元），所以 currency:usd amount:700 在上面的例子中会收取 7 美元 （不是 700 美元） 。

Stripe 对某些货币的收费金额有稍微复杂的规则。强烈建议您查阅 Stripe 的文档。

下面两个值 （"Proceed to checkout"和"Pay 7 USD"上面例子中） 是可选的，如果你设置了它们，它们将用作提交按钮的标签文本；第一个将在初始提交阶段使用，第二个将分别用于二级阶段。

由于 [stripe] 表单标签包含一个提交按钮，因此您不需要在同一表单中使用另一个提交按钮。如果您在付款表单中有 [submit] 表单标签，则可以安全地将其删除。

付款完成后，将向买家发送收据电子邮件。默认情况下，「您的电子邮件」 字段用于获取买家的电子邮件地址，因此建议在表单中包含 「您的电子邮件」 字段。

另一个有用的提示：向电子邮件模板添加一个特殊的邮件标签 。这将被一个指向 Stripe 付款页面的 URL 链接取代，您可以在其中获取有关付款的详细信息。 [_stripe_payment_link]

安全考虑#安全考虑

付款表格是诈骗者极具吸引力的目标。使用 Contact Form 7 提供的安全模块保护您的表单。至少，reCAPTCHA 是支付表单的必备条件。也建议一起使用 Akismet 。

不幸的是，一些骗子仍有可能通过严格的安全措施偷偷摸摸。 Stripe 提供了可靠的解决方案和手册，您可以在付款表格遭到滥用时使用。