Simple Opt In Form

Developer
James Zedd
Size
3,203 Kb
Views
10,115
  1. Simple Opt In Form Previews
  2. Simple Opt In Form HTML Codes
  3. Simple Opt In Form CSS Codes

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 Previews
IQ Test

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&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 - 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%; }
}
Simple Opt In Form - Script Codes
Simple Opt In Form - Script Codes
Home Page Home
Developer James Zedd
Username james_zedd
Uploaded October 11, 2022
Rating 3
Size 3,203 Kb
Views 10,115
Do you need developer help for Simple Opt In Form?

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!

James Zedd (james_zedd) Script Codes
Name
FS Core Values
Responsive Multi-Column Table with Links
Flex
Simple jQuery Selector Class Change
Price
Responsive Advert
Flex Chart
Pure CSS Toggle Function
Pure CSS Pop Up Modal
CSS Menu Item Transition and Image Animation
Create amazing web content with AI!

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!