How do I change the placeholder text color?

Go to Forms → Settings → Custom CSS & JS and at the Custom CSS (All devices) field add the following code.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
.quform ::-webkit-input-placeholder {
  color: #123456;
  opacity: 1;
}
.quform ::-moz-placeholder {
  color: #123456;
  opacity: 1;
}
.quform :-ms-input-placeholder {
  color: #123456;
  opacity: 1;
}
.quform :-moz-placeholder {
  color: #123456;
  opacity: 1;
}
.quform ::placeholder {
  color: #123456;
  opacity: 1;
}
.quform ::-webkit-input-placeholder {
  color: #123456;
  opacity: 1;
}
.quform ::-moz-placeholder {
  color: #123456;
  opacity: 1;
}
.quform :-ms-input-placeholder {
  color: #123456;
  opacity: 1;
}
.quform :-moz-placeholder {
  color: #123456;
  opacity: 1;
}
.quform ::placeholder {
  color: #123456;
  opacity: 1;
}
  • Replace each occurrence of #123456 with the desired CSS color for the placeholder text
12
3
4
56
7
8
910
11
12
1314
15
16
1718
19
20
.quform-1 ::-webkit-input-placeholder {  color: #123456;
  opacity: 1;
}
.quform-1 ::-moz-placeholder {  color: #123456;
  opacity: 1;
}
.quform-1 :-ms-input-placeholder {  color: #123456;
  opacity: 1;
}
.quform-1 :-moz-placeholder {  color: #123456;
  opacity: 1;
}
.quform-1 ::placeholder {  color: #123456;
  opacity: 1;
}
.quform-1 ::-webkit-input-placeholder {
  color: #123456;
  opacity: 1;
}
.quform-1 ::-moz-placeholder {
  color: #123456;
  opacity: 1;
}
.quform-1 :-ms-input-placeholder {
  color: #123456;
  opacity: 1;
}
.quform-1 :-moz-placeholder {
  color: #123456;
  opacity: 1;
}
.quform-1 ::placeholder {
  color: #123456;
  opacity: 1;
}
  • On lines 1, 5, 9, 13 and 17, replace the number 1 with the form ID
  • Replace each occurrence of #123456 with the desired CSS color for the placeholder text

Note: it doesn’t seem to work if the selectors are combined into a single style, hence the separate styles.

Still having trouble? Head over to the forums.

Forums