WPForms에서 필드 사이에 공백을 강제로 적용하는 방법

간격은 양식 디자인의 중요한 부분입니다. WPForms에서는 사이트 방문자에게 최적의 경험을 제공하기 위해 필드, 제목 및 기타 측면 사이의 간격이 기본적으로 설정됩니다.

즉, 모든 웹사이트는 고유합니다. 따라서 특정 스타일과 더 잘 일치하도록 필드 사이에 사용자 정의 간격을 설정하려는 경우 올바른 위치에 있습니다.

이 기사에서는 WPForms에서 필드 사이에 공백을 강제로 적용하는 방법을 단계별로 보여 드리겠습니다. 여기에서는 약간의 코드로 작업해야 하지만 내 방법을 따르기 위해 사전 코딩 지식이 필요하지는 않습니다.

양식 필드 사이에 공백을 강제 적용

다양한 종류의 양식 구성 요소 사이에 공백을 강제 적용하는 정확한 코드를 공유하기 전에 이 작업을 최대한 쉽게 만들려면 올바른 플러그인이 필요합니다.

초기 설정: 코드를 사용한 양식 간격

귀하의 사이트에 필요한 플러그인을 설치하는 것부터 시작하겠습니다.

1단계: WPForms 및 WPCode 설치

이 방법은 WPForms의 Lite 및 Pro 버전 모두에서 작동합니다. 하지만 WPForms Pro를 구입하는 것이 좋습니다. 이렇게 하면 블록 편집기를 통해 수많은 추가 스타일링 옵션에 액세스할 수 있고 고급 사용자 지정을 위한 코드가 필요하지 않기 때문입니다.

WPForms Pro를 구매한 후 사이트에 플러그인을 설치하세요. 다음은 WPForms 설치에 대한 자세한 가이드입니다.

다음으로 WPCode 플러그인도 필요합니다. 이것은 귀하의 사이트에 코드 조각을 매우 쉽게 추가할 수 있게 해주는 무료 플러그인입니다.

설치 단계는 WPForms 설치 방법과 유사하지만 WordPress 저장소에서 WPCode의 무료 버전을 직접 추가할 수 있습니다. 다음은 프로세스의 빠른 버전입니다.

WordPress 관리 메뉴에서 플러그인 » 새로 추가 로 이동합니다.

그러면 플러그인 화면으로 이동됩니다. WPCode를 검색하려면 오른쪽에 있는 검색창을 사용하세요. 화면에 플러그인 목록이 나타나면 옆에 있는 지금 설치 버튼을 클릭하세요.

설치에는 몇 초밖에 걸리지 않으며 설치 버튼이 활성화로 변경됩니다. 활성화 버튼을 눌러 사이트에 플러그인 설치를 완료하세요.

엄청난! 필요한 플러그인이 설치되면 다양한 양식 요소 사이의 공간을 조정할 수 있습니다.

2단계: 양식 생성 및 포함

WPForms에서 필드 사이의 간격을 조정하려는 경우 사이트에 이미 하나 이상의 양식을 만들고 게시했을 가능성이 높습니다.

하지만 그렇지 않은 경우를 대비해 간단한 문의 양식을 만드는 방법에 대한 이 쉬운 가이드를 따르세요.

설명을 위해 저는 미리 만들어진 설문조사 양식 템플릿을 사용하고 있습니다.

양식을 삽입하고 게시하세요(또는 최소한 WordPress 편집기에 초안 버전을 저장하세요). 사이트에 이미 포함된 양식의 간격만 사용자 정의할 수 있습니다.

또한 간격을 사용자 정의하려는 양식의 양식 ID도 알아야 합니다. WPForms » All Forms 로 이동하여 양식 ID를 쉽게 찾을 수 있습니다.

양식 ID는 전적으로 숫자로 구성되며 큰따옴표 안의 단축 코드 열에 언급되어 있습니다. 제 경우에는 양식 ID가 2294 입니다.

엄청난! 하지만 WPForms 간격을 수정하기 위해 코드를 삽입하는 방법이 여전히 궁금할 수 있습니다. 이에 대해서는 다음에 설명하겠습니다.

