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 提供了可靠的解決方案和手冊，您可以在付款表格遭到濫用時使用。