Simple Opt In Form

What is a simple opt in form How do you make a simple opt in form? This script and codes were developed by James Zedd on 15 December 2021, Wednesday.

How do I make an simple opt in form?
  1. Simple Opt In Form Previews
  2. Simple Opt In Form HTML Codes
  3. Simple Opt In Form CSS Codes
Simple Opt In Form Previews

Simple Opt In Form HTML Codes

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>Simple Opt In Form</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>
  <div class="fs-optin-container">
  <p class="main-title">Would you like to try some <span>FREE SAMPLES</span> of our 5 Original Flavors?</p>
  <img src="https://cdn.shopify.com/s/files/1/1141/8520/files/newsletter-bg02.jpg?1664443876488905417" alt="Free Samples from Feast Seasoning" class="mobile-img" />
  <p class="text-casual">We’ll send you 5 - 1/2oz packs of our delicious 
all-natural seasoning blends.</p>
  <p class="list-title">Flavors you will Receive from Us:</p>
  <ul class="flavor-list">
    <li>Rock'n Garlic</li>
    <li>Lemon Pepper</li>
    <li>The Works</li>
    <li>The Works Spicy</li>
    <li>Chipotle Honey</li>
  </ul>
  <p class="text-casual">Sign up below to get your FREE sample pack.</p>
</div>
<div class="field-container">
  <!-- Begin MailChimp Signup Form -->
  <div id="mc_embed_signup">
  <form action="//feastseasoning.us12.list-manage.com/subscribe/post?u=f2955ae4e0ebc78e6d554fe71&amp;id=fdec3dfbc5" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
      <div id="mc_embed_signup_scroll">
  <div class="mc-field-group">
    <input type="text" value="" name="FNAME" placeholder="first name" class="required inline" id="mce-FNAME">
  </div>
  <div class="mc-field-group">
    <input type="email" value="" name="EMAIL" placeholder="email address" class="required email inline" id="mce-EMAIL">
  </div>
    <div id="mce-responses" class="clear">
      <div class="response" id="mce-error-response" style="display:none"></div>
      <div class="response" id="mce-success-response" style="display:none"></div>
    </div>    <!-- 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_f2955ae4e0ebc78e6d554fe71_fdec3dfbc5" tabindex="-1" value=""></div>
      <div class="clear"><input type="submit" value="Continue" name="subscribe" id="mc-embedded-subscribe" class="button submit-btn"></div>
      </div>
  </form>
  </div>

  <!--End mc_embed_signup-->
</div>
  
  
</body>
</html>

Simple Opt In Form CSS Codes

.fs-optin-container {
  max-width: 1160px;
  border: 2px solid #c4c4c4;
  padding: 25px 30px 0;
  -webkit-border-top-left-radius: 12px;
  -webkit-border-top-right-radius: 12px;
  -moz-border-radius-topleft: 12px;
  -moz-border-radius-topright: 12px;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
  background: url('https://cdn.shopify.com/s/files/1/1141/8520/files/newsletter-bg01.png?1780495376694110144') no-repeat right center;
}

.fs-optin-container p, .fs-optin-container ul li, input {
  font-family: 'Raleway', arial, sans-serif;
}

.main-title {
  font-size: 30px;
  margin-top: 0;
}

.main-title span {
  font-weight: 700;
}

.mobile-img {
  display: none;
}

.text-casual {
  font-size: 18px;
}

.list-title {
  font-size: 24px;
}

ul.flavor-list li {
  font-size: 24px;
  font-weight: 700;
}

/* form field container */

.field-container {
  max-width: 1160px;
  border: 2px solid #c4c4c4;
  border-top: 0;
  padding: 10px 140px 10px 30px;
  -webkit-border-bottom-right-radius: 12px;
  -webkit-border-bottom-left-radius: 12px;
  -moz-border-radius-bottomright: 12px;
  -moz-border-radius-bottomleft: 12px;
  border-bottom-right-radius: 12px;
  border-bottom-left-radius: 12px;
  background: #22DE2A;
  position: relative;
}

.mc-field-group {
  display: inline-block;
  width: 46.5%;
  margin-right: 2%;
}

.clear {
  display: inline-block;
}

input.inline {
  width: 100% !important;
  height: 40px;
  /*background: #5ed96d;*/
  border: 1px solid #ffffff;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  color: #ffffff;
  padding-left: 10px;
}

input[type="submit"], .submit-btn {
  height: 44px;
  background: #22DE2A;
  padding: 0 18px;
  border: 4px solid #ffffff;
  font-weight: 700;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  color: #ffffff;
  position: absolute;
  bottom: 10px;
  right: 25px;
  cursor: pointer;
}

input::-webkit-input-placeholder {
   color: #000000;
}

input:-moz-placeholder { /* Firefox 18- */
   color: #000000;  
}

input::-moz-placeholder {  /* Firefox 19+ */
   color: #000000;  
}

input:-ms-input-placeholder {  
   color: #000000;  
}

@media (max-width: 991px) {
  
  .fs-optin-container {
    background: url('https://cdn.shopify.com/s/files/1/1141/8520/files/newsletter-bg02.jpg?1664443876488905417') no-repeat right bottom;
  }
  
}

@media (max-width: 767px) {
  
  .fs-optin-container {
    text-align: center;
    margin: 0 10px;
    background: initial;
  }
  
  .mobile-img {
    display: block;
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
  }
  
  .flavor-list {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  
  .field-container {
    padding: 10px 30px;
    margin: 0 10px;
  }
  
  .mc-field-group {
    display: block;
    width: 100%;
    margin-right: 0;
    margin-bottom: 8px;
  }
  
  .clear {
    display: block;
    margin: 0 auto;
  }
  
  .submit-btn {
    display: block;
    width: 240px;
    margin: 0 auto;
    padding: 0 18px;
    position: relative;
    bottom: 0;
    right: 0;
  }
  
}

@media (max-width: 480px) {
  
  .field-container {
    padding: 10px 20px;
  }
  
  .mc-field-group {
    width: 95%;
  }
  
  .clear {
    width: 100%;
  }
  
  .submit-btn {
    width: 100%;
  }
  
}
Do you want hide your ip address?Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup.