• 홈페이지
  • 조항
  • 주제
  • 귀하의 웹 사이트에 맞게 문의 양식 7의 스타일을 사용자 정의하는 방법

귀하의 웹 사이트에 맞게 문의 양식 7의 스타일을 사용자 정의하는 방법

게시 됨: 2018-10-10

백만 개 이상의 활성 설치가 있는 Contact Form 7은 지금까지 가장 인기 있는 WordPress 플러그인 중 하나입니다. 그 인기는 아마도 "단순하지만 유연하다"는 설명 뒤에 숨겨진 진실과 많은 관련이 있을 것입니다.

Contact Form 7을 사용하면 생성되는 간단한 HTML 마크업만 사용하여 여러 연락처 양식을 만들 수 있습니다. 생성된 각 양식은 양식을 표시할 해당 단축 코드를 배치하여 신속하게 배포할 수 있습니다. 페이지, 게시물 또는 위젯 영역에서 양식을 통해 제출된 메시지는 플러그인 설정에 제공된 이메일 주소로 전송되며 스팸은 CAPTCHA 및 Akismet 지원을 통해 방지됩니다.

Contact Form 7은 말 그대로 누구나 효과적으로 사용할 수 있을 정도로 간단합니다. 스타일링도 심플함을 추구합니다. 하지만 누군가에게는 너무 단순할 수도 있습니다. 기본적으로 Contact Form 7 플러그인은 양식의 스타일을 지정하지 않습니다. 그들이 가지고 있는 모든 스타일은 WordPress 테마의 스타일 시트에 있는 기본 스타일의 결과입니다.

일반적으로 다음과 같이 매우 기본적인 결과가 나타납니다.

Contact-Form-7-기본 스타일

불행히도 이러한 종류의 형식은 실제로 간단하고 유연하지만 웹 사이트의 다른 요소만큼 아름답게 디자인되지 않을 수 있습니다. 더 많은 스타일링 옵션이 있는 Contact Form 7의 대안을 찾는 많은 행복한 사용자를 남겨 둡니다. 고맙게도 약간의 CSS만 있으면 플러그인 대안이 필요하지 않습니다.

오늘의 게시물에서 저는 모든 테마를 사용하여 누구에게나 다양한 Contact Form 7 스타일링 가능성을 열어줄 일련의 팁을 공유할 것입니다.

귀하의 웹 사이트에 맞게 문의 양식 7의 스타일을 사용자 정의하는 방법

YouTube 채널 구독

연락처 양식 7 CSS를 편집할 위치(및 그 이유)

사용자 정의 CSS를 추가할 때 Contact Form 7 또는 상위 테마의 스타일 시트에 추가하지 않는 것이 중요합니다. 테마 및/또는 플러그인이 업데이트되는 즉시 변경 사항이나 추가 사항을 덮어씁니다.

대신 아래 CSS를 하위 테마의 CSS에 추가하고 싶을 것입니다. Jetpack의 사용자 지정 CSS 기능을 사용할 수도 있습니다. 또는 테마가 관리자 패널에 사용자 지정 CSS용 섹션을 제공하는 경우 해당 기능도 사용할 수 있습니다.

자, 이제 아래에서 다룰 스타일을 배치할 위치를 알았으므로 시작하겠습니다!

사이트 전체 양식 스타일을 만드는 방법

전체 양식에 적용되는 몇 가지 일반적인 편집 작업부터 시작하겠습니다. 클래스 선택기 .wpcf7 을 사용한 다음 그 아래에 스타일을 추가하여 이를 수행할 수 있습니다.

(또한 Contact Form 7 스타일이 시작되는 위치를 나타내기 위해 스타일 시트 내에 내가 아래에 작성한 주석 처리된 제목을 배치하는 것이 좋습니다.)

/* Contact Form 7 Styles
---------------------------------*/

.wpcf7 {

background-color: #F0F0F0;

border: 5px solid #666666;

}

