[英]Placeholder icons Contact Form 7 in Wordpress
Im trying to customize a contact form with placeholder icons and text, using the 'Contact Form 7' plugin in Wordpress.我尝试使用 Wordpress 中的“Contact Form 7”插件自定义带有占位符图标和文本的联系表单。 The contact form is in a website I'm building using the 'Themify' theme which includes 'Font Awesome' (vector icons that I want to use as placeholder icons).
联系表单位于我使用“Themify”主题构建的网站中,该主题包括“Font Awesome”(我想用作占位符图标的矢量图标)。
It displays as it should on Windows PC and Android mobile devices:它在 Windows PC 和 Android 移动设备上正常显示:
However, on Apple mobile devices (iPhone and iPad), the placeholder icon (pencil) and placeholder text ('Message (required)') are superposed.但是,在 Apple 移动设备(iPhone 和 iPad)上,占位符图标(铅笔)和占位符文本(“消息(必需)”)是重叠的。 The placeholder icons and placeholder texts of the fields above (name, email, subject) display fine.
上面字段(姓名、电子邮件、主题)的占位符图标和占位符文本显示正常。
My code in the Contact Form 7 plugin is:我在 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"]
The CSS styling code is: 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%}
I would be grateful for any help that could solve this issue.我将不胜感激任何可以解决此问题的帮助。
Ok, solved it!好的,解决了!
Changed:更改:
.wpcf7 .wpcf7-text,
.wpcf7 .wpcf7-textarea{
text-indent: 35px;
to:到:
.wpcf7 .wpcf7-text,
.wpcf7 .wpcf7-textarea{
padding-left: 45px;
And now it works on all platforms.现在它适用于所有平台。
Contact Form 7 Code:联系表格 7 代码:
[text* your-name "Name"]
[email* your-email "Email"]
[text your-subject "Subject"]
[textarea your-message "Message"]
[submit "Submit "]
CSS Code CSS 代码
.wpcf7-submit {
font-family: FontAwesome;
}
I've got more details from this tutorial for contact form 7 with icon我从本教程中获得了带有图标的联系表 7 的更多详细信息
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.