BLOG

  1. Home
  2. Blog
29 /Dec

Newsletter popup with custom field Shopify

Post by Theme Testing - 0 comment
<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;">&times;</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 %}
Share:
PREVIOUS POST
NEXT POST

Post a Comment!