WordPressでMailchimpフォームのスタイルを設定する方法[2つの方法!]

WordPress で Mailchimp フォームのスタイルを設定したいですか? このガイドでは、Mailchimp サインアップ フォームのスタイルを簡単に設定できることを示します。 方法は次のとおりです。

読了時間の目安：5.5分

WordPress で Mailchimp フォームのスタイルを簡単に設定する方法を探すのにうんざりしていませんか?

わかりました。 検索して検索しますが、多くのオプションが見つかりません。 特に、コーディング方法を知っていることを期待していない人。

そして、それはイライラします。

しかし、そうである必要はありません。 実際、Mailchimp フォームのスタイルをデザインするのは楽しいものです。

そのため、この投稿では、Mailchimp 埋め込みフォームのスタイルを設定する 2 つの方法を紹介します。Mailchimp と Formidable Forms を使用します。

始めましょう。

WordPress で Mailchimp フォームのスタイルを設定する方法

Mailchimp のフォームは見栄えはしますが、少し基本的です。

また、サイトに合わせてカスタマイズすることは、それらを目立たせる優れた方法です.

したがって、WordPress で Mailchimp フォームのスタイルを設定するには、次の 3 つの方法があります。

1. Mailchimp スタイルの使用
2. フォームビルダーを使用する

どちらも機能するので、それぞれの方法を説明します。

1. Mailchimp でフォームのスタイルを設定する方法

それらのメソッドを使用して Mailchimp のフォームをスタイリングすることは、複雑になる可能性があります。

それは、開始するために少なくともいくつかのコードを知る必要があるからです。 そうしないと、物事がすぐに混乱する可能性があります。 そのため、コーディング能力に自信がある人には、この方法をお勧めします。

フォームのカスタマイズを開始するには、Mailchimp アカウントに移動し、 Audience → Signup forms → Embedded formsに移動します。

メールアドレス、名、または姓のフィールドを追加して、フォームフィールドを自由にカスタマイズしてください。

完了したら、 [続行]をクリックします。

次に、コピーしてサイトに貼り付けてフォームを表示できる HTML コードが表示されます。

このフォームの外観をカスタマイズする場合、それはフォームのコードをカスタマイズすることを意味します。

ただし、場合によっては、Mailchimp の CSS フックを使用する必要があります。 また、Mailchimp には、mc-embedded-subscribe-form や mc-embed signup など、30 以上のテンプレートがあります。

CSS とこれらのフックの使用に十分慣れている場合は、フォームでできることがたくさんあります。

このコードをエディターに貼り付けて変更することで、入力フィールド、送信ボタン、フォーム アクションをカスタマイズできます。

フォームの背景色を変更する

フォームの背景を変更するには、<div id=”mc_embed_signup”> コードをターゲットにする必要があります。

したがって、スタイル セクションには、次のコードが表示されます。

このコードを変更して、フォームの背景を調整できます。 たとえば、 background: #fffをbackground: #000に変更して、背景を黒に変更できます。

しかし、現在、テキストは表示されなくなりました。 したがって、色を追加できます: #fff で白に変更できます。

今、あなたのフォームはさらに良く見えます！

自由にカスタマイズを試して、WordPress サイトにマッチするかどうかを確認してください!

送信ボタンのカスタマイズ

それでは、送信ボタンを変更する方法を見てみましょう。

したがって、<input type="submit"> をターゲットにする必要があります。 ただし、フォームの背景とは異なる方法で行う必要があります。

<style> セクションに移動し、Mailchimp フォーム スタイルのオーバーライド用のコードを追加します。

これにより、ボタンの背景が白に、テキストが黒に設定されます。

そして今、あなたのフォームがまとまり始めています！

mc-field-groupsや <input type="email"> コードなどの CSS フックをターゲットにすることで、フォームのカスタマイズを続けることができます。

しかし、Mailchimp フォームのスタイルを簡単に設定する方法が必要な場合は、以下の方法を確認してください。

2. フォーム ビルダーを使用してフォームのスタイルを設定する

カスタム CSS を使用すると、フォームのデザインを制御できるようになります。

コーディング方法を知っている場合。

しかし、もっとシンプルなオプションが必要な場合は、 Formidable Formsをお勧めします。

Formidable は WordPress の最も高度なフォームビルダーで、フォームのカスタマイズを簡単にします。 お問い合わせフォームであろうと、Mailchimp ポップアップであろうと、Formidable はあなたをカバーしてくれます。

さらに、Mailchimp との統合と優れた Visual Form Styler を備えた、Mailchimp の完璧なコンタクト フォーム ビルダーです。

それでは、Formidable をインストールしてアクティブ化してから始めましょう。

Mailchimp フォーム スタイラーを入手しましょう!

そして、それを実行するための手順はわずか 2 つです。

1. Mailchimp と Formidable を接続する
2. フォームを作成する
3. デザインをカスタマイズする
4. フォームを表示する

