WordPress 문의 양식 스타일을 변경하는 방법

게시 됨: 2023-02-16

WordPress 문의 양식 스타일을 변경하고 싶습니까? 그렇다면 이 가이드는 당신을 위한 것입니다! WordPress 양식 스타일 지정이 매우 쉬운 방법을 배우게 됩니다! 더 찾아 봐.

대략적인 읽기 시간 : 6분

첫인상을 남길 수 있는 기회는 단 한 번뿐입니다.

그리고 아름다운 형태로 방문자의 관심을 끄는 것은 좋은 인상을 남길 수 있는 방법입니다.

또한 그들이 귀하의 양식을 작성하도록 하는 완벽한 방법입니다. 결국, 그들이 그것을 보지 못한다면 어떻게 채울 수 있습니까?

Formidable Forms는 최고의 WordPress Form Builder 플러그인입니다. 무료로 받으세요!

따라서 기본 양식에서 아름다운 양식으로 전환할 준비가 되었으면 이 가이드가 적합합니다.

WordPress 문의 양식 스타일을 쉽게 변경할 수 있는 두 가지 방법을 알려드리겠습니다!

그것에 들어가자.

WordPress 문의 양식 스타일을 변경하는 방법

앞에서 언급했듯이 양식 스타일을 사용자 정의하는 두 가지 방법이 있습니다.

WordPress에서 양식 코드 편집
비주얼 스타일러와 함께 양식 작성기 사용

어떤 것을 선택하느냐는 코딩에 대한 편안함 수준에 따라 달라집니다. 그러나 두 가지 방법을 모두 보여주므로 사용 가능한 모든 옵션을 알 수 있습니다.

방법 1: WordPress에서 양식 코드 편집

자, 먼저 코딩의 바다로 뛰어들고 싶군요, 그렇죠?

양식이 이미 작성되어 있고 사용자 지정하려는 것으로 가정합니다. 양식이 없는 경우 양식 작성 가이드를 참조하여 시작하세요.

1단계: 양식의 ID 또는 클래스 가져오기

시작하려면 양식의 ID 또는 클래스를 가져와야 합니다.

이를 수행하는 쉬운 방법은 웹사이트로 이동하여 양식을 마우스 오른쪽 버튼으로 클릭하고 검사 를 클릭하는 것입니다. 여기서는 하위 테마 내에 있는 양식 HTML 템플릿을 볼 수 있습니다.

Google의 개발자 도구 사이드바가 슬라이드 아웃되고 양식에 대한 다양한 코드 섹션을 볼 수 있습니다.

가장 중요한 것은 사용자 정의하려는 영역을 찾고 ID 또는 클래스 이름을 추적하는 것입니다. 이것을 사용하여 변경합니다.

예를 들어 문의 양식 템플릿의 배경색을 변경하려는 경우 가장 바깥쪽 코드 조각을 찾습니다. 이 경우 div 입니다. 클래스 api-form-box .

이 콘솔에서 어떻게 보이는지 테스트할 수도 있습니다.

div를 마우스 오른쪽 버튼으로 클릭하고 속성 추가를 클릭하면 배경색 스타일을 추가할 수 있습니다.

Enter 키를 누르면 변경 사항이 즉시 창에 표시됩니다.

하지만 걱정하지 마세요. 페이지를 새로 고칠 때마다 양식이 정상으로 돌아갑니다.

다음으로 WordPress 관리자로 이동하여 필요한 CSS 코드를 변경합니다.

2단계: WordPress 관리자 패널에서 CSS 변경

이제 양식에서 변경하고 싶은 몇 가지 사항을 기록했으므로 WordPress 관리자로 이동하여 시작하세요.

그런 다음 WordPress 사이드바에서 모양 → 사용자 지정 → 추가 CSS를 선택하여 양식 스타일을 지정합니다.

여기에서 양식에 대한 CSS 클래스를 입력할 수 있습니다.

예를 들어 양식에서 몇 가지 사항을 변경하기로 결정했기 때문에 입력한 코드는 다음과 같습니다.

클래스 에 태그를 지정하려면 를 포함해야 합니다 . 클래스 이름 앞에. ID 의 경우 # 을 입력합니다.

그러나 이 방법을 사용하는 경우 변경 사항을 더 잘 이해할 수 있도록 CSS 규칙에 대해 자세히 알아보는 것이 좋습니다.

이 예에서는 다음과 같이 분해됩니다.

.api-form-box는 배경색을 하늘색으로 변경합니다.
.frm-button-submit은 제출 버튼 배경을 노란색으로, 텍스트를 검은색으로 변경합니다.
.frm-submit은 양식의 버튼을 중앙에 배치합니다.

이러한 변경으로 양식은 다음과 같습니다.

여기에서 당신의 힘은 무제한입니다. CSS 사용 방법을 배우면 양식을 원하는 대로 사용자 지정할 수 있습니다.

하지만 이 방법에는 몇 가지 단점이 있습니다.

업데이트로 인해 양식의 디자인이 손상되어 다시 작업하게 될 수 있습니다. 시간이 많이 걸리는 것은 말할 것도 없습니다. 연락처 양식이 여러 개인 경우 HTML 코드를 편집하고 각 양식에 사용자 지정 CSS를 추가해야 합니다.

하지만 좀 더 간단 하고 깨지지 않는 것을 원한다면 다음 방법을 확인하는 것이 좋습니다.

방법 2: 비주얼 스타일러와 함께 양식 작성기 사용

코딩은 배우는 데 시간이 걸리는 기술입니다.

그리고 많은 사람들이 배울 시간이 없습니다. 그것이 당신이라면 양식 작성기가 최선의 선택입니다.

그리고 우리가 추천하는 것은 Formidable Forms 입니다.

