연락처 양식을 사용자 정의하는 방법 7 쉬운 방법으로 스타일 지정

문의 양식은 모든 웹사이트에서 매우 중요한 요소입니다. 우리는 그것들을 사용하여 다양한 유형의 정보를 수집하고 공유하므로 웹사이트의 나머지 부분과 마찬가지로 표시되도록 주의해야 합니다 . 너무 단순하고 페이지와 어울리지 않는 듯한 스타일의 문의 양식은 사용자에게 신뢰감을 줄 수 없으며, 청중이 원하는 시간에 청중을 잃는 것은 안타까운 일입니다. 한 걸음 더 나아가 연락처 양식에 일부 데이터를 남겨 두십시오.

연락처 양식을 만드는 매우 인기 있는 방법은 Contact Form 7 플러그인 을 사용하는 것입니다. 이 플러그인은 모든 종류의 연락처 양식을 쉽게 만들 수 있는 많은 WordPress 테마에 무료로 자주 포함되는 실용적이고 사용하기 쉬운 도구입니다. 이 플러그인은 연락처 양식 작성의 모든 기술적 측면을 다룹니다. 스타일을 지정하려면 추가 기술이나 다른 플러그인이 필요합니다.

이 기사에서는 무료 도구를 사용하여 웹사이트 디자인과 일치하도록 연락처 양식의 스타일 을 지정하는 방법을 보여줍니다.

다음에 대해 자세히 알아보세요.

• 연락처 양식을 스타일화하기 위해 Elementor용 Qi 애드온 사용하기
• 문의 양식 스타일 설정

연락처 양식을 스타일화하기 위해 Elementor용 Qi 애드온 사용하기

Elementor용 Qi Addons 는 60개의 위젯과 함께 제공되는 기능이 풍부한 무료 플러그인이며 양식 스타일 지정에 도움이 되도록 특별히 제작된 Contact Form 7 위젯이 포함되어 있습니다. 플러그인 은 코딩 지식이 전혀 필요하지 않으며 말 그대로 누구나 편안하게 사용할 수 있습니다. 연락처 양식을 만드는 옵션은 제공하지 않지만 Contact Form 7 플러그인을 사용하는 경우 Qi를 사용하여 웹사이트 스타일과 완벽하게 일치하는 방식으로 양식을 사용자 정의하고 다시 디자인할 수 있습니다.

Elementor용 Qi 애드온은 설치 및 구성이 쉽고 절차는 다른 플러그인과 거의 동일합니다.

설치 후 스타일을 지정하려는 연락처 양식이 있는 페이지로 이동하여 Elementor에서 편집하도록 선택합니다.

그런 다음 왼쪽 메뉴 의 검색 필드에 Contact Form 7을 입력 하여 Contact Form 7 위젯을 찾습니다.

이제 그것을 얻었을 때 그것을 클릭 하고 연락처 양식을 원하는 위치 위로 마우스를 가져갑니다 .

이 방법으로 추가하는 양식은 Contact Form 7 플러그인 으로 만든 양식입니다. 이 위젯은 양식의 스타일을 지정하는 데 도움을 주기 위해 만들어졌으므로 양식을 만들 수 없습니다 . 이제 연락처 양식이 원하는 위치에 배치되었으며 왼쪽 메뉴에서 Contact Form 7 위젯 설정을 볼 수 있습니다.

메뉴의 첫 번째 탭 은 페이지에 표시할 문의 양식 유형 을 선택할 수 있는 옵션을 제공합니다. 연락처 양식 1, 뉴스레터 및 문의하기의 세 가지 옵션 중에서 선택할 수 있습니다. 물론 이전에 사이트용으로 만든 양식을 선택할 수도 있습니다. 이제 사이트에서 문의 양식을 사용자 정의한 방법을 보여 드리겠습니다.

문의 양식 스타일 설정

양식 스타일 지정 옵션을 열려면 스타일 탭 을 클릭합니다.

첫 번째 옵션은 글꼴, 글꼴 크기, 레이블 단어 사이의 간격, 글꼴 스타일, 단어의 문자 사이 간격을 설정할 수 있는 레이블 타이포그래피 이며 모든 변경 사항을 볼 수 있다는 점이 좋습니다. 맹목적으로 아무것도 하지 않도록 즉시 생활하십시오 .

아래 그림에서 우리의 선택이 라벨 타이포그래피에 어떻게 반영되었는지 정확하게 볼 수 있습니다.

다음 옵션은 레이블 색상 을 나타냅니다.

필요에 따라 자신만의 그늘을 만들 수 있습니다. 페이지의 배경색과 잘 어울리는 짙은 파란색을 레이블로 선택합니다.