3단계: 양식 간격에 대한 코드 삽입

코드를 사용하기 전에 WordPress 사이트에 새 코드 조각을 삽입하는 방법을 아는 것이 중요합니다. WPForms에서 필드 사이의 간격을 제어하는 ​​모든 코드에 대해 이 프로세스를 반복해야 합니다.

새 스니펫을 추가하려면 코드 스니펫(Code Snippets) » + 스니펫 추가(Add Snippet) 로 이동하세요.

그런 다음 사용자 정의 코드 추가(새 스니펫) 옵션 아래에서 스니펫 사용 버튼을 클릭하세요.

이제 스니펫에 제목을 지정하고 사용자 정의 코드를 작성할 수 있는 새 화면이 표시됩니다(또는 다음 섹션에서 공유할 코드를 복사하여 붙여넣기만 하면 됩니다).

양식에서 간격을 제어하는 ​​코드는 모두 CSS이므로 코드 유형 드롭다운에서 CSS 조각을 선택해야 합니다.

그런 다음 코드 조각을 추가하고 삽입 방법을 선택하기만 하면 됩니다. 삽입 설정은 코드 미리보기 아래 섹션에서 변경할 수 있습니다. 하지만 이 게시물에서 설명하는 코드에 대한 기본 설정을 변경할 필요는 없습니다.

더 중요한 것은 스니펫을 저장하고 사용자 정의 코드를 추가한 후 활성화하는 것을 잊지 마십시오. 오른쪽 상단의 토글 버튼을 사용하여 활성화하기 전까지는 코드가 적용되는 것을 볼 수 없습니다.

훌륭한! 이제 사용자 정의 코드를 사용하여 양식 간격 사용자 정의를 시작할 준비가 되었습니다.

양식 간격 조정을 위한 CSS 코드

이제 다양한 양식 요소의 간격을 제어하는 ​​CSS 코드 조각을 생성할 준비가 되었습니다.

양식 제목과 첫 번째 필드 사이의 공간 수정

양식 제목에 대해 이야기해 봅시다! 기본적으로 WPForms는 페이지의 H1 제목을 양식 제목으로 사용합니다. 이 제목은 양식 자체 위에 표시됩니다.

제목을 양식 컨테이너 내부에 표시하려면 WordPress 블록 편집기에서 해당 옵션을 쉽게 활성화할 수 있습니다.

편집기 내에 포함된 양식을 클릭하면 오른쪽 패널에 추가 열기가 열립니다. 그런 다음 제목 표시 토글 버튼을 클릭합니다.

WPForms 제목을 사용하는 경우 H1을 숨길 수 있습니다. H1을 클릭한 다음 눈 모양 아이콘이 나타나면 누르기만 하면 됩니다.

이제 제목과 첫 번째 양식 필드 사이의 간격을 변경할 준비가 되었습니다. 이 시점에서 양식을 게시 하거나 업데이트 할 수 있습니다.

먼저 WPForms의 양식 제목과 첫 번째 필드 사이의 기본 간격을 살펴보겠습니다. 일반적으로 다음과 같습니다.

이 간격을 변경하려면 3단계에 표시된 대로 WPCode에서 새 스니펫을 만듭니다. WordPress 사이드바에서 코드 스니펫 » + 스니펫 추가 로 이동하여 빠르게 액세스할 수 있습니다.

사이트의 모든 WPForms 양식에 대한 제목 간격을 변경하는 코드는 다음과 같습니다.

.wpforms-container-full .wpforms-head-container {
padding-bottom: 0 !important;
}
.wpforms-container-full .wpforms-title {
margin-bottom: 15px !important;
}

패딩 및 여백 값은 가변적입니다. 즉, 여기에 필요한 값을 입력할 수 있습니다. 이 코드에서는 margin-bottom 값만 변경하고 padding-bottom 0으로 설정하는 것이 좋습니다.

