1

最近、次のツールを使用して簡単な Web アプリの構築を開始しました。

  1. Vue.js
  2. カーボンデザインシステム

次のステップは、メーリング リストを含めることです。テキスト ボックスと購読ボタンの 2 つのコンポーネントを含む単純なフォームを追加したいと考えています。

私はバックエンドにとらわれず、MailChimp または SendGrid の使用を検討しています。ただし、次の問題に遭遇します。MailChimp と SendGrid の両方で、ユーザーは Web ページにコピーできる HTML でカスタム フォームを生成できます。問題は、スタイルがカーボン デザイン システムと一致しないことです。たとえばcv-button、標準の代わりに公式のコンポーネントを使用したいと思います。button

この問題に対処するために、2 つのアプローチを試みました。まず、CSS のスタイリングをいじりました。私の Carbon Design System は css の代わりに scss を使用しており、このフォームだけにカスタム css を設定すると、必然的に将来的に一貫性のないデザインにつながるため、これは進むべき道ではありません。

次に、MailChimp API と SendGrid API の両方を直接操作してみました。しかし、これは退屈で時間のかかる作業です。さらに、それはプロジェクトに多くの複雑さをもたらします。

私の質問: ノード js (vue.js) アプリとサード パーティのメール マーケティング ソリューション (mailchimp / sendgrid) にカスタム デザイン システムと一致するサブスクリプション ボタンを含める場合のベスト プラクティスは何ですか。

これは私の現在のmailchimpコードです:

<template>
  <div>
    <!-- Begin Mailchimp Signup Form -->
    <link
      href="//cdn-images.mailchimp.com/embedcode/horizontal-slim-10_7.css"
      rel="stylesheet"
      type="text/css"
    />

    <div id="mc_embed_signup">
      <form
        action="https://pm.us1.list-manage.com/subscribe/post?u=5119408c70596654ef4da6c1a&amp;id=987baf3d10"
        method="post"
        id="mc-embedded-subscribe-form"
        name="mc-embedded-subscribe-form"
        class="validate"
        target="_blank"
        novalidate
      >
        <div id="mc_embed_signup_scroll">
          <label for="mce-EMAIL">Join Waiting List</label>
          <input
            type="email"
            value=""
            name="EMAIL"
            class="email"
            id="mce-EMAIL"
            placeholder="email address"
            required
          />
          <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
          <div style="position: absolute; left: -5000px;" aria-hidden="true">
            <input
              type="text"
              name="b_5119408c70596654ef4da6c1a_987baf3d10"
              tabindex="-1"
              value=""
            />
          </div>
          <div class="clear">
            <input
              type="submit"
              value="Subscribe"
              name="subscribe"
              id="mc-embedded-subscribe"
              class="button"
            />
          </div>
        </div>
      </form>
    </div>

    <!--End mc_embed_signup-->
  </div>
</template>

<script>
export default {
  name: "SignupForm",
  components: {}
};
</script>

それは次のようにレンダリングされます：

ここに画像の説明を入力

これは、cv-button などの公式 Carbon コンポーネントのスタイルとは異なります。

4

1 に答える 1