위의 코드를 스타일 시트에 추가한 후 Contact Form 7로 생성하는 모든 양식은 방금 정의한 배경 및 테두리 스타일을 갖게 됩니다. 아래는 예시입니다.

Contact-Form-7-Custom-Styling-Whole-Form-1

보시다시피 간격 문제가 있습니다. 이 문제를 해결하려면 테두리와 내부 양식 요소 사이의 여백을 조정해야 합니다. 아래 코드로 이 작업을 수행할 수 있습니다.

.wpcf7-form {

margin-left: 25px;

margin-right: 25px;

margin-top: 25px;

내 테스트 사이트에서 결과는 다음과 같습니다.

Contact-Form-7-Custom-Styling-Whole-Form-2

참고: 이러한 스타일은 다른 테마로 작업할 가능성이 높기 때문에 양식에 약간 다른 방식으로 영향을 줄 수 있습니다. 그렇다고 해서 이 코드가 작동하지 않는다는 의미는 아니며, 사이트에 적합한 것을 얻기 위해 숫자를 약간 조정해야 할 수도 있습니다.

사이트 전체 양식 필드 스타일을 만드는 방법

Contact Form 7을 스타일링할 때 사람들이 가장 많이 받는 요청 중 하나는 필드 너비를 조정하는 방법입니다. 특히 메시지 영역은 그다지 확장되지 않습니다.

아래 코드는 메시지 영역을 원하는 너비로 확장합니다(조정 시). 내가 상상한 사용 사례에서 가장 잘 보이는 것처럼 95%로 예에서 내 것을 설정했습니다. 백분율 또는 고정 픽셀 수를 사용하여 필요에 맞게 설정할 수도 있습니다.

.wpcf7-textarea {

width: 85%;

}

입력 클래스 선택기를 조정하여 다른 필드의 너비도 조정할 수 있습니다.

.wpcf7 input {

width: 50%;

}

동일한 기준으로 모든 입력 필드를 조정하지 않으려면 관심 있는 필드만 선택하여 드릴다운할 수 있습니다. 아래 예에서는 제출 버튼이 도 영향을 받지 않습니다.

.wpcf7-text {
width: 50%;
}

위의 모든 변경 후 아래에 보이는 양식의 스타일을 지정할 수 있었습니다.

Contact-Form-7-맞춤형 스타일링

저는 개인적으로 버튼 색상을 변경하고 싶지 않았지만 그것이 또 다른 공통된 욕망일 가능성이 높다고 생각합니다. 따라서 버튼 색상을 변경하려면 아래 CSS를 사용하여 실험할 수 있습니다.

.wpcf7-submit {

background: #555555;

color: #ffffff;

}

이러한 CSS 비트를 사용하면 Contact Form 7로 만든 모든 양식이 위의 최종 이미지와 같이 보일 것입니다. 그러나 특정 양식이 다른 모든 양식과 다르게 보이도록 하려면 어떻게 해야 합니까?

특정 양식의 스타일을 지정하는 방법

특정 양식에 스타일을 수정하는 데 필요한 특정 CSS ID를 얻는 것은 다소 번거로울 수 있지만 약간의 수정만 하면 가능합니다.

가장 먼저 해야 할 일은 실제로 양식 단축 코드를 사이트에 추가하고 미리 보는 것입니다. (짧은 코드 안에 ID 번호가 있지만 실제로 필요한 전체 ID는 아닙니다.)

그런 다음 Google 크롬의 요소 검사 기능이나 다른 브라우저에서 유사한 기능을 사용하여 양식의 코드를 살펴봅니다. 이를 사용하여 전체 양식 ID를 찾을 수 있습니다.

제 경우에는 단축 코드의 ID 번호가 4407 이었습니다. 전체 ID는 wpcf7-f4407-p4405-o1 로 밝혀졌습니다 . 즉, 사이트 전체 설정과 다른 다양한 기준으로 아래 코드를 사용하여 특정 양식만 추가로 편집할 수 있습니다.

#wpcf7-f4407-p4405-o1 {
background-color: #333333;
border: 5px solid #0074A2;
}