예를 들어 제목이 각 필드 사이의 간격과 동일한 거리로 표시되도록 하려면 margin-bottom 값으로 15px를 사용할 수 있습니다. 이보다 크거나 작은 거리를 만들려면 필요에 따라 margin-bottom px 값을 늘리거나 줄이면 됩니다.

설문조사 양식에 위의 코드 조각을 추가한 후 제목이 표시되는 방식은 다음과 같습니다.

전역 변경 사항을 적용하는 대신 특정 양식에 대해 이 간격을 조정하려면 관심 있는 양식의 양식 ID를 언급하여 위 코드를 수정할 수 있습니다.

예를 들어 ID# 2294가 있는 양식의 코드가 어떻게 변경되는지는 다음과 같습니다.

wpforms-2294 .wpforms-head-container {
padding-bottom: 0 !important;
}
#wpforms-2294 .wpforms-title {
margin-bottom: 15px !important;
}

그러면 양식 제목의 간격이 관리됩니다. 하지만 각 필드 사이의 간격은 어떻습니까?

이에 대해서는 다음에 다루겠습니다.

모든 필드의 간격 수정

각 연속 필드 행 사이의 간격은 코드로 쉽게 제어할 수 있는 또 다른 변수 번호입니다.

참고로 먼저 필드 사이의 기본 간격을 살펴보겠습니다.

이제 이 간격을 늘리거나 줄이려면 여기에 표시된 것과 동일한 단계에 따라 새 CSS 조각을 만들 수 있습니다.

이번에만 필요한 코드는 다음과 같습니다.

.wpforms-container-full .wpforms-head-container {
padding-bottom: 0 !important;
}
.wpforms-container .wpforms-field {
padding-top: 100px !important;
}

그 결과 각 연속 필드 사이의 간격이 더 커져 더욱 확장된 형태가 됩니다.

padding-top 속성의 px 값을 변경하여 간격을 자유롭게 조정할 수 있습니다.

다시 한번 말씀드리지만, 개별 양식의 필드 간격만 수정하려면 양식 ID를 언급하여 코드를 편집해야 합니다.

wpforms-2294 .wpforms-head-container {
padding-bottom: 0 !important;
}
#wpforms-2294 .wpforms-field {
padding-top: 100px !important;
}

제출 버튼 패딩 변경

마지막 필드와 제출 버튼 사이의 간격을 변경하는 것은 위에서 사용한 코드만큼 쉽습니다.

기본적으로 WPForms의 제출 버튼 간격은 다음과 같습니다.

제출 버튼 패딩을 조정하는 데 필요한 코드는 다음과 같습니다.

.wpforms-container .wpforms-submit-container {
padding-top: 30px !important;
}

이 코드를 활성화하면 양식 제출 버튼에 패딩 증가가 적용되는 것을 확인할 수 있습니다.

그것은 매우 간단했습니다, 그렇죠?

CSS 코드를 사용하여 적절하다고 생각되는 대로 WPForms에 공백을 강제 적용하세요!

다음으로 고급 양식 스타일 적용

양식의 여백과 안쪽 여백을 조정하는 것은 코드가 필요한 몇 가지 작업 중 하나입니다. 그러나 WPForms를 사용하면 대부분의 경우 코드 없이 양식 스타일을 광범위하고 자세하게 사용자 정의할 수 있습니다.

직관적인 포인트 앤 클릭 컨트롤을 사용하여 필드, 레이블, 버튼 등의 모양을 변경할 수 있습니다. 포괄적인 개요를 보려면 블록 편집기를 사용한 양식 스타일 지정에 대한 가이드를 참조하세요.

지금 WordPress 양식 만들기

양식을 작성할 준비가 되셨나요? 가장 쉬운 WordPress 양식 작성 플러그인으로 지금 시작해보세요. WPForms Pro에는 다양한 무료 템플릿이 포함되어 있으며 14일 환불 보장을 제공합니다.

이 기사가 도움이 되었다면 Facebook과 Twitter에서 우리를 팔로우하여 더 많은 무료 WordPress 튜토리얼과 가이드를 확인하세요.