1. Mailchimp と Formidable を接続する

WordPress ダッシュボードで、 Formidable → Add-Onsに移動し、 Mailchimpアドオンを見つけて、インストールして有効にします。

次に、 Formidable → Global Settings → Mailchimpに移動します。

Mailchimp API キーを入力して、Mailchimp アカウントに接続できます。

Mailchimp アカウントが接続されたので、フォームを作成します。

2. フォームを作成する

フォームの作成を開始するには、 Formidable → Formsに移動します。 をクリックし、 [新規追加]をクリックします。

次に、Formidable の多数のテンプレートまたは空白のフォームから 1 つを選択して、最初から作成します。

次に、フォームに名前を付けて[作成]をクリックします。

プラグインは、フォームの作成を開始できるドラッグ アンド ドロップ フォーム ビルダーに移動します。

必要に応じて、メール、名前、テキスト フィールドを追加して、フォームを自由にカスタマイズしてください。

完了したら、 [更新]をクリックして変更を保存し、 [設定] → [アクションと通知]に進み、 [Mailchimp]をクリックします。

Mailchimp アクションが下に表示され、Mailchimp の設定をカスタマイズできます。

設定したら、 [更新]をクリックして変更を保存します。 Mailchimp の購読者をメーリング リストに追加するのは、フォームに入力するのと同じくらい簡単です。

次に、フォームをカスタマイズします。 それでは、 [スタイル]タブに行きましょう。

3.デザインをカスタマイズする

Formidable の Visual Form Styler を使用すると、美しいフォームを誰でも簡単にカスタマイズできます。

CSS フックをコーディングしたり使用したりする必要はありません。 クリックしてサイドバーの設定を調整するだけです。

そのため、Formidable の [スタイル] タブにいくつかのオプションが表示されます。

Formidable の既製のデザイン テンプレートの 1 つを選択して、時間を節約したり、独自のスタイル設定を開始したりできます。

テンプレートをカスタマイズするには、テンプレートの 3 つのドットをクリックし、 [編集]をクリックします。

Formidable の Styler では、ニーズに合わせてフォームをカスタマイズできます。

フォント サイズ、境界線の半径、色など、表示されるものはすべてカスタマイズできます。

フォームをクリエイティブにして、Web サイトに固有のものにすることができます。

たとえば、これは私たちが使用するテスト Web サイト用に作成したフォームです。

Formidable の Styler を使用すると、初心者でもエキスパートでも簡単に作業できます。

そのため、設定をいじって、独自のフォームを作成してください。

完了したら、 [更新]をクリックして変更を保存してください。

それでは、そのフォームを表示してみましょう。

4. フォームを表示する

まず、Mailchimp フォームを追加する投稿またはページに移動します。

次に、新しい WordPress ブロックを追加してから、 Formidable Formsブロックを検索して追加します。

次に、ドロップダウン メニューからフォームを選択すると、フォームが表示されます。

最後に、 [更新]をクリックして変更を保存すると、フォームが有効になります。

Mailchimp の簡単なフォームには Formidable が最適だと説明しました。

いくつかの簡単な手順を実行するだけで、カスタム フォームの準備が整います。

コードも手間もかかりません — 簡単なフォーム作成だけです。

Mailchimp フォーム スタイラーを入手しましょう!

WordPressでMailchimpフォームをどのようにスタイルしますか?

WordPress で Mailchimp サインアップ フォームをカスタマイズすることは、フォームを目立たせる最良の方法です。

そして今日、Mailchimp の埋め込みフォームをカスタマイズする 2 つの異なる方法、つまりコードを使用する方法と手ごわいフォームを使用する方法を学びました。 どちらを選択するかは、コードの使いやすさによって異なりますが、経験豊富なコーダーであっても Formidable をお勧めします。

Formidable が最良の選択である理由をまだ疑問に思っている場合は、WordPress プラグインとして Mailchimp のサインアップ フォームが最適である理由に関するこの投稿を確認してください。

がっかりすることはありません。

開始する準備ができたら、料金ページにアクセスして、優れたプランの 1 つを手に入れてください。

最後に、Facebook、Twitter、YouTube で私たちをフォローして、Mailchimp のさらに優れたヒントやコツを入手してください!

Mailchimp と Formidable の詳細をお読みください!

• WordPress に Mailchimp ポップアップを追加する方法 [2 つの簡単な方法!]
  続きを読む

  WordPressでMailchimpポップアップを作成する方法（簡単なガイド）
  続きを読む

  このMailchimpサインアップフォームWordPressプラグインが今すぐ必要です
  続きを読む

Formidable Forms は、現在入手可能な最速の WordPress フォーム ビルダー プラグインの 1 つであることをご存知ですか? まだ使用していない場合は、無料のプラグインまたはフル機能のプロ版から始めましょう!