Contact Form box

Hi,

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

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%;
}

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;
}

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.

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.

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;
}

You’re welcome. I would really appreciate if you have the time to leave a small review on ww.wp.xz.cn.