This is the ‘code’ for the three lines in the photo.
Name: [text* your_name autocomplete:name]
E-mail: [email* your_email autocomplete:email]
Phone: [tel* your_phone autocomplete: tel]
Why does the last line have different CSS/Formating? TIA
Where can we see the website in question?
Thanks for any light you can shed on the problem 🙂
https://cyclewales.net/hire-form-test/
Try switching theme to the default one. This is purely a matter of CSS style rules. Specifically, the current theme’s stylesheet does not apply necessary style rules to tel or date type fields.
See also: Why does my email address input field look different than other text input fields?
I don’t get it! Also changing theme is not something I can do easily :’-(
My HTML looks like this:
<p><label> Name: <span class="wpcf7-form-control-wrap" data-name="your_name"><input size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" autocomplete="name" aria-required="true" aria-invalid="false" value="" type="text" name="your_name"></span> </label><br>
<label> E-mail:<span class="wpcf7-form-control-wrap" data-name="your_email"><input size="40" class="wpcf7-form-control wpcf7-text wpcf7-email wpcf7-validates-as-required wpcf7-validates-as-email" autocomplete="email" aria-required="true" aria-invalid="false" value="" type="email" name="your_email"></span> </label><br>
<label> Phone: <span class="wpcf7-form-control-wrap" data-name="your_phone"><input size="40" class="wpcf7-form-control wpcf7-text wpcf7-tel wpcf7-validates-as-required wpcf7-validates-as-tel" aria-required="true" aria-invalid="false" value="" type="tel" name="your_phone"></span> </label>
</p>
The ‘labels’ appear to be under the form class “wpcf7-form”, so why is the style being applied to two of the three labels? The word text doesn’t appear in the CSS file at all so I don’t get what the class wpcf7-text could do, and tel and email once each with no clue why one gets different treatment.
Your help is much appreciated.
