Проблемы интеграции MailChimp HTML - PullRequest
Новая
       20

Проблемы интеграции MailChimp HTML

0 голосов
/ 30 января 2020

Я пытаюсь интегрировать мою форму электронной почты с Mailchimp. Моя цель состоит в том, чтобы, когда кто-то вводил свое электронное письмо в мою электронную форму, оно автоматически отправлялось моей аудитории mailchimp. Я смотрел видео, но не получил тот же результат. Любая помощь будет принята с благодарностью.

Я не хочу использовать встроенный код для вставки 

/*!
 * Start Bootstrap - Landing Page v5.0.7 (https://startbootstrap.com/template-overviews/landing-page)
 * Copyright 2013-2019 Start Bootstrap
 * Licensed under MIT (https://github.com/BlackrockDigital/startbootstrap-landing-page/blob/master/LICENSE)
 */

 body {
    font-family: 'Lato', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  }
  
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-family: 'Lato', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-weight: 700;
  }
  
  header.masthead {
    position: relative;
    background-color: #166abf;
    background: url(https://github.com/grobconnolly/textjet-landingpage/blob/master/hero.jpg?raw=true) no-repeat center center;
    background-size: cover;
    padding-top: 8rem;
    padding-bottom: 8rem;
  }
  
  header.masthead .overlay {
    position: absolute;
    background-color: #212529;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    opacity: 0.3;
  }
  
  header.masthead h1 {
    font-size: 2rem;
  }
  
  @media (min-width: 768px) {
    header.masthead {
      padding-top: 12rem;
      padding-bottom: 12rem;
    }
    header.masthead h1 {
      font-size: 3rem;
    }
  }
  
  .showcase .showcase-text {
    padding: 3rem;
  }
  
  .showcase .showcase-img {
    min-height: 30rem;
    background-size: cover;
  }
  
  @media (min-width: 768px) {
    .showcase .showcase-text {
      padding: 7rem;
    }
  }
  .titleHow #titleHow{
  float: right;
  }

  .features-icons {
    padding-top: 7rem;
    padding-bottom: 7rem;
  }
  
  .features-icons .features-icons-item {
    max-width: 20rem;
  }
  
  .features-icons .features-icons-item .features-icons-icon {
    height: 7rem;
  }
  
  .features-icons .features-icons-item .features-icons-icon i {
    font-size: 4.5rem;
  }
  
  .features-icons .features-icons-item:hover .features-icons-icon i {
    font-size: 5rem;
  }
  
  .testimonials {
    padding-top: 7rem;
    padding-bottom: 7rem;
  }
  
  .testimonials .testimonial-item {
    max-width: 18rem;
  }
  
  .testimonials .testimonial-item img {
    max-width: 12rem;
    box-shadow: 0px 5px 5px 0px #adb5bd;
  }
  
  .call-to-action {
    position: relative;
    background-color: #343a40;
    background: url("../img/bg-masthead.jpg") no-repeat center center;
    background-size: cover;
    padding-top: 7rem;
    padding-bottom: 7rem;
  }
  
  .call-to-action .overlay {
    position: absolute;
    background-color: #212529;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    opacity: 0.3;
  }
  
  footer.footer {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }

  .showcase{
  background-image: url(spikes.png);
  }

  .backgroundWhite {
    background-color: white;
    border-style: solid;
  border-width: 1px;
  border-color: rgb(203, 203, 203);
  }
  
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
    integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
  <link rel="stylesheet" type="text/css" href="style.css">

  <!-- custom fonts -->

  <script src="https://kit.fontawesome.com/81d086c017.js" crossorigin="anonymous"></script>

  <link href="vendor/simple-line-icons/css/simple-line-icons.css" rel="stylesheet" type="text/css">
  <link href="https://fonts.googleapis.com/css?family=Lato:300,400,700,300italic,400italic,700italic" rel="stylesheet"
    type="text/css">




  <title>TextJet - Loyalty Simplied</title>
</head>