이제 레이블 스타일이 모두 설정되면 다음 설정은 입력 스타일 을 참조합니다.

여기에도 유사한 옵션이 있습니다. 입력 타이포그래피 글꼴 스타일, 크기 및 색상 을 선택할 수 있습니다. 기본적으로 흰색을 원하지 않는 경우 입력 필드의 배경색을 설정할 수도 있습니다. 또한 여기 에서 입력 필드의 테두리 스타일을 조정하기 위한 설정을 찾을 수 있으며 실선, 파선, 홈, 점선, 이중 또는 없음 중에서 선택할 수 있으며 각 옵션에 대해 추가로 조정할 수 있습니다.

입력 필드가 활성 상태일 때 다른 스타일을 설정할 수도 있습니다. 모든 동일한 옵션을 마음대로 사용할 수 있지만 입력 필드가 활성화된 경우에만 적용됩니다.

다음 설정은 체크박스 스타일 을 참조합니다. 이 작은 요소는 문의 양식에서 매우 중요하며 웹 사이트 사용자에게 일종의 선택을 제공하는 단계이므로 깔끔하고 쉽게 액세스할 수 있어야 합니다.

Qi를 사용하면 이 요소를 완벽하게 쉽게 만들 수 있습니다. 확인란 입력 크기를 설정하면 두 확인란 사이뿐만 아니라 확인란과 다른 입력 필드 사이에 더 많거나 더 적은 공간을 둘 수 있습니다. 이 경우 우리의 선택이 문의 양식에 어떤 영향을 미치는지 아래 사진에서 명확하게 볼 수 있습니다.

다음으로 알아야 할 중요한 설정은 버튼 스타일 설정 입니다.

버튼 배경의 색상을 변경하고 버튼 주위의 테두리를 다른 색상과 스타일(실선, 파선 또는 점선)로 설정할 수 있습니다. 버튼 색상 옵션에서 원하는 색상을 선택하여 버튼의 텍스트 색상을 변경할 수도 있습니다. 모든 변경 사항은 즉시 표시되므로 어떤 설정이 문의 양식의 어떤 요소를 참조하는지 쉽게 이해할 수 있습니다.

마우스 오버 시 버튼의 스타일을 변경하려면 활성 탭을 클릭하고 설정을 조정하십시오. 버튼 호버 색상, 버튼 호버 배경색, 버튼 호버 테두리 색상 등을 조정할 수 있습니다.

연락처 양식의 모양에 만족하면 이제 간격 스타일 탭 에서 설정을 열어 간격을 조정할 수 있습니다. 여기에서 연락처 양식의 모든 요소에 대한 간격을 조정할 수 있습니다.

글로벌 스타일 설정은 연락처 양식의 정렬 스타일을 참조합니다. 왼쪽, 가운데, 오른쪽 정렬 중에서 선택할 수 있습니다.

오류 스타일 설정 을 사용하면 양식에 올바른 데이터를 입력하지 않을 때 표시되는 오류 메시지의 스타일을 제어할 수 있습니다. 오류 메시지 위치, 타이포그래피 및 색상을 쉽게 설정할 수 있습니다.

응답 스타일 설정 을 사용하면 연락처 양식에 삽입된 응답의 세부 사항을 미세 조정할 수 있습니다. 글꼴, 글꼴 색상, 응답 패딩 및 응답 여백 설정 및 테두리 유형을 제어할 수 있습니다.

누군가가 메시지를 보낸 후의 양식은 다음과 같습니다.

그리고 그와 마찬가지로 페이지에 우아한 연락처 양식이 있으며 귀하를 위해 일할 준비가 되어 있습니다.

모든 것을 정리하다

Elementor용 Qi Addons의 가장 큰 장점은 실시간으로 변경한 모든 내용을 볼 수 있으므로 다양한 옵션을 빠르게 전환하고 직관적으로 사용하는 방법을 배울 수 있다는 것입니다. 연락처 양식을 추가하는 것은 특별히 창의적인 작업은 아니지만 이 플러그인을 사용하면 이러한 경우에도 창의력을 발휘할 수 있습니다. 연락처 양식의 모양은 사용자가 귀하를 인식하는 방식에 큰 영향을 미칠 수 있으며, 이 부서에서도 동일한 표준을 제공할 수 있다면 웹사이트, 브랜드 및 비즈니스에 큰 도움이 될 것입니다.

이 기사가 도움이 되었기를 바랍니다. 마음에 드셨다면 이 기사도 확인해보세요!

• 가치있는 버튼 플러그인과 같은 최고의 WordPress
• WordPress 버튼을 만드는 4가지 쉬운 방법
• 버튼 디자인 팁: 방문자의 클릭을 얻는 방법