WordPress에서 Mailchimp 양식의 스타일을 지정하는 방법 [2가지 방법!]

게시 됨: 2023-03-02

WordPress에서 Mailchimp 양식의 스타일을 지정하려고 합니까? 이 가이드는 Mailchimp 가입 양식을 쉽게 스타일링할 수 있음을 보여줍니다! 방법은 다음과 같습니다.

대략적인 읽기 시간 : 5.5분

WordPress에서 Mailchimp 양식의 스타일을 지정하는 쉬운 방법을 찾는 데 지쳤습니까?

우리는 이해한다. 검색하고 검색하지만 많은 옵션을 찾지 못합니다. 특히 당신이 코딩하는 방법을 알 것으로 기대하지 않는 것들.

그리고 그것은 실망 스럽습니다.

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

하지만 그럴 필요는 없습니다. 실제로 Mailchimp 양식의 스타일을 디자인하는 것은 재미 있을 수 있습니다.

따라서 이 게시물에서는 Mailchimp 포함 양식의 스타일을 지정하는 두 가지 방법인 Mailchimp 및 Formidable 양식을 보여줍니다.

시작하자.

Mailchimp로 양식 스타일을 지정하는 방법
- 1. Mailchimp로 양식 스타일 지정하는 방법
- 2. 양식 작성기로 양식 스타일 지정

WordPress에서 Mailchimp 양식의 스타일을 지정하는 방법

Mailchimp의 양식은 멋져 보이지만 약간 기본적입니다.

사이트에 맞게 사용자 지정하는 것은 사이트를 돋보이게 하는 훌륭한 방법입니다.

따라서 WordPress에서 Mailchimp 양식의 스타일을 지정하는 세 가지 방법이 있습니다.

Mailchimp 스타일 사용
양식 작성기 사용

둘 다 작동하므로 각각 수행하는 방법을 보여 드리겠습니다.

1. Mailchimp로 양식 스타일 지정하는 방법

Mailchimp의 방법을 사용하여 양식을 스타일링하는 것은 복잡할 수 있습니다.

시작하려면 적어도 몇 가지 코드를 알아야 하기 때문입니다. 그렇지 않으면 상황이 매우 빠르게 혼란스러워질 수 있습니다. 따라서 코딩 능력에 자신이 있는 분들에게 이 방법을 추천합니다.

양식 사용자 지정을 시작하려면 Mailchimp 계정으로 이동하여 Audience → Signup forms → Embedded forms 로 이동합니다.

이메일 주소, 이름 또는 성 필드를 추가하여 양식 필드를 자유롭게 사용자 정의하십시오.

완료되면 계속 을 클릭합니다.

다음으로 양식을 표시하기 위해 복사하여 사이트에 붙여넣을 수 있는 HTML 코드가 표시됩니다.

이 양식의 모양을 사용자 지정하려면 양식 코드를 사용자 지정해야 합니다.

그러나 때로는 Mailchimp의 CSS 후크를 사용해야 합니다. 그리고 Mailchimp에는 mc-embedded-subscribe-form 또는 mc-embed 가입과 같이 30개 이상이 있습니다.

CSS와 이러한 후크 사용에 익숙하다면 양식으로 할 수 있는 일이 많습니다.

이 코드를 편집기에 붙여넣고 변경하면 입력 필드, 제출 버튼 및 모든 양식 작업을 사용자 지정할 수 있습니다.

양식의 배경색 변경

양식의 배경을 변경하려면 <div id=”mc_embed_signup”> 코드를 대상으로 지정해야 합니다.

따라서 스타일 섹션에 코드 조각이 표시됩니다.

이 코드를 변경하여 양식의 배경을 조정할 수 있습니다. 예를 들어 background: #fff를 background: #000 으로 변경하여 배경을 검은색으로 변경할 수 있습니다.

그러나 이제 텍스트가 더 이상 표시되지 않습니다. 따라서 color: #fff를 추가하여 흰색으로 변경할 수 있습니다.

이제 양식이 훨씬 더 좋아 보입니다!

귀하의 WordPress 사이트와 일치하는지 확인하기 위해 자유롭게 사용자 정의를 해보십시오!

제출 버튼 사용자 정의

이제 제출 버튼을 변경하는 방법을 살펴보겠습니다.

따라서 <input type=”submit”>을 대상으로 해야 합니다. 하지만 양식 배경과는 다르게 처리해야 합니다.

이렇게 하면 버튼 배경이 흰색으로 설정되고 텍스트가 검정색으로 설정됩니다.

이제 귀하의 양식이 함께 제공되기 시작했습니다!

mc-field-groups 및 <input type=”email”> 코드와 같은 CSS 후크를 타겟팅하여 양식을 계속 맞춤설정할 수 있습니다.

그러나 Mailchimp 양식의 스타일을 더 쉽게 지정하려면 아래 방법을 확인하세요.

2. 양식 작성기로 양식 스타일 지정

사용자 지정 CSS를 사용하면 양식 디자인을 제어할 수 있습니다.

코딩 방법을 알고 있다면.

그러나 훨씬 더 간단한 옵션을 원한다면 Formidable Forms를 제안합니다.

Formidable은 WordPress의 가장 진보된 양식 빌더로, 양식을 쉽게 사용자 지정할 수 있습니다. 연락처 양식이든 Mailchimp 팝업이든 관계없이 Formidable이 지원합니다.