<body>

  <!-- Navigation -->
  <nav class="navbar navbar-light bg-light static-top">
    <div class="container">
      <a class="navbar-brand" href="https://textjet.com" src><img src="text-jet-website copy.png"></a>
      <a class="btn btn-primary" href="https://app.textjet.com/app/login">Sign In</a>
    </div>
  </nav>

  <!-- Masthead -->
  <header class="masthead text-white text-center">
    <div class="overlay"></div>
    <div class="container">
      <div class="row">
        <div class="col-xl-9 mx-auto">
          <h1 class="mb-5">Finally a "jet-powered" loyalty system for Clover that's affordable!</h1>

          <h3 class="mb-5">Plans starting at just $39/mo!</h3>
        </div>
        <div class="col-md-10 col-lg-8 col-xl-7 mx-auto">
            <form action="https://textjet.us20.list-manage.com/subscribe/post?u=20cf6ad4ad5bf2b789b944ba2&amp;id=0c07716132" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_self" novalidate>
            <div class="form-row">
              <div class="col-12 col-md-9 mb-2 mb-md-0">
                <input type="EMAIL" class="form-control form-control-lg"
                  placeholder="Enter your email for early access..." id="mce-EMAIL">
              </div>
              <div class="col-12 col-md-3">
                <button type="submit" value="Subscribe" id="mc-embedded-subscribe" class="btn btn-block btn-lg btn-primary">Sign up!</button>
              </div>
            </div>
          </form>
        </div>
      </div>
    </div>
  </header>

  <!-- Icons Grid -->
  <section class="features-icons bg-light text-center">
    <div class="container">
      <div class="row backgroundWhite">
        <div class="col-lg-4">
          <div class="features-icons-item mx-auto mb-5 mb-lg-0 mb-lg-3">
            <div class="features-icons-icon d-flex">
              <i class="icon-screen-desktop fas fa-users m-auto text-primary"></i>
            </div>
            <h3>Connect With Customers</h3>
            <p class="lead mb-0">Forget email blasts and in-mail flyers. Follow up with your customers where they’ll see
              it: On their phones!</p>
          </div>
        </div>
        <div class="col-lg-4">
          <div class="features-icons-item mx-auto mb-5 mb-lg-0 mb-lg-3">
            <div class="features-icons-icon d-flex">
              <i class="icon-screen-desktop fas fa-rocket m-auto text-primary"></i>
            </div>
            <div>

            </div>
            <h3>Gamify the experience</h3>
            <p class="lead mb-0">Use points, promotions, and other incentives to engage with customers and keep them
              coming back for more.</p>
          </div>
        </div>
        <div class="col-lg-4">
          <div class="features-icons-item mx-auto mb-0 mb-lg-3">
            <div class="features-icons-icon d-flex">
              <i class="icon-screen-desktop fas fa-trophy m-auto text-primary"></i>
            </div>
            <h3>Reward Loyalty</h3>
            <p class="lead mb-0">Give customers the ability to redeem their points for free products or to qualify for
              special deals and loyalty programs.</p>
          </div>
        </div>
      </div>
    </div>
  </section>

  <section class="showcase">
    <div class="container-fluid p-0">
      <div class="row no-gutters">
        <div class="img-fluid col-md-8"></div>
        <img class="img-fluid mx-auto mw-50" alt="Responsive image" src="https://textjet.com/wp-content/uploads/2019/11/StraigtAnim.gif">
      </div>
    </div>
    
  </section>
  <!-- Image Showcases 
    <section class="showcase">
      <div class="container-fluid p-0">
        <div class="row no-gutters">
    
          <div class="col-lg-6 order-lg-2 text-white showcase-img" style="background-image: url('coffeecups.png');"></div>
          <div class="col-lg-6 order-lg-1 my-auto showcase-text">
            <h2>Set-Up Your Account</h2>
            <p class="lead mb-0">Your time is valuable. That is why we made TextJet super easy to set-up. You will have your TextJet system generating loyalty in under 5 minutes!</p>
          </div>
        </div>
        <div class="row no-gutters">
          <div class="col-lg-6 text-white showcase-img" style="background-image: url('coffeecups.png');"></div>
          <div class="col-lg-6 my-auto showcase-text">
            <h2>Enroll Your Customers Painlessly</h2>
            <p class="lead mb-0">We simplified the enrollment process to allow your customers to easily sign-up for your loyalty program with TextJet. </p>
          </div>
        </div>
        <div class="row no-gutters">
          <div class="col-lg-6 order-lg-2 text-white showcase-img" style="background-image: url('coffeecups.png');"></div>
          <div class="col-lg-6 order-lg-1 my-auto showcase-text">
            <h2>Follow-up &amp; Grow Your Business!</h2>
            <p class="lead mb-0">With TextJet, you can send targeted text messages to attract your customers to come back and shop at your store. The larger your loyalty campaign, the bigger the impact you will have on your revenue! </p>
          </div>
        </div>
      </div>
    </section>
  -->
  <!-- Testimonials -->
  <section class="testimonials text-center bg-light showcase">
    <div class="container backgroundWhite">
      <h2 class="mb-5">What people are saying...</h2>
      <div class="row">
        <div class="col-lg-4">
          <div class="testimonial-item mx-auto mb-5 mb-lg-0">
            <img class="img-fluid rounded-circle mb-3" src="img/testimonials-1.jpg" alt="">
            <h5>Margaret E.</h5>
            <p class="font-weight-light mb-0">"This is fantastic! Thanks so much guys!"</p>
          </div>
        </div>
        <div class="col-lg-4">
          <div class="testimonial-item mx-auto mb-5 mb-lg-0">
            <img class="img-fluid rounded-circle mb-3" src="img/testimonials-2.jpg" alt="">
            <h5>Fred S.</h5>
            <p class="font-weight-light mb-0">"Bootstrap is amazing. I've been using it to create lots of super nice
              landing pages."</p>
          </div>
        </div>
        <div class="col-lg-4">
          <div class="testimonial-item mx-auto mb-5 mb-lg-0">
            <img class="img-fluid rounded-circle mb-3" src="img/testimonials-3.jpg" alt="">
            <h5>Sarah W.</h5>
            <p class="font-weight-light mb-0">"Thanks so much for making these free resources available to us!"</p>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- Call to Action -->
  <section class="call-to-action text-white text-center">
    <div class="overlay"></div>
    <div class="container">
      <div class="row">
        <div class="col-xl-9 mx-auto">
          <h2 class="mb-4">Ready to get started? Sign up now!</h2>
        </div>
        <div class="col-md-10 col-lg-8 col-xl-7 mx-auto">
          <form>
            <div class="form-row">
              <div class="col-12 col-md-9 mb-2 mb-md-0">
                <input type="email" class="form-control form-control-lg" placeholder="Enter your email...">
              </div>
              <div class="col-12 col-md-3">
                <button type="submit" class="btn btn-block btn-lg btn-primary">Sign up!</button>
              </div>
            </div>
          </form>
        </div>
      </div>
    </div>
  </section>

  <!-- Footer -->
  <footer class="footer bg-light">
    <div class="container">
      <div class="row">
        <div class="col-lg-6 h-100 text-center text-lg-left my-auto">
          <ul class="list-inline mb-2">
            <li class="list-inline-item">
              <a href="#">About</a>
            </li>
            <li class="list-inline-item">&sdot;</li>
            <li class="list-inline-item">
              <a href="#">Contact</a>
            </li>
            <li class="list-inline-item">&sdot;</li>
            <li class="list-inline-item">
              <a href="#">Terms of Use</a>
            </li>
            <li class="list-inline-item">&sdot;</li>
            <li class="list-inline-item">
              <a href="#">Privacy Policy</a>
            </li>
          </ul>
          <p class="text-muted small mb-4 mb-lg-0">&copy; Your Website 2019. All Rights Reserved.</p>
        </div>
        <div class="col-lg-6 h-100 text-center text-lg-right my-auto">
          <ul class="list-inline mb-0">
            <li class="list-inline-item mr-3">
              <a href="#">
                <i class="fab fa-facebook fa-2x fa-fw"></i>
              </a>
            </li>
            <li class="list-inline-item mr-3">
              <a href="#">
                <i class="fab fa-twitter-square fa-2x fa-fw"></i>
              </a>
            </li>
            <li class="list-inline-item">
              <a href="#">
                <i class="fab fa-instagram fa-2x fa-fw"></i>
              </a>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </footer>

  <!-- Bootstrap core JavaScript -->
  <script src="vendor/jquery/jquery.min.js"></script>
  <script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>

</body>

</html>

код mailchimp создан. Я хочу использовать свой дизайн. Вот код, который mailchimp предоставляет для встраивания кода:

#mc_embed_signup {background: #fff; ясно: левый; шрифт: 14px Helvetica, Arial, без засечек; width: 100%;} / * Добавьте собственные переопределения стилей формы Mailchimp в таблицу стилей сайта или в этот блок стилей. Мы рекомендуем переместить этот блок и предыдущую ссылку CSS в ГОЛОВКУ вашего файла HTML. * /

Подписаться
...