WordPress의 가장 진보된 양식 빌더 WordPress 플러그인입니다. 즉, 양식 작성이 간단하고 시간이 절약되므로 웹사이트의 다른 영역에 더 많은 시간을 할애할 수 있습니다.

웹사이트의 양식 유형에 관계없이 Formidable은 모든 것을 신속하게 처리할 수 있습니다.

코딩이나 번거로움 없이 간편하게 양식을 작성할 수 있습니다.

선택할 수 있는 다른 양식 빌더(WPForms, Gravity Forms 등)가 있지만 Formidable과 함께 제공되는 스타일링 기능은 제공하지 않습니다. 이는 양식의 모양에 대해 더 많은 권한을 얻을 수 있음을 의미합니다.

Formidable의 프리미엄 플랜도 확인하는 것이 좋습니다.

양식의 스타일을 지정하는 데 필요하지는 않지만 많은 훌륭한 기능을 사용할 수 있습니다.

양식 디자인 템플릿에 액세스
배경 이미지를 사용자 지정하는 기능
양식을 더 빠르게 시작하기 위한 더 많은 양식 템플릿
그리고 훨씬 더

따라서 Formidable을 설치하고 활성화하면 시작할 준비가 된 것입니다.

강력한 양식을 지금 받으세요!

양식의 스타일을 지정하고 사이트에 게시하는 간단한 세 단계만 거치면 됩니다.

양식 만들기
양식 스타일 지정
양식 표시

1단계: 양식 만들기

양식의 스타일을 지정하려면 스타일을 지정할 양식이 필요하죠?

따라서 WordPress 관리자로 이동하여 Formidable → Forms → Add New 로 이동하십시오.

사전 제작된 많은 템플릿(프리미엄 기능) 중 하나를 선택하거나 빈 양식을 선택하여 시작할 수 있습니다.

그런 다음 양식에 이름을 지정하고 만들기를 클릭합니다.

플러그인은 양식을 쉽게 편집할 수 있는 끌어서 놓기 빌더로 이동합니다.

사이드바 메뉴에서 원하는 양식 필드를 추가하고, 필드 레이블을 사용자 지정하고, 입력 유형을 변경하는 등의 작업을 수행하십시오.

연락처 양식을 만드는 경우 다음을 추가하는 것이 가장 좋습니다.

방문자 이름 입력란
그들에게 연락하는 방법을 이메일 로
추가하려는 메시지의 단락

연락처 양식이 설정되면 업데이트를 클릭하여 변경 사항을 저장하십시오.

그런 다음 스타일 탭으로 이동합니다.

2단계: 양식 스타일 지정

스타일 탭 아래에 몇 가지 옵션이 표시됩니다.

사전 제작된 디자인 템플릿 중 하나를 선택하여 시간을 절약하거나(프리미엄) 나만의 디자인을 시작할 수 있습니다.

나만의 스타일을 디자인하려면 Formidable Style 옆에 있는 세 개의 점을 클릭하고 편집 을 클릭합니다. Formidable 스타일은 Formidable의 기본 스타일입니다.

양식을 사용자 정의할 수 있는 Formidable Style 디자이너로 이동합니다.

레이블, 입력 필드, 글꼴 크기 및 배경 색상의 크기와 색상을 변경하고 배경 이미지를 업로드할 수도 있습니다!

예를 들어, Cheap n' Cheesy 라는 테스트 웹사이트의 경우 비즈니스를 반영하는 양식을 디자인했습니다.

귀하와 귀하의 연락처 양식에 대한 가능성은 무한합니다!

따라서 양식을 사용자 정의한 후 업데이트를 클릭하여 변경 사항을 저장하십시오.

이제 표시만 하면 됩니다!

3단계: 양식 표시

양식을 표시하는 것이 작성하는 것보다 훨씬 쉽습니다.

먼저 양식을 표시하려는 게시물이나 페이지로 이동하고 새 WordPress 블록을 추가합니다.

그런 다음 Formidable Forms 블록을 검색하여 추가하고 드롭다운 메뉴에서 양식을 선택합니다.

마지막으로 게시물이나 페이지를 업데이트하면 양식이 페이지에 표시됩니다!

Formidable의 모든 것과 마찬가지로 쉽다고 말했습니다.

강력한 양식을 지금 받으세요!

사이트에서 WordPress 문의 양식의 스타일을 지정할 준비가 되셨나요?

연락처 양식의 스타일을 지정할 수 있는 기능은 원하는 것이 아니라 필요한 것입니다.

사용자 정의와 관련된 Contact Form 7 플러그인에 대한 검색이 표시될 수 있습니다. Contact Form 7 CSS, WPCF7의 입력 유형 텍스트 또는 WPCF7의 입력 유형 이메일과 같은 것.

이 두 가지 방법에는 그 어느 것도 필요하지 않습니다. 그리고 이 게시물에서는 WordPress에서 연락처 양식을 사용자 지정하는 방법을 알려 주어 양식이 원하는 대로 표시되도록 합니다. 사용자 지정 HTML, CSS 등을 입력하거나 Formidable Forms를 사용하는지 여부. 당신은 실망하지 않을 것입니다.

그러니 더 이상 기다리지 마세요. Formidable Forms를 잡고 양식 디자인을 시작하십시오!

그리고 Facebook, Twitter, YouTube에서 저희를 팔로우하여 더 많은 폼 팁과 요령을 확인하세요!

Formidable 블로그에서 더 읽어보기

Formidable Forms가 오늘날 사용 가능한 가장 빠른 WordPress 양식 빌더 플러그인 중 하나라는 사실을 알고 계셨습니까? 아직 사용하고 있지 않다면 무료 플러그인 또는 모든 기능을 갖춘 프로 버전으로 시작하세요!