Simple Opt In Form
How do I make an 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 11 October 2022, Tuesday.
Simple Opt In Form - Script Codes 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&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 - Script Codes 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%; }
}
Developer | James Zedd |
Username | james_zedd |
Uploaded | October 11, 2022 |
Rating | 3 |
Size | 3,203 Kb |
Views | 10,120 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
Simple jQuery Selector Class Change | 1,802 Kb |
A Pen by James Zedd | 2,674 Kb |
Flex | 2,796 Kb |
FS Core Values | 2,020 Kb |
Responsive Advert | 2,354 Kb |
Pure CSS Slide Out Menu | 2,907 Kb |
Modern Responsive Product Comparison Table for E-commerce | 2,538 Kb |
Pure CSS Pop Up Modal | 2,858 Kb |
Flex Chart | 4,111 Kb |
HTML for IID | 1,792 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
Gulpfile | Aimhigherwebdesign-amy | 1,765 Kb |
Donut Chart example - MorrisJS | Capelo | 2,385 Kb |
Blackberry Mock | Zacharyolson | 1,865 Kb |
Responsive slide | Thorien | 2,400 Kb |
Basic 3D Fullscreen Transition | Apetrov | 3,270 Kb |
Gradients | Karpovsystems | 2,394 Kb |
Knob rotation | Alemesre | 2,122 Kb |
Fluid Layout with Float | Jxqr97 | 1,785 Kb |
Sticky notes with CSS3 | HaiNguyen007 | 2,146 Kb |
Whyutils | LeYvan | 3,752 Kb |
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. Hide Your IP Now!