Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • July 12, 2018 at 2:34 pm #984779
    ac

    Hi, I’ve managed to add a background to my CF7 enquiry form and got the submit button full width, but am struggling with a couple of other things:

    • How to change the watermark text colour
    • How to get the small checkbox to sit to the left of the “Subscribe to emails” text (it is currently indented and then the text goes onto the next line)
    • How to change the colour of the border on each text/entry box (I’ve done the border of the form, but not of the boxes)

    Hope you can help… thanks.

    July 13, 2018 at 6:00 am #984960
    Rikard

    Hey andrea,

    1. I’m not sure what you mean by watermark, do you mean the placeholder text maybe?

    2. Please try this in Quick CSS:

    .wpcf7 input {
    width: auto !important;
}

    3. Please try this CSS as well:

    .wpcf7 input[type='text'] {
  border:1px solid red !important;
}

    Best regards,
    Rikard

    July 13, 2018 at 10:28 am #985086
    ac

    Hey Rikard thanks for the help.

    1. Yes – I mean the placeholder text – I’d like it a lighter font

    2. Have added that code which works for aligning the checkbox with the relevant text BUT I am now seeing the input boxes overflowing to the right, please can you advise a modification for this

    3. That code worked for some of the boxes but not all – it did not include the email and message boxes.

    See below for link and complete code I have in place for this now, in case there are any conflicts etc

    July 14, 2018 at 6:24 am #985400
    Rikard

    Hi,

    Please try this instead for the checkbox:

    .wpcf7 input[type="checkbox"] {
    width: auto !important;
}

    I couldn’t see any changes to the borders though? Did you remove the CSS again?

    Best regards,
    Rikard

    July 14, 2018 at 7:16 am #985416
    ac

    Hi Rikard, thanks that code works and sorted out the overflowing boxes. I’ve now removed a couple of other bits which I think no longer needed.

    The border colour code is in but I changed it from red to light grey, so you probably couldn’t see it. I’ve made it darker grey now, so you can see the difference. The name/number/postcode are too dark and different to email/message, which is the colour I want.

    Do you have a bit of code for making the placeholder text light grey? It’s too strong at the moment. Can I make it a bit smaller too?

    See below for link and complete code I have in place for this now.

    July 15, 2018 at 6:32 am #985570
    Rikard

    Hi,

    Thanks for the feedback. Try this for the placeholders:

    .wpcf7 input::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: pink;
}
.wpcf7 input::-moz-placeholder { /* Firefox 19+ */
  color: pink;
}
.wpcf7 input:-ms-input-placeholder { /* IE 10+ */
  color: pink;
}
.wpcf7 input:-moz-placeholder { /* Firefox 18- */
  color: pink;
}

    And this for the missing border fields:

    .wpcf7 input[type='email'], .wpcf7 textarea {
  border: 1px solid #bbb !important;
}

    Best regards,
    Rikard

    July 16, 2018 at 10:23 am #985886
    ac

    Thanks Rikard – all works perfectly – I just need a bit of code to change the placeholder text in the message field as well if possible.

    July 17, 2018 at 4:40 am #986232
    Rikard

    Hi,

    Thanks for the feedback, are you looking to change the placeholder text or style it in a different way? If you want to change it then you should be able to do so by editing the form itself.

    Best regards,
    Rikard

    July 17, 2018 at 10:35 am #986340
    ac

    Sorry it’s the colour of placeholder text that I want to change for the message field – the code you’ve given me works on the text/number fields (lighter grey) but not the message field (still showing darker grey).

    July 17, 2018 at 2:21 pm #986440
    Rikard

    Hi,

    Thanks for that, you can simply use the CSS I sent earlier. Just replace input with textarea:

    .wpcf7 input::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: pink;
}
.wpcf7 input::-moz-placeholder { /* Firefox 19+ */
  color: pink;
}
.wpcf7 input:-ms-input-placeholder { /* IE 10+ */
  color: pink;
}
.wpcf7 input:-moz-placeholder { /* Firefox 18- */
  color: pink;
}

    Best regards,
    Rikard

    July 18, 2018 at 12:34 pm #986928
    ac

    Perfect, thanks for all your help.

    July 19, 2018 at 5:25 am #987259
    Rikard

    Hi,

    Great, glad we could help. Please let us know if you should need any further help on the topic or if we can close it.

    Best regards,
    Rikard

    July 19, 2018 at 12:29 pm #987355
    ac

    Hi, all sorted thanks – please go ahead and close the thread.

    July 20, 2018 at 7:07 am #987708
    Rikard

    Hi,

    Thanks for letting us know. Please open a new thread if you should have any further questions or problems.

    Best regards,
    Rikard

  • Author
    Posts
Viewing 14 posts - 1 through 14 (of 14 total)
  • The topic ‘CF7 styling queries’ is closed to new replies.