또한 Mailchimp 통합 및 훌륭한 시각적 양식 스타일러가 있어 완벽한 Mailchimp 연락처 양식 작성기입니다.

따라서 Formidable을 설치하고 활성화한 다음 시작하겠습니다.

Mailchimp 양식 스타일러를 받으세요!

몇 가지 단계만 거치면 완료됩니다.

메일침프와 포미더블 연결
양식 만들기
디자인 사용자 정의
양식 표시

1. 메일침프와 포미더블 연결

WordPress 대시보드에서 Formidable → Add-Ons 로 이동하여 Mailchimp 애드온을 찾아 설치하고 활성화합니다.

다음으로 Formidable → Global Settings → Mailchimp 로 이동합니다.

Mailchimp API 키를 입력하여 Mailchimp 계정에 연결할 수 있습니다.

이제 Mailchimp 계정이 연결되었으므로 양식을 만들 차례입니다!

2. 양식 만들기

양식 작성을 시작하려면 Formidable → Forms 로 이동하십시오. 새로 추가 를 클릭합니다.

다음으로 Formidable의 많은 템플릿 중 하나를 선택하거나 빈 양식을 선택하여 처음부터 시작합니다.

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

플러그인은 양식 작성을 시작할 수 있는 끌어서 놓기 양식 작성기로 이동합니다.

필요에 따라 이메일, 이름 및 텍스트 필드를 추가하여 양식을 자유롭게 사용자 정의하십시오.

완료되면 업데이트를 클릭하여 변경 사항을 저장하고 설정 → 작업 및 알림 으로 이동한 다음 Mailchimp 를 클릭합니다.

Mailchimp 작업이 아래에 표시되며 Mailchimp 설정을 사용자 지정할 수 있습니다.

설정했으면 업데이트를 클릭하여 변경 사항을 저장합니다. 이제 Mailchimp 구독자를 이메일 목록에 추가하는 것은 양식을 작성하는 것만큼 간단합니다.

이제 양식을 사용자 지정할 차례입니다. 이제 스타일 탭으로 이동하겠습니다.

3. 디자인 사용자 정의

Formidable의 시각적 양식 스타일러를 사용하면 누구나 쉽게 아름다운 양식을 사용자 정의할 수 있습니다.

CSS 후크를 코딩하거나 사용할 필요가 없습니다. 사이드바에서 설정을 클릭하고 조정하기만 하면 됩니다.

따라서 Formidable의 스타일 탭에 몇 가지 옵션이 표시됩니다.

Formidable의 미리 만들어진 디자인 템플릿 중 하나를 선택하여 시간을 절약하거나 나만의 스타일링을 시작할 수 있습니다.

템플릿을 맞춤설정하려면 템플릿에서 점 세 개를 클릭하고 수정 을 클릭합니다.

Formidable의 Styler에서 필요에 맞게 양식을 사용자 지정할 수 있습니다.

글꼴 크기, 테두리 반경, 색상 등 보이는 모든 것을 사용자 정의할 수 있습니다.

양식으로 창의력을 발휘하고 웹 사이트에 고유하게 만들 수 있습니다.

예를 들어, 여기 우리가 사용하는 테스트 웹사이트용으로 만든 양식이 있습니다!

Formidable의 Styler를 사용하면 초보자든 전문가든 쉽게 사용할 수 있습니다.

따라서 설정을 가지고 놀면서 양식을 직접 만드십시오.

변경 사항 저장을 마치면 업데이트를 클릭하십시오.

이제 해당 양식을 표시해 보겠습니다.

4. 양식 표시

먼저 Mailchimp 양식을 추가하려는 게시물이나 페이지로 이동합니다.

다음으로 새 WordPress 블록을 추가한 다음 Formidable Forms 블록을 검색하여 추가합니다.

그런 다음 드롭다운 메뉴에서 양식을 선택하면 양식이 표시됩니다.

마지막으로 업데이트를 클릭하여 변경 사항을 저장하면 양식이 활성화됩니다!

Formidable이 Mailchimp의 쉬운 양식에 가장 적합하다고 말씀드렸습니다!

몇 가지 간단한 단계만 거치면 맞춤형 양식이 준비됩니다.

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

Mailchimp 양식 스타일러를 받으세요!

WordPress에서 Mailchimp 양식의 스타일을 어떻게 지정합니까?

WordPress에서 Mailchimp 가입 양식을 사용자 지정하는 것이 양식을 돋보이게 만드는 가장 좋은 방법입니다.

그리고 오늘, Mailchimp용 포함된 양식을 사용자 정의하는 두 가지 방법(코드 사용 및 Formidable Forms 사용)을 배웠습니다. 어떤 것을 선택하느냐는 코드에 대한 편안함에 따라 다르지만 숙련된 코더인 경우에도 Formidable을 권장합니다.

Formidable이 최선의 선택인 이유가 여전히 궁금하다면 왜 이것이 최고의 Mailchimp 가입 양식 WordPress 플러그인인지에 대한 이 게시물을 확인하십시오.

당신은 실망하지 않을 것입니다.

시작할 준비가 되었으면 가격 책정 페이지로 이동하여 우수한 계획 중 하나를 선택하십시오.

마지막으로 Facebook, Twitter 및 YouTube에서 우리를 팔로우하여 더 많은 Mailchimp 팁과 요령을 알아보세요!

Mailchimp 및 Formidable에 대해 자세히 알아보세요!

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