Contact Form box

Hi,

please provide a link to the page with the boxes. Then I can give you the CSS code you need.

https://tuyograf.com/met/iletisim/

Please try this CSS:

input[type="text"], input[type="email"], input[type="url"], input[type="password"], input[type="search"], input[type="number"], input[type="tel"], input[type="range"], input[type="date"], input[type="month"], input[type="week"], input[type="time"], input[type="datetime"], input[type="datetime-local"], input[type="color"], textarea, label {
  width: 100%;
}

Okay.

? How can I set the distance between label? (label padding)
? Is it possible to give a writing effect?
https://demo.spyropress.com/themeforest/giving/contact/

Thanks

The first rule is for the label distance, the second rule is for the distance between the send button and the bottom of the page.

.wpcf7 label {
  margin-bottom: 20px;
}

.wpcf7 .button, .wpcf7 input[type="button"], .wpcf7 input[type="reset"], .wpcf7 input[type="submit"] {
  margin-bottom: 40px;
}

Do you mean the red border with “writing effect”? Then you can use this:

.wpcf7-form-control:focus {
  border-color: #f83730;
}

textarea {
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -ms-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}

Hi,

? 2 code is not working.
https://i.hizliresim.com/vj5roR.jpg

? I mean, the text animation on the link.

Thanks

You said that this code isn’t working:

.wpcf7 .button, .wpcf7 input[type="button"], .wpcf7 input[type="reset"], .wpcf7 input[type="submit"] {
  margin-bottom: 40px;
}

But in my browser I can see it works. The button “G?nder” has more margin to the bottom.

Please provide a screenshot which text has got an animation. I don’t know which one you mean.

? Yes it works.

? https://i.hizliresim.com/lOjm5X.jpg

Thank you for the clarification.

What you are using are the Contact Form 7 values. They are inside the input fields directly as text. You have to use placeholder text instead. This disappears after clicking inside.

? border hover color edit?
? text color edit?

The color of the placeholder can’t be changed as far as I know. The written text inside the form elements can be handled with this code:

input, select, textarea {
  color: #337ab7;
}

To change the border color on hover use this:

.wpcf7-form-control:hover {
  border-color: #f83730;
}

Support is great ..
Thank you so much.

You’re welcome. I would really appreciate if you have the time to leave a small review on www.remarpro.com.