How to add phone field ?

Try adding this in custom css

.wpcf7 input[type="tel"] {
 width: 100%;
}

Thank you for the feedback.

The code you gave me fixed the width but the issue with the “line” style is still there.

https://s15.postimg.org/avi3n0d0r/444.png

A quick google found this, https://themegrill.com/support-forum/topic/styling-fields-in-contact-forms/

Try the css mentioned there

input[type="tel"] {
 background-color: #f8f8f8;
    border: 1px solid #eaeaea;
    border-radius: 3px;
    line-height: 20px;
    margin: 0 0 30px;
    padding: 1%;
    width: 98%;
}

Obviously you’ll need to remove the width css I mentioned before.

I’m unsure why the field isn’t getting the CSS from your theme, i’m by no means an expert but if it were me I would use a colour picker to find the background colour of the other fields and then add

background-color: (whatever hex value the other colour is);

before the closing bracket above.

Thanks for the feedback, once again !

The style works ok now by adding the second CSS code you posted !

input[type=”tel”] {
background-color: #f8f8f8;
border: 1px solid #eaeaea;
border-radius: 3px;
line-height: 20px;
margin: 0 0 30px;
padding: 1%;
width: 98%;
}

I feel like dumb that I did not find the topic you found

https://themegrill.com/support-forum/topic/styling-fields-in-contact-forms/

and even more now that I’ve just realized that adding this code to my CF7 form

<label> Phone Number (required)
[tel* phone] </label>

is not enough, as the email I’m getting does not contain the phone number the sender has entered !
I guess I have to re-read the instructions on the CF7 website.

Thanks again.

Look in the mail tab, in the email content do you have [phone] somewhere? If you’re not sure post your form code and email code here and i’ll take a look.

Thank you !

I’ve added the [phone] tag in the message body box of the mail tab and now it seems to work fine !

??