programing

연락처 양식 7의 자리 표시자 - Wordpress

topblog 2023. 3. 29. 21:09
반응형

연락처 양식 7의 자리 표시자 - Wordpress

고객 사이트를 만들고 있는데 문제가 생겼어요.7번 양식을 사용하여 워드프레스 형식으로 연락 양식을 작성했습니다.이 플러그인은 매우 사용하기 쉽지만, 플러그인의 플레이스 홀더 속성을 사용하려고 했을 때 페이지를 로드할 때 플레이스 홀더가 표시되지 않았습니다.

Contactform 7에서 플레이스홀더를 설정하는 방법

[text* your-name placeholder "Name"]

플레이스 홀더 태그는 텍스트 영역에서는 정상적으로 동작하지만 위의 텍스트 상자에서는 동작하지 않습니다.내가 여기서 뭘 잘못하고 있는지 누가 설명해 줄 수 있나요?

편집

구글 크롬으로 요소를 검사하고 텍스트 상자를 검사하면 플레이스 홀더가 있다고 표시됩니다.하지만 자리 표시자는 표시되지 않습니다.

이것에 문제가 있는 유저가 있는 경우는, class: 또는 id: 속성을 사용하고 있을 가능성이 있습니다.

그 후 플레이스 홀더를 추가했을 때 효과가 있었습니다.

[email* your-email id:your-email class:form-control placeholder "ex. Jon.Smith@email.com"]

아주 간단합니다.플레이스 홀더를 다음과 같이 추가할 수 있습니다.

[text* first_name placeholder"First Name"] 

문서: https://contactform7.com/setting-placeholder-text/

같은 문제로 입력 배경색을 변경하면 배경색이 흰색으로 되어 있습니다.

따라서 테스트하기 위해 백라운드의 입력 색상을 변경하는 것이 좋습니다.

input[type="text"], textarea {
  background-color : #d1d1d1; 
}

[이름 자리 표시자 "이름" 텍스트*]이 구문은 연락처 폼 설정을 확인했을 때 입력한 올바른 구문입니다.저도 당신의 구문과 같은 것을 사용하고 있기 때문에, 제 연락처 폼에서는 정상적으로 동작하고 있었습니다.

클래스 또는 ID 속성을 사용하는 경우.다음 작업을 수행합니다.

[text* your-name class:form-control id:name placeholder "Enter Name"]

위의 답변과 같이 모든 것을 정확하게 적었음에도 불구하고 누군가가 여전히 이 문제를 겪고 있다면, 여기 제 문제의 해결책이 있습니다.

테마의 코드는 자리 표시자를 숨긴 것이며 연락처 양식 7과는 관련이 없습니다.

문제를 해결한 CSS 코드:

input::placeholder {
    color: #9c9c9c;
    opacity: 1;
}

플레이스 홀더를 이렇게 추가할 수 있습니다.

[text* full-name placeholder "Full Name"]

플레이스 홀더가 다시 표시되지 않으면 다음과 같이 플레이스 홀더의 스타일을 지정하십시오.

form input::placeholder{color: #9C9898; font-size: 14px;}

언급URL : https://stackoverflow.com/questions/24309750/placeholder-in-contactform-7-wordpress

반응형