contact form 7 로 확인 화면의 구현에 contact form 7 add confirm 를 사용했을 때에 걸린 부분을 정리해 둡니다.

체크 박스를 오리지널 디자인으로 실장하고 있으면, 확인을 했을 때에 선택되어 있지 않게 되어 버린다
(실제로는 선택되어 있지만, 숨어 버리고 있다) 때문에, 그 해결책을 정리해 둡니다.
이런 느낌으로 선택되어 있지 않게 되어 버렸을 때의 해결 방법.

전제

· contact form 7 add confirm 사용
· 체크 박스 사용

그럼 contact form 7 로 체크 박스를 작성하는 곳으로부터 차례로 설명해 갑니다.

확인란 만들기

우선은 contact form 7 의 초기 화면입니다.


확인란을 추가합니다.


추가되었는지 확인하고 저장합니다.


이런 식으로 작동합니다.

contact form 7 add confirm에서 확인 화면 추가

이 플러그인을 설치합니다.


추가하면 화면에 다음과 같이 추가됩니다.


아래와 같이 추가하여 표시를 봅시다.


이렇게 작동합니다.

확인란에 원래 CSS를 적용했을 때의 해결 방법

이렇게 매우 간단하게 확인 화면을 구현할 수 있죠.
그렇지만, 여기로부터가 본제가 됩니다만 체크 박스에 오리지날의 디자인을 대었을 때에 확인을 누르면
선택되지 않았습니다.



이것이라면,
"입력했는데 사라져버린다, 또 한번 할까.
되어 버립니다군요.

이것이 무슨 일이 일어나고 있는지 확인 화면에서 확인했습니다.

■입력했을 때의 바나나의 항목


■확인했을 때의 바나나의 항목

보시다시피 알 수 있듯이 input 태그가 추가되었습니다.

이것이 나쁜 짓을하고 있습니다만, 선택했을 때에 체크 박스를 맞추는 CSS를 확인하면 아래와 같이 쓰고 있었습니다.

style.css

input[type="checkbox"]:checked + .wpcf7-list-item-label:after {/*チェックアイコン*/
  content: "";
  display: block;
  position: absolute;
  top: -2px;
  left: 16px;
  width: 20px;
  height: 20px;
  background: url(../../assets/check.png) no-repeat center;
}

흠흠, input[type="checkbox"]:checked + .wpcf7-list-item-label:after 가 수상하네요.
이 ＋ 라는 것은, 인접 셀렉터라고 좋은 직후에 인접하고 있는 요소에 스타일을 적용하는 것 같습니다.

그래서, 아래와 같이 input 태그가 자동으로 생성되어 버리면 직후의 인접하고 있는 요소가 바뀌어 버리는 것이군요.
이 경우 처음에는 span 태그가 직후였지만 input 태그가 직후가 되어 버렸다는 것입니다.


그러므로, 직후의 인접하고 있는 요소의 지정으로부터, ~ 에 재작성해 봅시다!説明:E ~ F …… E要素の後ろにある同じ階層のF要素 h tp // w w. htmq. 이 m/세ㄴ c와 r/p로. shtml

다시 쓴 코드가 여기

style.css

input[type="checkbox"]:checked ~ .wpcf7-list-item-label:after {/*チェックアイコン*/
  content: "";
  display: block;
  position: absolute;
  top: -2px;
  left: 16px;
  width: 20px;
  height: 20px;
  background: url(../../assets/check.png) no-repeat center;
}

위와 같이 다시 작성하면, 이와 같이 확인 화면을 눌러도, 선택된 상태가 유지되고 있는 것을 확인할 수 있게 됩니다.

요약

플러그인을 사용할 때는 자동으로 생성되는 코드가 있음을 이해하고 검증 화면을 확인하는 것이 중요합니다.

※본 기사에서 사용한 코드는 이쪽을 참고로 했습니다. 엄청 알기 쉽기 때문에 봐주세요.
htps // 유야우 ょr98. 메 / 콘 ct 후 rm 7