Currently, I am in the process of customizing a contact form by incorporating placeholder icons and text using the 'Contact Form 7' plugin within Wordpress. This particular contact form is situated on a website that I am constructing with the 'Themify' theme, which conveniently includes 'Font Awesome' (a collection of vector icons that serve as perfect placeholder icons).
Everything appears correctly when viewed on Windows PCs and Android mobile devices:
https://i.stack.imgur.com/emPU4.png
However, when accessed on Apple mobile devices, such as iPhones and iPads, the placeholder icon (which resembles a pencil) and the placeholder text ('Message (required)') are overlapping. Conversely, the placeholder icons and texts for the fields above (name, email, subject) exhibit no issues.
The code snippet utilized within the Contact Form 7 plugin can be seen below:
<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"]
Below lies the CSS styling code incorporated within the project:
.wpcf7-form input {
border-radius:6px; /* Rounds the edges */
}
.wpcf7-form textarea {
border-radius:6px; /* Rounds the edges */
}
.wpcf7-form .wpcf7-submit {
background:#00a6ca; /* Adjusts the button color */
}
.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%}
If anyone holds the key to resolving this dilemma, it would be greatly appreciated.