WordPress에서 Contact Form 7 양식의 스타일을 지정하는 방법

백만 명 이상의 활동적인 사용자가있는 Contact Form 7은 WordPress에서 가장 많이 사용되는 Contact Form 플러그인 중 하나입니다. 가장 큰 단점은 사용자가 추가 한 즉시 사용 가능한 양식이 매우 평범하다는 것입니다. 다행히 WordPress 테마에서 CSS를 사용하여 Contact Form 7의 스타일을 쉽게 지정할 수 있습니다. 이 기사에서는 WordPress에서 연락처 양식 7 양식의 스타일을 지정하는 방법을 보여줍니다..


노트 : 더 이상 Contact Form 7 플러그인을 권장하지 않습니다. 대신 가장 초보자 친화적 인 연락처 양식 플러그인 인 WPForms를 권장합니다. WPForms Lite를 무료로 다운로드 할 수도 있습니다..

WordPress에서 연락처 양식을 만드는 방법에 대한 단계별 가이드가 있습니다..

비디오 튜토리얼

WPBeginner 구독

동영상이 마음에 들지 않거나 지침이 더 필요한 경우 계속 읽으십시오..

시작하기

Contact Form 7 플러그인을 이미 설치했으며 첫 번째 Contact Form을 작성했다고 가정합니다. 다음 단계는 연락처 양식의 단축 코드를 복사하여 WordPress 게시물 또는 양식을 표시 할 페이지에 붙여 넣는 것입니다..

이 기사를 위해 기본 연락처 양식을 사용하여 WordPress 페이지에 추가했습니다. 테스트 사이트에서 연락 양식을 보았습니다..

기본 WordPress 테마를 사용하는 WordPress 사이트의 기본 연락처 양식 7 양식

보시다시피 연락처 양식은 WordPress 테마에서 일부 양식 스타일을 상속합니다. 그 외에도 매우 기본입니다.

CSS를 사용하여 Contact Form 7 양식의 스타일을 지정합니다. 모든 CSS는 테마 또는 하위 테마의 스타일 시트로 이동합니다.

WordPress의 스타일링 연락처 양식 7 양식

Contact Form 7은 양식에 대해 매우 유용하고 표준을 준수하는 코드를 생성합니다. 양식의 각 요소에는 적절한 ID 및 CSS 클래스가 있습니다..

각 문의 양식은 양식의 스타일을 지정하는 데 사용할 수있는 CSS 클래스 .wpcf7을 사용합니다..

이 예에서는 입력 필드에 Google 글꼴 Lora를 사용합니다. WordPress에서 Google 글꼴을 추가하는 방법보기.

div.wpcf7 {
배경색 : #fbefde;
경계 : 1px 단색 # f28f27;
패딩 : 20px;
}
.wpcf7 입력 [유형 ="본문"],
.wpcf7 입력 [유형 ="이메일"],
.wpcf7 텍스트 영역 {
배경 : # 725f4c;
색상 : #FFF;
폰트-패밀리 : lora, sans-serif;
글꼴 스타일 : 이탈리아;
}
.wpcf7 입력 [유형 ="제출하다"],
.wpcf7 입력 [유형 ="단추"] {
배경색 : # 725f4c;
폭 : 100 %;
텍스트 정렬 : 중앙;
텍스트 변환 : 대문자;
}

이 CSS를 적용한 후 연락처 양식을 보았습니다..

WordPress에서 CSS를 사용하여 스타일링 문의 양식 7 양식

다중 접점 양식 7 양식 양식

위에서 사용한 CSS의 문제점은 웹 사이트의 모든 Contact Form 7 양식에 적용된다는 것입니다. 여러 문의 양식을 사용하고 있고 다른 스타일을 지정하려면 문의 양식 7에서 생성 한 ID를 각 양식에 사용해야합니다..

수정하려는 양식이 포함 된 페이지를 열기 만하면됩니다. 마우스를 양식의 첫 번째 필드로 가져간 다음 마우스 오른쪽 단추를 클릭하고 요소 검사를 선택하십시오. 브라우저 화면이 분할되고 페이지의 소스 코드가 표시됩니다. 소스 코드에서 양식 코드의 시작 줄을 찾아야합니다..

연락 양식의 요소 ID 찾기

위 스크린 샷에서 볼 수 있듯이 문의 양식 코드는 다음 줄로 시작합니다.

id 속성은이 특정 양식에 대해 Contact Form 7에서 생성 한 고유 식별자입니다. 양식 ID와이 양식이 추가 된 게시물 ID의 조합입니다..

CSS에서이 ID를 사용하여 연락처 양식을 스타일링합니다. 첫 번째 CSS 스 니펫의 .wpcf7을 # wpcf7-f201-p203-o1로 바꿉니다..

div # wpcf7-f201-p203-o1 {
배경색 : #fbefde;
경계 : 1px 단색 # f28f27;
패딩 : 20px;
}
# wpcf7-f201-p203-o1 입력 [type ="본문"],
# wpcf7-f201-p203-o1 입력 [type ="이메일"],
# wpcf7-f201-p203-o1 텍스트 영역 {
배경 : # 725f4c;
색상 : #FFF;
글꼴 모음 : lora, "오픈 산스", 산세 리프;
글꼴 스타일 : 이탈리아;
}
# wpcf7-f201-p203-o1 입력 [type ="제출하다"],
# wpcf7-f201-p203-o1 입력 [type ="단추"] {
배경색 : # 725f4c;
폭 : 100 %;
텍스트 정렬 : 중앙;
텍스트 변환 : 대문자;
}

CSS Hero를 사용한 스타일링 문의 양식 7 양식

많은 WordPress 초보자는 CSS 작성 경험이 없으며 CSS를 배우는 데 시간을 보내고 싶지 않습니다. 운 좋게도, 당신의 연락처 양식뿐만 아니라 WordPress 사이트의 거의 모든 측면을 스타일링 할 수있는 초보자를위한 훌륭한 솔루션이 있습니다.

CSS Hero 플러그인을 설치하고 활성화 한 후 양식이 포함 된 페이지로 이동하십시오. CSS Hero 툴바를 클릭 한 다음 스타일을 지정할 요소를 클릭하십시오. CSS Hero는 코드를 작성하지 않고도 CSS를 편집 할 수있는 쉬운 사용자 인터페이스를 제공합니다..

CSS Hero를 사용하여 스타일링 연락처 양식 7 양식

CSS Hero에 대한 우리의 완전한 검토와 그것을 사용하여 WordPress 사이트의 스타일을 지정하는 방법을보십시오. CSS Hero 쿠폰 코드를 사용할 수 있습니다 WP 초보자 독점 34 % 할인을 받기 위해.

이 기사가 WordPress에서 Contact Form 7 양식의 스타일을 지정하는 방법을 배우는 데 도움이 되었으면합니다. WordPress에서 연락처 양식 팝업을 추가하는 방법에 대한 안내서를 참조하십시오..

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me