Docs

[pammyap]

Hi! Need some help:

1) Submit button gets bigger on hover, want to keep it the same as off hover
2) Change input text colour
3) How do I move error messages into the placeholder instead of having them appear below the fields?

[pammyap]

This reply has been marked as private.

[Rue Nel]

Hello There,

Thanks for writing in!

#1] To resolve this, please add the following css code in the customizer, Appearance > Customize > Custom > CSS

.x-btn:hover, .button:hover, [type="submit"]:hover {
    border-width: 1px;
}

#2] To change the input text color and the placeholder color, please use this code:

.wpcf7 input[type="text"], .wpcf7 input[type="email"], .wpcf7 textarea {
    color: red;
}

.wpcf7 input[type="text"]::-webkit-input-placeholder, 
.wpcf7 input[type="email"]::-webkit-input-placeholder, 
.wpcf7 textarea::-webkit-input-placeholder {
  color: orange;
}

#3] To position correctly the error messages, please update your custom code and make use of this code instead;

span.wpcf7-not-valid-tip {
    position: absolute;
    top: 20px;
    left: 20px;
    background: transparent;
    color: red;
    border: 0;
}

We would loved to know if this has work for you. Thank you.

[pammyap]

This reply has been marked as private.

[Paul R]

Hi,

Please replace the css from #3 with this.

span.wpcf7-not-valid-tip {
    position: absolute;
    top: 20px;
    left: 10px;
    background: #2e3847;
    color: red;
    border: 0;
    padding-left: 20px;
}

Hope that helps.

[pammyap]

Hi, that doesn’t do anything unfortunately.. error message still overlaps the text in the placeholder and remains there while I type in the field.

[Rue Nel]

Hello There,

Thanks for updating in!

Do you want something like this:
http://prntscr.com/dz41wo

Please disregard the code we gave in our previous reply and make use of this code instead:

#responsive-form .wpcf7-form-control-wrap {
  position: relative;
}

#responsive-form span.wpcf7-not-valid-tip {
    position: absolute;
    top: -7px;
    width: 100%;
    background-color: #29302F;
    text-align: left;
    padding: 12px 12px 12px 12px;
    left: 0;
    border: solid 1px red;
    cursor: text;
}

Hope this helps. Please let us know how it goes.

[pammyap]

Thank you for that….it fixed the overlap problem!
But now, when I try to fill out the field, the error message and background stays so I cannot see what I am trying to type…

[Lely]

Hi There:

Unfortunately, I cannot duplicate the issue you were having. I did test on different browser:
Chrome:http://screencast-o-matic.com/watch/cbVZQHQ7gs
Firefox:http://screencast-o-matic.com/watch/cbVZQdQ7gL
IE:http://screencast-o-matic.com/watch/cbVZQ7Q7gR

[pammyap]

This reply has been marked as private.

[Joao]

Hi There,

Your page : http://9namlygrove.com/register-interest/ is loading blank on my end.

Does it work on yours? On Which page you have applied the form?

Thanks

[Author]

Posts