Support » Theme: Spacious » Contact Form 7 Formatting

  • Resolved virginia76

    (@virginia76)


    Hi there,

    I’m using Contact Form 7 with the Spacious Theme and have found that the Telephone Number field on the form formats differently to the other fields. I raised the issue on the Contact Form 7 support forum and they’ve said it is because the Spacious Theme CSS only applies the formatting to text fields not tel fields. What additional CSS can I add to apply the same formatting to the tel fields?

    Many thanks
    V

    The page I need help with: [log in to see the link]

Viewing 9 replies - 1 through 9 (of 9 total)
  • Hi,

    For setting the same color to the above-mentioned field, can you go to the Appearance > Customize > Additional CSS in the dashboard and insert the code mentioned below:

    input{
    	background-color: #3E3E3E;
    	border: 1px solid #444444;
    }

    Thanks.

    Great thank you, that sorts out the colour but the height of the input box and the padding around is also different to the other input boxes – how can I make that the same?

    Many thanks
    V

    Hi,

    Your site doesn’t seem to be accessible at the moment. Could you check it and make it accessible?

    Thanks.

    oh sorry I transferred domain name and forgot to update the thread. It’s now at http://www.thewindowtintingcompany.co.uk

    the height and width of the ‘Your Phone Number’ input box is different to the other input boxes and the padding after the box is also different to the padding after the other input boxes.

    Many thanks
    V

    Hi,

    Can you add the below-mentioned code inside the Additional CSS box?

    input{
    	width: 98%;
    	padding: 1%;
    	margin: 0 0 30px;
    	border-radius: 3px;
    }

    Thanks.

    virginia76

    (@virginia76)

    Hi Rajesh,

    Thank you – that works to make the input box format correctly but it also impacts the send button of the form making it stretch across the width of the form – see http://thewindowtintingcompany.co.uk/careers

    Is there a way to fix the input box without impacting the send button?

    Many thanks
    V

    Hi,

    Can you add [type=tel] after input in the above-mentioned code? After the addition, it should look like as shown below:

    input[type=tel]{
    	width: 98%;
    	padding: 1%;
    	margin: 0 0 30px;
    	border-radius: 3px;
    }

    Thanks.

    Fantastic thanks Rajesh, that’s worked perfectly 🙂

    Hi,

    Glad to know it worked. Feel free to ask again if you get any issues regarding the theme. If you liked this theme, you can help us by leaving a review.

    Thanks.

Viewing 9 replies - 1 through 9 (of 9 total)
  • You must be logged in to reply to this topic.