연락 양식 7는 플러그인입니다 워드프레스(WordPress) 연락처 양식 작성에 매우 인기가 있습니다. HTML 코딩없이 양식을 작성할 수 있습니다. 이들 형태 와 같은 기능을 제공 할 수 있습니다 보안문자, 파일 다운로드, 설문 조사 분야 등 ...

기본 연락처 양식 7 스타일이 대부분의 기본 연락처 양식에 충분하지만 종종 변경해야합니다.

기본 양식 구조를 변경하여보다 쉽게 ​​액세스 할 수 있도록합니다. 그는 또한 단축 코드 [응답] 양식을 제출할 때 오류가있는 경우 양식에 표시되도록 양식 위에 표시합니다.

WordPress 웹 사이트를 만든 적이 없다면 FTP 클라이언트로 WordPress 블로그를 설치하는 방법

표준 형식의 경우 플러그인에서 생성 된 코드는 다음과 같습니다.

[응답] 귀하의 이름 (필수) [텍스트 * 귀하의 이름 ID : 귀하의 이름] 귀하의 이메일 (필수) [이메일 * 귀하의 이메일 ID : 귀하의 이메일] 귀하의 제목 [텍스트 귀하의 주제 ID : 귀하의 주제] 귀하의 메시지 [textarea 귀하의 메시지 ID : 귀하의 메시지] [ "보내기"제출]

일부 플러그인 형태의 문의 양식을 사용자 정의 할 수 7

1. 연락 양식 7 스타일

르 플러그인 연락 양식 7 스타일 다양한 스타일 중에서 선택할 수 있습니다.

Twenty Fifteen 테마 사용자에게는 호환되는 스타일도 있습니다.

스타일을 적용하려면 " 연락처 스타일> 빠른 편집 스타일을 적용 할 양식을 확인한 다음 " 업데이트 ".

2. 7 스킨 문의 양식

스킨을 사용하려면 문의 양식 7, 새로 만들기 연락처 양식 스킨 섹션까지 페이지를 아래로 스크롤합니다. 양식의 템플릿과 스타일을 선택할 수 있습니다.

다음과 같은 형태에 전용 모델을 찾을 수 있습니다이벤트, 등록 및 통지.

이것이 Twenty Fifteen 테마를 사용한 토파즈 스타일의 설문 양식입니다.

3. 접촉 양식의 재료 설계

이러한 스타일은 스타일을 기반으로 소재 디자인.

이 플러그인은 기본 양식을 삭제하고 단축 코드를 사용하도록 제안합니다.

다음은 Hestia 테마의 예입니다. 포인터를 양식의 필드로 이동할 때 부동 레이블에 유의하십시오.

일부 양식 7 테스트에 문의 워드 프레스 테마

ColorMag WordPress 테마가있는 문의 양식

대부분의 경우 Contact Form 7는 WordPress 테마의 스타일을 상속합니다. 이것이 주제의 경우입니다 산호 다크.

WordPress ColorMag 테마로 문의 양식

다음은 사용자 정의 스타일이없는 양식입니다. 그는 파란색 버튼의 색상을 상속받습니다. ColorMag 워드 프레스 테마.

먼저 양식의 배경 이미지로 사용할 사진을 업로드하고 텍스트에 파란색 그림자가있는 양식의 레이블 코드를 회색에서 흰색으로 변경했습니다.

다음 변경 사항은 양식 레이블과 양식 필드 사이의 여백을 늘리고, 빼기 단추를 변경하고, 포인터가 양식의 필드에 들어갈 때 테두리를 추가하는 것입니다.

양식 제출시 오류 / 성공 메시지 표시도 올바르게 표시되도록 변경해야합니다.

양식을 제출할 때 회전하는 GIF가 제대로 표시되지 않아 Loading.io의 대안을 찾아 CSS로 참조했습니다.

결과 양식은 다음과 같습니다.

다음은 코드입니다.

