使用 CSS 修复了 Contact Form 7 插件创建的 “联系我们”的外观。
Contact Form 7 使用 CSS 来固定标准的外观和感觉
Contact Form 7 是一款可让您轻松创建 “查询表格”等输入表单的插件。
他还是多语言插件 Bogo 的开发者。
在日本，这个插件可能是创建 “查询表格”表单的事实标准。许多人还将其用作 reCAPTCHA 的插件。
作者自己说，这个插件的外观应该 “用 CSS 来修复”。
Contact Form 7 不提供任何自定义样式。 编辑 CSS 样式表是为联系表单设计样式的最佳方法。
因此，我使用 CSS 对外观进行了修复。
修改 CSS
标准输入框的文字大小没有衬垫，看起来很拥挤。我已对此进行了修正，使其看起来更宽敞、更圆润。
子主题 style.css 中应包含的内容。
/* 20250224 Contact Form 7 CSS customize */
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 textarea {
font-size: var(--wp--preset--font-size--large);
width: 80%;
border-radius: 10px;
padding: 10px 10px;
border: 1px solid #516028;
margin-top: 5px;
margin-bottom: 20px;
background-color: #ffffff; /* 白 */
resize:none;
}
.wpcf7 input[type="text"]:focus,
.wpcf7 input[type="email"]:focus,
.wpcf7 textarea:focus {
border:2px solid #516028;
}
.wpcf7 input[type="text"]::placeholder,
.wpcf7 input[type="email"]::placeholder,
.wpcf7 textarea::placeholder {
color: #c3c3c3; /* light gray */
}
.wpcf7 input[type="submit"] {
font-size: var(--wp--preset--font-size--large);
border-radius: 10px;
padding: 10px 20px;
background-color: #516028;
color: white;
cursor: pointer;
border: 1px solid #516028;
}
.wpcf7 input[type="submit"]:hover {
color: #516028;
background-color: #dae7bd;
}
.wpcf7 span.wpcf7-not-valid-tip {
width: 80%;
}
.wpcf7 div.wpcf7-response-output {
width: 80%;
}
内容简介
- 第 2-14 行： 更正了输入区的外观
- 第 15-19 行：选择时边框变粗
- 第 20 至 24 行：输入前显示的文本颜色为浅灰色
- 第 25-37 行：更改 “提交 “按钮的外观，在悬停时倒置
- 第 38-43 行：错误信息
现在看起来就像上图一样。
添加占位符文本
可以在 Contact Form 7 设置中为每个表单设置占位符。占位符是在输入文本之前显示的临时文本字符串。
<label> 姓名
[text* your-name autocomplete:name placeholder "您的姓名"] </label>
<label> 电子邮件地址
[email* your-email autocomplete:email placeholder "您的电子邮件地址"] </label>
<label> 标题
[text* your-subject placeholder "标题"] </label>
<label> 信息正文 (可选)
[textarea your-message placeholder "请在此处输入您的信息正文"] </label>
[submit "传送"]如果设置了占位符，后面的字符串就会变成占位符文本。它是浅灰色的，不显眼。
修改多语言页面
在编辑 Contact Form 7 插件时，有一个名为 “信息 “的信息列表，会在各种情况下显示。
该网站使用多种语言，我为每种语言创建了 “查询表格”表单。网站的所有信息也都用每种语言重新编写。现在，包括错误信息在内的所有信息都以各种语言显示。
Contact Form 7 の注記
Contact Form 7 插件设置页面顶部会出现一条信息。
reCAPTCHA 用户请注意： 谷歌计划让所有 reCAPTCHA 用户迁移到 reCAPTCHA 企业版。
它指出，下一个版本将支持谷歌云版本的 reCAPTCHA。它还宣布支持 Cloudflare 的 Turnstile，作为 reCAPTCHA 的替代。
上图显示的是已经应用的 Turnsti le。这将在另一篇文章中讨论。
Musubi
使用 CSS 修正了使用 Contact Form 7 创建的 “查询表格” 的外观。我在文字和边框之间增加了更多空间，并将边角修圆。
同样的方法也用于修复评论张贴部分。
在智能手机上，您可以从页脚菜单进入 “联系我们 “表单。请使用该表格与我联系。
发表回复