29
/Dec
Newsletter popup with custom field Shopify
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.min.css " />
<a id="popuplink" href="#inline" style="display:none;"></a>
<div id="inline" style="display:none;text-align:center;">
<div class="modal-f-content grid">
<div class="grid__item one-half news-sec image">
<img src="{{section.settings.image| img_url:'500x'}}">
</div>
<div class=" news-sec form-padd grid__item one-half news-sec">
<h2 class= "head1 transform-none"> {{section.settings.head1}} </h2>
<p class="head2 transform-none"> {{section.settings.head2}} </p>
<section class="">
<div class="container newsletter-container">
<div class="newsletter-wrapper">
<div class=" ">
<div class="text-center newsletter-form modal">
{% form 'customer', class: 'newsletter-form' %}
<input type="hidden" name="contact[tags]" value="newsletter">
<div class="newsletter-form__field-wrapper">
<div class="field">
<div class="inp-fld">
<input class="field__input" autocomplete="first_name" type="text" id="ContactForm-names" name="contact[first_name]" value="{{ form.first_name }}" placeholder="First">
<label class="field__label" for="NewsletterForm--{{ section.id }}">
First
</label>
</div>
<div class="inp-fld">
<input class="field__input" autocomplete="last_name" type="text" id="ContactForm-namess" name="contact[last_name]" value="{{ form.last_name }}" placeholder="Last">
<label class="field__label" for="NewsletterForm--{{ section.id }}">
Last
</label>
</div>
</div>
<div class="field">
<input
id="NewsletterForm--{{ section.id }}"
type="email"
name="contact[email]"
class="field__input"
value="{{ form.email }}"
aria-required="true"
autocorrect="off"
autocapitalize="off"
autocomplete="email"
{% if form.errors %}
autofocus
aria-invalid="true"
aria-describedby="Newsletter-error--{{ section.id }}"
{% elsif form.posted_successfully? %}
aria-describedby="Newsletter-success--{{ section.id }}"
{% endif %}
placeholder="{{ 'newsletter.label' | t }}"
required
>
<label class="field__label" for="NewsletterForm--{{ section.id }}">
{{ 'newsletter.label' | t }}
</label>
</div>
<button type="submit" class="newsletter-form__button field__button" name="commit" id="Subscribe" aria-label="{{ 'newsletter.button_label' | t }}">
Subscribe
</button>
<div class="text-center no-thnks-btn">
<a class="no-thnks-btn close-btn"style="position:static" href="javascript:;" onclick="jQuery.fancybox.close();" >No Thanks!</a>
</div>
{%- if form.errors -%}
<small class="newsletter-form__message form__message" id="Newsletter-error--{{ section.id }}">{% render 'icon-error' %}{{ form.errors.translated_fields['email'] | capitalize }} {{ form.errors.messages['email'] }}</small>
{%- endif -%}
</div>
{%- if form.posted_successfully? -%}
<h3 class="newsletter-form__message newsletter-form__message--success form__message" id="Newsletter-success--{{ section.id }}" tabindex="-1" autofocus>{% render 'icon-success' %}{{ 'newsletter.success' | t }}</h3>
{%- endif -%}
{% endform %}
</div>
</div>
</div>
</div>
</section>
</div>
<p><a class="close-btn btns" href="javascript:;" onclick="jQuery.fancybox.close();" style="padding:5px 10px;color:#fff;border-radius:5px;text-decoration:none;">×</a></p>
</div>
</div>
<script src="https://code.jquery.com/jquery-latest.min.js "></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.min.js "></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.0/jquery.cookie.js "></script>
<script>
jQuery(document).ready(function () {
function openFancybox() {
setTimeout(function () {
jQuery('#popuplink').trigger('click');
}, 500);
};
var visited = jQuery.cookie('visited');
if (visited == 'yes') {
// second page load, cookie active
} else {
openFancybox(); // first page load, launch fancybox
}
jQuery.cookie('visited', 'yes', {
expires: 1 // the number of days cookie will be effective
});
jQuery("#popuplink").fancybox({modal:true, maxWidth: 400, overlay : {closeClick : true}});
});
</script>
<style>
a.close-btn.close-btn.btns {
position: absolute;
left: 15px;
top: -7px;
font-weight: 900;
font-size: 32px;
}
#modals {
position: fixed;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.5);
z-index: 99999;
height: 100%;
width: 100%;
display:none;
}
.inp-fld {
position: relative;
margin: 0px 7px 7px 0px;
}
.head2{
color:{{section.settings.head2_color}};
font-size:{{section.settings.head2_size}}px;
line-height: 24px;
letter-spacing: 0px;
text-align: left;
font-family: Helvetica;
margin:5px 0 15px;
}
.head1{
color:{{section.settings.head1_color}};
font-size:{{section.settings.head1_size}}px;
line-height: 32px;
letter-spacing: 0px;
text-align: left;
font-family: Helvetica;
font-weight: 700;
margin-bottom:0;
}
button.btn.pop-btn span {
text-transform: uppercase;
font-weight: 100;
letter-spacing: 0;
font-size: 14px;
}
span.input-group__btn.popup.grid {
display: block;
width: 43%;
margin: auto;
}
.form-padd{
padding:0 25px;
}
a#not_now {
color: rgb(78,77,81);
text-decoration: none;
font-size: 16px;
font-family: 'Karla';
letter-spacing: 0;
}
.no-thnks-btn {
text-align: center;
margin: 14px;
color: rgb(78,77,81);
text-decoration: none;
font-size: 16px;
font-family: 'Karla';
letter-spacing: 0;
}
.modal-f-content {
max-width: 675px;
width: 100%;
padding: 0;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: #ffffff;
z-index: 999;
box-shadow: 0 2px 6px 0 rgb(0 0 0 / 10%), 0 0 0 1px rgb(0 0 0 / 10%);
max-height: 415px;
}
.modal-f-content input#NewsletterForm--newsletter-popup {
margin: 3px 6px 18px 0;
}
.news-sec.image {
padding-left: 0;
}
div#button {
height: 40px;
width: 40px;
float: right;
border: 1px solid #ccc;
border-radius: 25px;
text-align: center;
vertical-align: middle;
font-size: 27px;
margin: 8px 11px 40px 0;
}
a.newsletter-signup {
color: #ed99d3;
text-transform: uppercase;
letter-spacing: 0.08em;
font-family: 'futura';
font-size: 12px;
border-bottom: 1px solid #ed99d3;
}
.modal-f-content .input-group {
margin-bottom: 20px;
}
div#button a {
font-size: 31px;
font-weight: 600;
}
.news-sec.image img {
width: 100%;
height: 100%;
object-fit: cover;
max-height: 415px;
}
.modal-f-content .field__input {
padding: 8px 20px;
border: 1px solid #d5d9dc;
border-radius: 2px;
/* margin: 4px 3px; */
max-height: 40px;
}
.modal-f-content button#Subscribe {
width: 98.2% !important;
font-family: Helvetica;
line-height: 31px;
letter-spacing: 0px;
font-size: 16px;
background-color: rgb(167,148,160);
color: rgb(247,249,250);
border-radius: 2px;
max-height: 40px;
}
div#close a {
color: #fff;
text-decoration: none;
font-weight: 700;
font-size: 34px;
}
div#close {
position: absolute;
left: 3%;
top: 0%;
}
.modal-f-content .newsletter-form__message--success {
bottom: 0%;
left:17%;
}
@media(max-width:749px){
.modal-f-content {
max-width: 320px;
/* height: 320px; */
padding: 0;
}
.form-padd{
padding: 0px 10px;
}
div#close {
margin:8px 11px 0px 0;
}
.head1 {
font-size:{{section.settings.head1_size_mob}}px;
margin-left: 0px;
margin-bottom: 0;
}
.head2 {
font-size:{{section.settings.head2_size_mob}}px;
margin: 13px 0;
}
.modal-f-content {
max-height: 600px;
}
.news-sec.image img {
max-height: 142px;
}
.grid__item.one-half.news-sec {
width: calc(100% - 0.375rem);
max-width: 100%;
}
}
@media (max-width: 375px){
.modal-f-content {
max-width: 285px;
}
}
</style>
<script>
// And cookie logic
</script>
<!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js "></script> -->
{% schema %}
{
"name": "Signup Modal Form",
"settings": [
{
"type":"image_picker",
"id":"image",
"label":"image"
},
{
"type":"text",
"id":"head1",
"label":"Main heading",
"default":"Hey Proxy Foxy! Not on the List?"
},
{
"type":"text",
"id":"head2",
"label":"Sub heading",
"default":"Sign up for free to get Proxy Hair emails and catch our deals!"
},
{
"type": "range",
"id": "head1_size",
"min": 8,
"max": 36,
"step": 1,
"unit": "px",
"label": "Heading size",
"default": 24
},
{
"type": "range",
"id": "head1_size_mob",
"min": 8,
"max": 36,
"step": 1,
"unit": "px",
"label": "Heading size for Mobile",
"default": 28
},
{
"type":"color",
"id":"head1_color",
"label":"Heading Color",
"default":"#f09ec2"
},
{
"type": "range",
"id": "head2_size",
"min": 8,
"max": 36,
"step": 1,
"unit": "px",
"label": "Subheading size",
"default": 16
},
{
"type": "range",
"id": "head2_size_mob",
"min": 8,
"max": 36,
"step": 1,
"unit": "px",
"label": "Subheading size fro Mobile",
"default": 14
},
{
"type":"color",
"id":"head2_color",
"label":"Subheading Color",
"default":"#000"
}
],
"presets": [
{
"name": {
"cs": "Obrázek s textovým překryvem",
"da": "Billede med tekstoverlejring",
"de": "Foto mit überlegtem Text",
"en": "Signup Modal Form",
"es": "Imagen con texto superpuesto",
"fi": "Kuva päällä olevalla tekstillä",
"fr": "Image avec calque texte",
"it": "Immagine con testo",
"ja": "テキストオーバーレイ付き画像",
"ko": "텍스트 오버레이 포함 이미지",
"nb": "Bilde med tekstoverlegg",
"nl": "Foto met tekstoverlay",
"pl": "Obraz z nakładką tekstową",
"pt-BR": "Imagem com sobreposição de texto",
"pt-PT": "Imagem com sobreposição de texto",
"sv": "Bild med textöverlagring",
"th": "การวางซ้อนรูปภาพพร้อมข้อความ",
"tr": "Metin katmanı içeren görsel",
"vi": "Hình ảnh có lớp phủ văn bản",
"zh-CN": "带文本叠加的图片",
"zh-TW": "附文字疊加層的圖片"
}
}
]
}
{% endschema %}
{% stylesheet %}
{% endstylesheet %}
{% javascript %}
{% endjavascript %}
<a id="popuplink" href="#inline" style="display:none;"></a>
<div id="inline" style="display:none;text-
<div class="modal-f-content grid">
<div class="grid__item one-half news-sec image">
<img src="{{section.settings.image| img_url:'500x'}}">
</div>
<div class=" news-sec form-padd grid__item one-half news-sec">
<h2 class= "head1 transform-none"> {{section.settings.head1}} </h2>
<p class="head2 transform-none"> {{section.settings.head2}} </p>
<section class="">
<div class="container newsletter-container">
<div class="newsletter-wrapper">
<div class=" ">
<div class="text-center newsletter-form modal">
{% form 'customer', class: 'newsletter-form' %}
<input type="hidden" name="contact[tags]" value="newsletter">
<div class="newsletter-form__field-
<div class="field">
<div class="inp-fld">
<input class="field__input" autocomplete="first_name" type="text" id="ContactForm-names" name="contact[first_name]" value="{{ form.first_name }}" placeholder="First">
<label class="field__label" for="NewsletterForm--{{ section.id }}">
First
</label>
</div>
<div class="inp-fld">
<input class="field__input" autocomplete="last_name" type="text" id="ContactForm-namess" name="contact[last_name]" value="{{ form.last_name }}" placeholder="Last">
<label class="field__label" for="NewsletterForm--{{ section.id }}">
Last
</label>
</div>
</div>
<div class="field">
<input
id="NewsletterForm--{{ section.id }}"
type="email"
name="contact[email]"
class="field__input"
value="{{ form.email }}"
aria-required="true"
autocorrect="off"
autocapitalize="off"
autocomplete="email"
{% if form.errors %}
autofocus
aria-invalid="true"
aria-describedby="Newsletter-
{% elsif form.posted_successfully? %}
aria-describedby="Newsletter-
{% endif %}
placeholder="{{ 'newsletter.label' | t }}"
required
>
<label class="field__label" for="NewsletterForm--{{ section.id }}">
{{ 'newsletter.label' | t }}
</label>
</div>
<button type="submit" class="newsletter-form__button field__button" name="commit" id="Subscribe" aria-label="{{ 'newsletter.button_label' | t }}">
Subscribe
</button>
<div class="text-center no-thnks-btn">
<a class="no-thnks-btn close-btn"style="position:
</div>
{%- if form.errors -%}
<small class="newsletter-form__
{%- endif -%}
</div>
{%- if form.posted_successfully? -%}
<h3 class="newsletter-form__
{%- endif -%}
{% endform %}
</div>
</div>
</div>
</div>
</section>
</div>
<p><a class="close-btn btns" href="javascript:;" onclick="jQuery.fancybox.
</div>
</div>
<script src="https://code.jquery.com/
<script src="https://cdnjs.cloudflare.
<script src="https://cdnjs.cloudflare.
<script>
jQuery(document).ready(
function openFancybox() {
setTimeout(function () {
jQuery('#popuplink').trigger('
}, 500);
};
var visited = jQuery.cookie('visited');
if (visited == 'yes') {
// second page load, cookie active
} else {
openFancybox(); // first page load, launch fancybox
}
jQuery.cookie('visited', 'yes', {
expires: 1 // the number of days cookie will be effective
});
jQuery("#popuplink").fancybox(
});
</script>
<style>
a.close-btn.close-btn.btns {
position: absolute;
left: 15px;
top: -7px;
font-weight: 900;
font-size: 32px;
}
#modals {
position: fixed;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.5);
z-index: 99999;
height: 100%;
width: 100%;
display:none;
}
.inp-fld {
position: relative;
margin: 0px 7px 7px 0px;
}
.head2{
color:{{section.settings.
font-size:{{section.settings.
line-height: 24px;
letter-spacing: 0px;
text-align: left;
font-family: Helvetica;
margin:5px 0 15px;
}
.head1{
color:{{section.settings.
font-size:{{section.settings.
line-height: 32px;
letter-spacing: 0px;
text-align: left;
font-family: Helvetica;
font-weight: 700;
margin-bottom:0;
}
button.btn.pop-btn span {
text-transform: uppercase;
font-weight: 100;
letter-spacing: 0;
font-size: 14px;
}
span.input-group__btn.popup.
display: block;
width: 43%;
margin: auto;
}
.form-padd{
padding:0 25px;
}
a#not_now {
color: rgb(78,77,81);
text-decoration: none;
font-size: 16px;
font-family: 'Karla';
letter-spacing: 0;
}
.no-thnks-btn {
text-align: center;
margin: 14px;
color: rgb(78,77,81);
text-decoration: none;
font-size: 16px;
font-family: 'Karla';
letter-spacing: 0;
}
.modal-f-content {
max-width: 675px;
width: 100%;
padding: 0;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: #ffffff;
z-index: 999;
box-shadow: 0 2px 6px 0 rgb(0 0 0 / 10%), 0 0 0 1px rgb(0 0 0 / 10%);
max-height: 415px;
}
.modal-f-content input#NewsletterForm--
margin: 3px 6px 18px 0;
}
.news-sec.image {
padding-left: 0;
}
div#button {
height: 40px;
width: 40px;
float: right;
border: 1px solid #ccc;
border-radius: 25px;
text-align: center;
vertical-align: middle;
font-size: 27px;
margin: 8px 11px 40px 0;
}
a.newsletter-signup {
color: #ed99d3;
text-transform: uppercase;
letter-spacing: 0.08em;
font-family: 'futura';
font-size: 12px;
border-bottom: 1px solid #ed99d3;
}
.modal-f-content .input-group {
margin-bottom: 20px;
}
div#button a {
font-size: 31px;
font-weight: 600;
}
.news-sec.image img {
width: 100%;
height: 100%;
object-fit: cover;
max-height: 415px;
}
.modal-f-content .field__input {
padding: 8px 20px;
border: 1px solid #d5d9dc;
border-radius: 2px;
/* margin: 4px 3px; */
max-height: 40px;
}
.modal-f-content button#Subscribe {
width: 98.2% !important;
font-family: Helvetica;
line-height: 31px;
letter-spacing: 0px;
font-size: 16px;
background-color: rgb(167,148,160);
color: rgb(247,249,250);
border-radius: 2px;
max-height: 40px;
}
div#close a {
color: #fff;
text-decoration: none;
font-weight: 700;
font-size: 34px;
}
div#close {
position: absolute;
left: 3%;
top: 0%;
}
.modal-f-content .newsletter-form__message--
bottom: 0%;
left:17%;
}
@media(max-width:749px){
.modal-f-content {
max-width: 320px;
/* height: 320px; */
padding: 0;
}
.form-padd{
padding: 0px 10px;
}
div#close {
margin:8px 11px 0px 0;
}
.head1 {
font-size:{{section.settings.
margin-left: 0px;
margin-bottom: 0;
}
.head2 {
font-size:{{section.settings.
margin: 13px 0;
}
.modal-f-content {
max-height: 600px;
}
.news-sec.image img {
max-height: 142px;
}
.grid__item.one-half.news-sec {
width: calc(100% - 0.375rem);
max-width: 100%;
}
}
@media (max-width: 375px){
.modal-f-content {
max-width: 285px;
}
}
</style>
<script>
// And cookie logic
</script>
<!-- <script src="https://ajax.googleapis.
{% schema %}
{
"name": "Signup Modal Form",
"settings": [
{
"type":"image_picker",
"id":"image",
"label":"image"
},
{
"type":"text",
"id":"head1",
"label":"Main heading",
"default":"Hey Proxy Foxy! Not on the List?"
},
{
"type":"text",
"id":"head2",
"label":"Sub heading",
"default":"Sign up for free to get Proxy Hair emails and catch our deals!"
},
{
"type": "range",
"id": "head1_size",
"min": 8,
"max": 36,
"step": 1,
"unit": "px",
"label": "Heading size",
"default": 24
},
{
"type": "range",
"id": "head1_size_mob",
"min": 8,
"max": 36,
"step": 1,
"unit": "px",
"label": "Heading size for Mobile",
"default": 28
},
{
"type":"color",
"id":"head1_color",
"label":"Heading Color",
"default":"#f09ec2"
},
{
"type": "range",
"id": "head2_size",
"min": 8,
"max": 36,
"step": 1,
"unit": "px",
"label": "Subheading size",
"default": 16
},
{
"type": "range",
"id": "head2_size_mob",
"min": 8,
"max": 36,
"step": 1,
"unit": "px",
"label": "Subheading size fro Mobile",
"default": 14
},
{
"type":"color",
"id":"head2_color",
"label":"Subheading Color",
"default":"#000"
}
],
"presets": [
{
"name": {
"cs": "Obrázek s textovým překryvem",
"da": "Billede med tekstoverlejring",
"de": "Foto mit überlegtem Text",
"en": "Signup Modal Form",
"es": "Imagen con texto superpuesto",
"fi": "Kuva päällä olevalla tekstillä",
"fr": "Image avec calque texte",
"it": "Immagine con testo",
"ja": "テキストオーバーレイ付き画像",
"ko": "텍스트 오버레이 포함 이미지",
"nb": "Bilde med tekstoverlegg",
"nl": "Foto met tekstoverlay",
"pl": "Obraz z nakładką tekstową",
"pt-BR": "Imagem com sobreposição de texto",
"pt-PT": "Imagem com sobreposição de texto",
"sv": "Bild med textöverlagring",
"th": "การวางซ้อนรูปภาพพร้อมข้อความ"
"tr": "Metin katmanı içeren görsel",
"vi": "Hình ảnh có lớp phủ văn bản",
"zh-CN": "带文本叠加的图片",
"zh-TW": "附文字疊加層的圖片"
}
}
]
}
{% endschema %}
{% stylesheet %}
{% endstylesheet %}
{% javascript %}
{% endjavascript %}
Post a Comment!