div.wpcf7 {여백 : 0; 패딩 : 1.5em; 배경 : url ( 'your_background_image_url_here'); -webkit-border-radius : 3px; -moz-border-radius : 3px; border-radius : 3px; } .wpcf7 label, .wpcf7-submit {color : white; 텍스트 그림자 : 1px 1px 0px rgba (40, 157, 204, 1); } .wpcf7 .wpcf7-form-control {10px 0 20px 0; } .wpcf7 .wpcf7-submit : 마우스 오버 {배경 : #186d8e; } .wpcf7-form-control : focus {border : 2px solid #289dcc; } div.wpcf7-response-output {background : #F8F8F8; 텍스트 정렬 : 가운데; 너비 : 92.5 %; 여백 : 1em0em1em0em; -webkit-border-radius : 3px; -moz-border-radius : 3px; border-radius : 3px; } span.wpcf7 - 유효하지 않은 팁 {background : #F8F8F8; 디스플레이 : 인라인 블록; 너비 : 자동; 패딩 : 1 %; -webkit-border-radius : 3px; -moz-border-radius : 3px; border-radius : 3px; } div.wpcf7 .ajax-loader {background-image : url ( 'your_loading_image_url_here'); 너비 : 50px; 높이 : 50px; }

코드에 낙서 할 필요가없는 경우 블로그에서 연락처 양식을 작성하는 10 WordPress 플러그인

연락처 양식을 작성하는 데 도움이되는 3 프리미엄 대안도 찾아보십시오. 

1. W8 문의 양식

W8 문의 양식은 플러그인 중 하나입니다. 연락처 양식 WordPress에서 가장 인기있는. 여러 수신자에게 제출, 애니메이션 지원, 무제한 양식 생성, 다양한 스타일 및 다양한 추가 사용자 정의 옵션과 같은 많은 기능을 제공합니다.

또한 웹 사이트 또는 블로그에 전문 시스템을 제공하여 고객과 더 쉽게 연락 할 수 있습니다. 필요와 취향에 따라 모든 양식을 사용자 정의 할 수 있습니다.

다운로드 | 데모 | 웹 호스팅

2. 문의 양식

Contact Us Form은 반응 형 WordPress 플러그인이자 간단한 도구이지만 방문자가 메시지를 남기고 연락 할 수있는 명확하고 고무적인 양식을 표시 할 수있는 사용자 지정 옵션이 풍부합니다.

필요한 필드를 정의하고 필드의 최상의 레이아웃을 선택한 후 고객이나 방문자가 제안이나 메시지를 남기도록 완전히 사용자 정의 할 수 있습니다.

메시지를받을 이메일 주소를 설정하고 가장 수익성 높은 방향으로 비즈니스를 성장시키는 데 사용하십시오.

다운로드 | 데모 | 웹 호스팅

3. 매끄러운 팝업 프로

슬릭 팝업 프로는 워드프레스 플러그인 플러그인으로 생성된 모든 형식을 변환하는 매우 간단하고 가벼운 문의 양식 7 팝업. 그녀는이 양식을 사용하여 아름답고 완벽하게 반응하는 팝업으로 변환합니다.

팝업 양식은 다음과 같은 여러 용도로 사용할 수 있습니다. 정보 수집 양식, 연락처 양식, 등록 양식, 견적 양식, 제안 / 불만 양식 및 기타.

다운로드 | 데모 | 웹 호스팅

추천 자료

웹 사이트 또는 블로그에서 연락처 양식을 더 잘 만들고 관리하는 데 도움이되는 기타 권장 리소스를 확인하십시오. 

• 양식의 보안 문자 확인을위한 6 WordPress 플러그인
• 워드 프레스 문의 양식 7와 문의 양식을 추가하는 방법
• WordPress에 GDPR 준수 양식을 만드는 방법

결론

짜잔! 이 튜토리얼의 전부입니다. 문의 양식을 사용자 정의하는 데 더 많은 아이디어가 있기를 바랍니다. 주저하지 마십시오 좋아하는 소셜 네트워크에서 친구들과 공유. 

그러나 귀하는 우리와 상담 할 수 있습니다. 능숙, 인터넷 사이트 제작 프로젝트를 수행하는 데 더 많은 요소가 필요하면 워드 프레스 블로그 제작.

그러나 그 동안 귀하의 commentaires 전용 섹션의 제안.

...