특정 필드 스타일 지정 방법

특정 필드에 대해 동일한 작업을 수행할 수 있습니다. 브라우저에서 특정 CSS 클래스 또는 ID를 추적하는 대신 양식 빌더에 추가하기만 하면 됩니다.

양식 빌더에 배치할 태그를 생성할 때 ID, 클래스 또는 둘 다를 생성하기 위한 두 가지 옵션이 있음을 알 수 있습니다.

맞춤형 필드

이 예제에서 나는 Customized-field 라는 클래스를 생성하기로 선택했습니다. 동일한(또는 유사한 작업)을 수행하면 아래와 같이 새 ID(또는 클래스)를 사용하여 해당 필드의 스타일을 지정할 수 있습니다.

#customized-field {

color: #ffffff;

border: 2px solid #333333;

}

확인란 및 방사형 버튼에 대한 사용자 지정 양식 레이아웃을 만드는 방법

기본적으로 확인란과 반경은 왼쪽에서 오른쪽으로 표시됩니다.

Contact-Form-7-Custom-Styling-List-Items-0

그러나 개인 취향이나 위에서 아래로 표시하는 것이 더 나은 특정 사용 사례로 인해 아래 두 가지 옵션 중 하나를 사용할 수 있습니다.

확인란 또는 방사형 버튼을 위에서 아래로 왼쪽으로 표시하려면 이것을 사용하십시오.

.wpcf7-list-item {
display: block;
}

Contact-Form-7-Custom-Styling-List-Items-1

확인란과 방사형 버튼을 위에서 아래로 오른쪽에 표시하려면 이것을 사용하십시오. 또한 이 옵션에 대한 태그를 생성할 때 "레이블 우선" 확인란을 선택해야 합니다.

.wpcf7-list-item {
display: table-row;
}

.wpcf7-list-item * {
display: table-cell;
}

Contact-Form-7-Custom-Styling-List-Items-2

보너스 팁: 필드 제목을 제거하고 대신 자리 표시자 텍스트를 사용하는 방법

이 팁에서는 위의 다른 것과 같은 CSS를 사용할 필요가 없지만 Contact Form 7 양식 빌더에서 사용되는 마크업을 간단히 조정해야 합니다.

때로는 필드 제목이 필요하지 않습니다. 특히 필드에 속한 정보를 설명하는 자리 표시자 텍스트를 필드 내에 넣을 수 있는 경우에는 더욱 그렇습니다.

귀하의 사이트가 그러한 경우라면 양식 작성기에서 제목을 삭제하고 아래 예에서 수행한 것처럼 자리 표시 텍스트를 추가하기만 하면 됩니다.

<p></p>

<p>[email* your-email placeholder "Email Address"]</p>

<p></p>

<p>[textarea your-message placeholder "Talk to me"]</p>

결과는 덜 복잡하고 깨끗한 형태입니다.

Contact-Form-7-Custom-Styling-Remove-Titles

결론적으로

위의 예에서 Contact Form 7 플러그인이 고도로 사용자 정의 가능하다는 것을 보여주길 바랍니다. 사실, 약간의 수정이 필요하지만 예상할 수 있는 무료 플러그인입니다.

기본적으로 스타일 옵션이 없다는 것이 플러그인이 많은 사람들에게 잘 작동하는 이유의 큰 부분이라고 생각합니다. 따라서 더 많은 스타일을 원하는 사람이 위의 코드 예제 중 하나의 버전을 드롭하는 데 몇 분을 투자하는 것이 그것으로부터 많은 가치를 얻는 것은 공평합니다.

자신만의 Contact Form 7 스타일 팁이 있습니까? 사용하면서 공유하고 싶은 즐겨찾기가 있습니까? 아래 댓글에 한 줄 남겨주세요!

Dmitry Lemon5ky를 통한 기사 축소판 // shutterstock.com