Wordpress 中的占位符图标联系表格 7

Posted 2023-03-05

【中文标题】Wordpress 中的占位符图标联系表格 7

【英文标题】：Placeholder icons Contact Form 7 in Wordpress

【发布时间】：2017-10-12 15:15:11

【问题描述】：

我正在尝试使用 Wordpress 中的“联系表格 7”插件自定义带有占位符图标和文本的联系表格。联系表格位于我正在使用“Themify”主题构建的网站中，其中包括“Font Awesome”（我想用作占位符图标的矢量图标）。

它会在 Windows PC 和 android 移动设备上正常显示：

但是，在 Apple 移动设备（iPhone 和 iPad）上，占位符图标（铅笔）和占位符文本（“消息（必填）”）是重叠的。上述字段（姓名、电子邮件、主题）的占位符图标和占位符文本显示正常。

我在 Contact Form 7 插件中的代码是：

<p><span class="fa fa-user"></span>[text* your-name placeholder "Your Name (required)"]</p>

<p><span class="fa fa-envelope"></span>[email* your-email placeholder "Your Email (required)"]</p>

<p><span class="fa fa-folder"></span>[text your-subject placeholder "Subject"]</p>

<p><span class="fa fa-pencil"></span>[textarea* your-message placeholder "Message (required)"]</p>

[submit "Send"]

CSS 样式代码是：

.wpcf7-form input 
border-radius:6px;                  /* Makes the edges rounded */

.wpcf7-form textarea 
border-radius:6px;          /* Makes the edges rounded */

.wpcf7-form .wpcf7-submit      
background:#00a6ca;         /* This edit the button colour */

.wpcf7 .wpcf7-text,
.wpcf7 .wpcf7-textarea
  text-indent: 35px;

.wpcf7 p position: relative; 
.wpcf7 p .fa
  position: absolute;
  color: #666666;
  z-index: 100;
  font-size: 18px;
  top: 28%;
  left: 1.5%;

.wpcf7 p .fa-pencil top: 5%; left: 1.5%

如果能提供任何可以解决此问题的帮助，我将不胜感激。

【参考方案1】：

好的，解决了！

改变：

.wpcf7 .wpcf7-text,
.wpcf7 .wpcf7-textarea
  text-indent: 35px;

到：

.wpcf7 .wpcf7-text,
.wpcf7 .wpcf7-textarea
  padding-left: 45px;

现在它适用于所有平台。

【参考方案2】：

联系表格 7 代码：

[text* your-name "Name"]

[email* your-email "Email"]

[text your-subject "Subject"]

[textarea your-message "Message"]

[submit "Submit "]

CSS 代码

.wpcf7-submit 
  font-family: FontAwesome;

我从contact form 7 with icon 的本教程中获得了更多详细信息