Instantly share code, notes, and snippets.
Last active
April 13, 2016 06:01
-
Star
(0)
0
You must be signed in to star a gist -
Fork
(0)
0
You must be signed in to fork a gist
-
Save jkentjnr/acfc4247e5956bc33546f3c8f89a1265 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| { | |
| "template": { | |
| "key": "stkildamums" | |
| }, | |
| "campaign": { | |
| "key": "easter2016", | |
| "title": "Donate", | |
| "abstract": "We are a volunteer-run not-for-profit organisation based in St Kilda, Melbourne. <mark class=\"text-blue\">We rehome new and pre-loved baby goods and nursery equipment to families in need.<\/mark> We believe that by reusing and recycling much-loved babies\u2019 and children\u2019s gear, we not only share the joy of motherhood with each other, but we save the earth\u2019s precious resources too.", | |
| "frequency": { | |
| "onceOff": true, | |
| "monthly": true, | |
| "biMonthly": false, | |
| "quarterly": true, | |
| "halfYearly": true, | |
| "yearly": true, | |
| "default": "monthly" | |
| }, | |
| "tileDefault": "tileTravel", | |
| "tiles": [ | |
| { | |
| "key": "tileTravel", | |
| "title": "Ensure a child travels safely", | |
| "abstract": "Your donation will help towards car restraints that will keep babies and children safe on the roads", | |
| "image": "images/image-06-2x.png", | |
| "amount": 25 | |
| }, | |
| { | |
| "key": "tileSleep", | |
| "title": "Give a baby the gift of safe sleep", | |
| "abstract": "With your donation, we can provide families with safe, clean cots, mattresses and mattress protectors so their children can sleep safely at night.", | |
| "image": "images/image-06-2x.png", | |
| "amount": 40 | |
| }, | |
| { | |
| "key": "tileMobile", | |
| "title": "Keep disadvantaged families mobile", | |
| "abstract": "Caring for twins or triplets can be especially challenging for vulnerable families. Your donation will help us purchase double, triple or quad prams so that these families can stay connected with the world.", | |
| "image": "images/image-06-2x.png", | |
| "amount": 80 | |
| }, | |
| { | |
| "key": "tileChoice", | |
| "title": "A gift of your choice", | |
| "abstract": "Whatever you can give on a monthly basis will safeguard the future of St Kilda Mums, meaning we can continue to help families and keep children safe.", | |
| "image": "images/image-06-2x.png", | |
| "amount": 0, | |
| "writeIn": true | |
| } | |
| ], | |
| "fields": { | |
| "firstName": true, | |
| "firstNameIsRequired": true, | |
| "lastName": true, | |
| "lastNameIsRequired": true, | |
| "businessName": true, | |
| "businessNameIsRequired": false, | |
| "streetAddress": true, | |
| "streetAddressIsRequired": true, | |
| "streetCity": true, | |
| "streetCityIsRequired": true, | |
| "streetState": true, | |
| "streetStateIsRequired": false, | |
| "streetCountry": true, | |
| "streetCountryIsRequired": true, | |
| "streetCountryDefault": "Australia", | |
| "streetPostalCode": true, | |
| "streetPostalCodeIsRequired": true, | |
| "telephone1": true, | |
| "telephone1IsRequired": true, | |
| "telephone2": false, | |
| "telephone2IsRequired": false, | |
| "email": true, | |
| "emailIsRequired": true | |
| }, | |
| "custom": [ | |
| "newsletter" | |
| ], | |
| "processorDefault": "creditcard", | |
| "processors": [ | |
| { | |
| "key": "12345", | |
| "type": "creditcard" | |
| }, | |
| { | |
| "key": "67890", | |
| "type": "paypal" | |
| }, | |
| { | |
| "key": "64722", | |
| "type": "cheque", | |
| "reference": "QYETXKS", | |
| "address": "51 Downshire Road, Elsternwick, VIC, 3085" | |
| } | |
| ] | |
| } | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>StKildaMums</title> | |
| <link media="all" rel="stylesheet" href="css/style.css"> | |
| <link rel="stylesheet" type="text/css" href="css/fonts.css" /> | |
| <link href='https://fonts.googleapis.com/css?family=Roboto:300' rel='stylesheet' type='text/css'> | |
| <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js" defer></script> | |
| <script type="text/javascript">window.jQuery || document.write('<script src="js/jquery-1.11.2.min.js"><\/script>')</script> | |
| <script type="text/javascript" src="js/jquery.main.js" defer></script> | |
| <style> | |
| .input-error input, .input-error select { | |
| background-color: rgba(255, 0, 0, 0.1); | |
| } | |
| .row.input-error .hidden-tip, .col.input-error .hidden-tip, .donate-box.input-error .hidden-tip { | |
| display: none; | |
| } | |
| .panel { | |
| min-height: 425px; | |
| } | |
| .paypal-box { | |
| padding-top: 90px; | |
| text-align: center; | |
| } | |
| .paypal-box button { | |
| margin-right: 0 !important; | |
| } | |
| </style> | |
| <script type="text/javascript"> | |
| $(function(){ | |
| var campaignState = JSON.parse(decodeURI('{{toJSON campaign}}')); | |
| var determineFrequencyDescription = function(key) { | |
| var msg = ''; | |
| switch (key) { | |
| case 'onceOff': | |
| msg = 'I would like to make a one off donation'; | |
| break; | |
| case 'monthly': | |
| msg = 'I would like to make a regular monthly donation'; | |
| break; | |
| case 'biMonthly': | |
| msg = 'I would like to make a regular donation every two months'; | |
| break; | |
| case 'quarterly': | |
| msg = 'I would like to make a regular donation every three months'; | |
| break; | |
| case 'halfYearly': | |
| msg = 'I would like to make a regular donation twice a year'; | |
| break; | |
| case 'yearly': | |
| msg = 'I would like to make a regular donation once a year'; | |
| break; | |
| } | |
| $('#frequencyDescription').text(msg); | |
| }; | |
| determineFrequencyDescription(campaignState.frequency.default); | |
| // -------------------- | |
| $('a.btn-frequency').click(function(){ | |
| $('a.btn-frequency').addClass('border'); | |
| $(this).removeClass('border'); | |
| determineFrequencyDescription($(this).data('key')); | |
| return false; | |
| }); | |
| var showBusinessNameInput = function() { | |
| var $isBusiness = $('#isBusiness'); | |
| var $businessNameRow = $('.businessNameRow'); | |
| if ($isBusiness.length === 1 && $businessNameRow.length === 1) { | |
| if ($isBusiness.is(':checked') === true) { | |
| $businessNameRow.show(); | |
| $businessNameRow.children(":first").addClass('validate-form'); | |
| $("label[for='businessName']").addClass('required'); | |
| $("#businessName").data('required', true); | |
| } else { | |
| $businessNameRow.hide(); | |
| $businessNameRow.children(":first").removeClass('validate-form'); | |
| $("label[for='businessName']").removeClass('required'); | |
| $("#businessName").data('required', false); | |
| } | |
| } | |
| }; | |
| $('#isBusiness').change(showBusinessNameInput); | |
| showBusinessNameInput(); | |
| // -------------------- | |
| var showPaymentPanel = function(type) { | |
| $('.panel').hide(); | |
| if (type) { | |
| $('#panel-' + type).show(); | |
| } | |
| }; | |
| showPaymentPanel(campaignState.processorDefault); | |
| $("input[type='radio'][name='payment']").change(function() { | |
| var selected = $("input[type='radio'][name='payment']:checked"); | |
| if (selected.length > 0) { | |
| var type = selected.val(); | |
| showPaymentPanel(type); | |
| } | |
| }); | |
| }); | |
| </script> | |
| </head> | |
| <body> | |
| <div id="wrapper" class="inner-page yellow-bg"> | |
| <header id="header"> | |
| <div class="container"> | |
| <div class="logo"> | |
| <a href="#"> | |
| <picture> | |
| <source srcset="images/logo.png, images/logo2x.png 2x" media="(max-width: 767px)"> | |
| <source srcset="images/logo.png, images/logo2x.png 2x" media="(max-width: 1024px)"> | |
| <source srcset="images/logo.png, images/logo2x.png 2x"> | |
| <img src="images/logo.png" alt="ST Kilda Mums"> | |
| </picture> | |
| </a> | |
| </div> | |
| <nav id="nav"> | |
| <a href="#" class="menu-opener"><span></span></a> | |
| <div class="frame"> | |
| <div class="popup-holder"> | |
| <a href="#" class="search-opener icon-search"></a> | |
| <div class="search-popup "> | |
| <a href="#" class="search-opener inner icon-cross"></a> | |
| <form action="#" class="search-field"> | |
| <fieldset> | |
| <div class="row"> | |
| <input type="search" placeholder="Search stkildamums.org"> | |
| <button type="submit"><i class="icon-chevron"></i></button> | |
| </div> | |
| </fieldset> | |
| </form> | |
| </div> | |
| </div> | |
| <ul class="main-nav"> | |
| <li><a href="#"><i class="icon-home"></i></a></li> | |
| <li> | |
| <a href="#" class="has-drop">How to support us<i class="icon-chevron"></i></a> | |
| <ul class="dropdown"> | |
| <li> | |
| <a href="#">Donate funds</a> | |
| <ul class="inner-drop"> | |
| <li><a href="#">Make a donation</a></li> | |
| <li><a href="#">Make a monthly donation</a></li> | |
| <li><a href="#">Workplace donations</a></li> | |
| <li><a href="#">Leave a gift in your Will</a></li> | |
| </ul> | |
| </li> | |
| <li> | |
| <a href="#">Donate items</a> | |
| <ul class="inner-drop"> | |
| <li><a href="#">Donate pre-loved items</a></li> | |
| <li><a href="#">Donate new items</a></li> | |
| <li><a href="#">Can your item be rehomed?</a></li> | |
| </ul> | |
| </li> | |
| <li> | |
| <a href="#">Volunteer</a> | |
| <ul class="inner-drop"> | |
| <li><a href="#">Volunteer with us</a></li> | |
| <li><a href="#">Corporate volunteering</a></li> | |
| </ul> | |
| <a href="#" class="visible-desktop add-link">Buy SKM gifts</a> | |
| </li> | |
| <li class="hidden-desktop"><a href="#">Buy SKM gifts</a></li> | |
| <li class="visible-desktop links-list"> | |
| <a href="#">Host a fundraiser <i class="icon-chevron"></i></a> | |
| <a href="#">Corporate partners <i class="icon-chevron"></i></a> | |
| <a href="#">Other menu here <i class="icon-chevron"></i></a> | |
| </li> | |
| </ul> | |
| </li> | |
| <li> | |
| <a href="#">Why support us?<i class="icon-chevron"></i></a> | |
| </li> | |
| <li> | |
| <a href="#">Connect<i class="icon-chevron"></i></a> | |
| </li> | |
| <li> | |
| <a href="#">News</a> | |
| </li> | |
| </ul> | |
| <div class="inline-block popup-holder align-right"> | |
| <a href="#" class="sign-up-opener opener align-right">Sign up</a> | |
| <div class="sign-up-block main-border-radius popup"> | |
| <form action="#" class="sign-up"> | |
| <fieldset> | |
| <div class="row"> | |
| <div class="col"> | |
| <input type="text" placeholder="First name"> | |
| </div> | |
| <div class="col"> | |
| <button type="submit" class="btn btn-blue">Sign up</button> | |
| </div> | |
| </div> | |
| <input type="text" placeholder="Surname"> | |
| <input type="email" placeholder="Enter your email"> | |
| <div class="text"> | |
| <mark class="text-blue">We promise to only send you good things!</mark> | |
| <p>We send on average one email each month, letting you know how your donations have made a difference, what help we need, and what special events we have coming up. </p> | |
| <a href="#">View our privacy policy</a> | |
| </div> | |
| </fieldset> | |
| </form> | |
| </div> | |
| </div> | |
| <a href="#" class="mobile-link">Contact us</a> | |
| </div> | |
| </nav> | |
| </div> | |
| </header> | |
| <main id="main"> | |
| <div class="form-area"> | |
| <div class="container"> | |
| <h1 class="text-blue text-center">{{campaign.title}}</h1> | |
| <div class="text-box"> | |
| <p>{{{campaign.abstract}}}</p> | |
| </div> | |
| <form action="#" class="submit-form"> | |
| <div class="row-wrapp"> | |
| <strong class="form-title">1. I want to give</strong> | |
| <div class="white-area main-border-radius"> | |
| <div class="row"> | |
| <div class="col full-width text-center"> | |
| <div class="btn-holder"> | |
| {{#if campaign.frequency.monthly}} | |
| {{#ifCond campaign.frequency.default 'monthly'}} | |
| <a href="#" data-key="monthly" class="btn btn-frequency btn-blue">Monthly</a> | |
| {{else}} | |
| <a href="#" data-key="monthly" class="btn btn-frequency btn-blue border">Monthly</a> | |
| {{/ifCond}} | |
| {{/if}} | |
| {{#if campaign.frequency.biMonthly}} | |
| {{#ifCond campaign.frequency.default 'biMonthly'}} | |
| <a href="#" data-key="biMonthly" class="btn btn-frequency btn-blue">Bi-Monthly</a> | |
| {{else}} | |
| <a href="#" data-key="biMonthly" class="btn btn-frequency btn-blue border">Bi-Monthly</a> | |
| {{/ifCond}} | |
| {{/if}} | |
| {{#if campaign.frequency.quarterly}} | |
| {{#ifCond campaign.frequency.default 'quarterly'}} | |
| <a href="#" data-key="quarterly" class="btn btn-frequency btn-blue">Quarterly</a> | |
| {{else}} | |
| <a href="#" data-key="quarterly" class="btn btn-frequency btn-blue border">Quarterly</a> | |
| {{/ifCond}} | |
| {{/if}} | |
| {{#if campaign.frequency.halfYearly}} | |
| {{#ifCond campaign.frequency.default 'halfYearly'}} | |
| <a href="#" data-key="halfYearly" class="btn btn-frequency btn-blue">Six Monthly</a> | |
| {{else}} | |
| <a href="#" data-key="halfYearly" class="btn btn-frequency btn-blue border">Six Monthly</a> | |
| {{/ifCond}} | |
| {{/if}} | |
| {{#if campaign.frequency.yearly}} | |
| {{#ifCond campaign.frequency.default 'yearly'}} | |
| <a href="#" data-key="yearly" class="btn btn-frequency btn-blue">Annually</a> | |
| {{else}} | |
| <a href="#" data-key="yearly" class="btn btn-frequency btn-blue border">Annually</a> | |
| {{/ifCond}} | |
| {{/if}} | |
| {{#if campaign.frequency.onceOff}} | |
| {{#ifCond campaign.frequency.default 'onceOff'}} | |
| <a href="#" data-key="onceOff" class="btn btn-frequency btn-blue">Just once</a> | |
| {{else}} | |
| <a href="#" data-key="onceOff" class="btn btn-frequency btn-blue border">Just once</a> | |
| {{/ifCond}} | |
| {{/if}} | |
| </div> | |
| <p id="frequencyDescription"> </p> | |
| </div> | |
| </div> | |
| {{#bunch campaign.tiles 2}} | |
| {{#each this}} | |
| <div class="row"> | |
| {{#each this}} | |
| <div class="col"> | |
| <div class="inner-box main-border-radius"> | |
| <div class="img-box"> | |
| <picture> | |
| <img src="{{this.image}}" alt="{{this.title}}" /> | |
| </picture> | |
| <div class="mask"> | |
| <strong class="title">{{this.title}}</strong> | |
| </div> | |
| </div> | |
| <div class="text-frame"> | |
| <p>{{this.abstract}}</p> | |
| <div class="flex-item"> | |
| {{#if this.writeIn}} | |
| <div class="donate-box pink-bg text-btn validate-form"> | |
| <label for="check-{{this.key}}"> | |
| {{#ifCond @root.campaign.tileDefault this.key}} | |
| <input id="check-{{this.key}}" name="donate" type="radio" data-required="true" checked="checked"> | |
| {{else}} | |
| <input id="check-{{this.key}}" name="donate" type="radio" data-required="true"> | |
| {{/ifCond}} | |
| <span class="fake-input"></span> | |
| </label> | |
| <span class="text">You choose</span> | |
| </div> | |
| <div class="count-input"> | |
| <span class="labeltext">$</span> | |
| <input type="text" placeholder="{{this.amount}}.00"> | |
| </div> | |
| {{else}} | |
| <div class="donate-box pink-bg validate-form"> | |
| <label for="check-{{this.key}}"> | |
| {{#ifCond @root.campaign.tileDefault this.key}} | |
| <input id="check-{{this.key}}" name="donate" type="radio" data-required="true" checked="checked"> | |
| {{else}} | |
| <input id="check-{{this.key}}" name="donate" type="radio" data-required="true"> | |
| {{/ifCond}} | |
| <span class="fake-input"></span> | |
| </label> | |
| <span class="text">${{this.amount}}</span> | |
| <span class="hidden-tip">Please, fill the field</span> | |
| </div> | |
| {{/if}} | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| {{/each}} | |
| </div> | |
| {{/each}} | |
| {{/bunch}} | |
| </div> | |
| <strong class="form-title">2. Your details</strong> | |
| <div class="white-area main-border-radius"> | |
| {{#if campaign.fields.firstName}} | |
| <div class="row"> | |
| {{#if campaign.fields.firstNameIsRequired}} | |
| <div class="col full-width text-left validate-form"> | |
| <label for="firstName" class="label required">First name</label> | |
| <input id="firstName" type="text" placeholder="Your first name" data-required="true"> | |
| <span class="hidden-tip">Please, fill the field</span> | |
| </div> | |
| {{else}} | |
| <div class="col full-width text-left"> | |
| <label for="firstName" class="label">First name</label> | |
| <input id="firstName" type="text" placeholder="Your first name" data-required="false"> | |
| </div> | |
| {{/if}} | |
| </div> | |
| {{/if}} | |
| {{#if campaign.fields.lastName}} | |
| <div class="row"> | |
| {{#if campaign.fields.lastNameIsRequired}} | |
| <div class="col full-width text-left validate-form"> | |
| <label for="lastName" class="label required">Last name</label> | |
| <input id="lastName" type="text" placeholder="Your last name" data-required="true"> | |
| <span class="hidden-tip">Please, fill the field</span> | |
| </div> | |
| {{else}} | |
| <div class="col full-width text-left"> | |
| <label for="lastName" class="label">Last name</label> | |
| <input id="lastName" type="text" placeholder="Your last name" data-required="false"> | |
| <span class="hidden-tip">Please, fill the field</span> | |
| </div> | |
| {{/if}} | |
| </div> | |
| {{/if}} | |
| {{#if campaign.fields.businessName}} | |
| {{#if campaign.fields.businessNameIsRequired}} | |
| <div class="row"> | |
| <div class="col full-width text-left validate-form"> | |
| <label for="businessName" class="label required">Business Name</label> | |
| <input id="businessName" type="text" placeholder="Your business name" data-required="true"> | |
| <span class="hidden-tip">Please, fill the field</span> | |
| </div> | |
| </div> | |
| {{else}} | |
| <div class="row"> | |
| <div class="col full-width text-left validate-form"> | |
| <label for="isBusiness" class="label inline">Is this donation on behalf of a business? </label> | |
| <label for="isBusiness"> | |
| <input id="isBusiness" name="donate" type="checkbox" data-required="false"> | |
| <span class="fake-checkbox"></span> | |
| <span class="fake-label">Yes</span> | |
| </label> | |
| <span class="hidden-tip">Please, fill the field</span> | |
| </div> | |
| </div> | |
| <div class="row businessNameRow"> | |
| <div class="col full-width text-left"> | |
| <label for="businessName" class="label">Business Name</label> | |
| <input id="businessName" type="text" placeholder="Your business name" data-required="true"> | |
| <span class="hidden-tip">Please, fill the field</span> | |
| </div> | |
| </div> | |
| {{/if}} | |
| {{/if}} | |
| {{#if campaign.fields.streetAddress}} | |
| {{#if campaign.fields.streetAddressIsRequired}} | |
| <div class="row"> | |
| <div class="col full-width text-left validate-form"> | |
| <label for="streetAddress" class="label required">Street Address</label> | |
| <input id="streetAddress" type="text" placeholder="Your street address" data-required="true"> | |
| <input type="text"> | |
| <span class="hidden-tip">Please, fill the field</span> | |
| </div> | |
| </div> | |
| {{else}} | |
| <div class="row"> | |
| <div class="col full-width text-left"> | |
| <label for="streetAddress" class="label">Street Address</label> | |
| <input id="streetAddress" type="text" placeholder="Your street address" data-required="false"> | |
| <input type="text"> | |
| <span class="hidden-tip">Please, fill the field</span> | |
| </div> | |
| </div> | |
| {{/if}} | |
| {{/if}} | |
| <div class="row"> | |
| {{#if campaign.fields.streetCity}} | |
| {{#if campaign.fields.streetCityIsRequired}} | |
| {{#if campaign.fields.streetState}} | |
| <div class="col text-left validate-form"> | |
| <label for="streetCity" class="label required">Suburb / City</label> | |
| <input id="streetCity" type="text" placeholder="Suburb/ City" data-required="true"> | |
| <span class="hidden-tip">Please, fill the field</span> | |
| </div> | |
| {{else}} | |
| <div class="col full-width text-left validate-form"> | |
| <label for="streetCity" class="label required">Suburb / City</label> | |
| <input id="streetCity" type="text" placeholder="Suburb/ City" data-required="true"> | |
| <span class="hidden-tip">Please, fill the field</span> | |
| </div> | |
| {{/if}} | |
| {{else}} | |
| {{#if campaign.fields.streetState}} | |
| <div class="col text-left"> | |
| <label for="streetCity" class="label">Suburb / City</label> | |
| <input id="streetCity" type="text" placeholder="Suburb/ City" data-required="false"> | |
| <span class="hidden-tip">Please, fill the field</span> | |
| </div> | |
| {{else}} | |
| <div class="col full-width text-left"> | |
| <label for="streetCity" class="label">Suburb / City</label> | |
| <input id="streetCity" type="text" placeholder="Suburb/ City" data-required="false"> | |
| <span class="hidden-tip">Please, fill the field</span> | |
| </div> | |
| {{/if}} | |
| {{/if}} | |
| {{/if}} | |
| {{#if campaign.fields.streetState}} | |
| {{#if campaign.fields.streetStateIsRequired}} | |
| {{#if campaign.fields.streetCity}} | |
| <div class="col text-left validate-form"> | |
| <label for="streetState" class="label required">State</label> | |
| <div class="fake-select full-width"> | |
| <select name="streetState" id="streetState" data-required="true"> | |
| <option value="1">Select a State</option> | |
| <option value="2">Select a State</option> | |
| <option value="3">Select a State</option> | |
| </select> | |
| </div> | |
| <span class="hidden-tip">Please, fill the field</span> | |
| </div> | |
| {{else}} | |
| <div class="col text-left full-width validate-form"> | |
| <label for="streetState" class="label required">State</label> | |
| <div class="fake-select full-width"> | |
| <select name="streetState" id="streetState" data-required="true"> | |
| <option value="1">Select a State</option> | |
| <option value="2">Select a State</option> | |
| <option value="3">Select a State</option> | |
| </select> | |
| </div> | |
| <span class="hidden-tip">Please, fill the field</span> | |
| </div> | |
| {{/if}} | |
| {{else}} | |
| {{#if campaign.fields.streetCity}} | |
| <div class="col text-left"> | |
| <label for="streetState" class="label">State</label> | |
| <div class="fake-select full-width"> | |
| <select name="streetState" id="streetState" data-required="false"> | |
| <option value="1">Select a State</option> | |
| <option value="2">Select a State</option> | |
| <option value="3">Select a State</option> | |
| </select> | |
| </div> | |
| <span class="hidden-tip">Please, fill the field</span> | |
| </div> | |
| {{else}} | |
| <div class="col text-left full-width"> | |
| <label for="streetState" class="label">State</label> | |
| <div class="fake-select full-width"> | |
| <select name="streetState" id="streetState" data-required="false"> | |
| <option value="1">Select a State</option> | |
| <option value="2">Select a State</option> | |
| <option value="3">Select a State</option> | |
| </select> | |
| </div> | |
| <span class="hidden-tip">Please, fill the field</span> | |
| </div> | |
| {{/if}} | |
| {{/if}} | |
| {{/if}} | |
| </div> | |
| <div class="row"> | |
| {{#if campaign.fields.streetCountry}} | |
| {{#if campaign.fields.streetCountryIsRequired}} | |
| {{#if campaign.fields.streetPostalCode}} | |
| <div class="col text-left validate-form"> | |
| <label for="streetCountry" class="label required">Country</label> | |
| <div class="fake-select full-width"> | |
| <select name="streetCountry" id="streetCountry" data-required="true"> | |
| <option value="1">Select a Country</option> | |
| <option value="2">Select a Country</option> | |
| <option value="3">Select a Country</option> | |
| </select> | |
| </div> | |
| <span class="hidden-tip">Please, fill the field</span> | |
| </div> | |
| {{else}} | |
| <div class="col text-left full-width validate-form"> | |
| <label for="streetCountry" class="label required">Country</label> | |
| <div class="fake-select full-width"> | |
| <select name="streetCountry" id="streetCountry" data-required="true"> | |
| <option value="1">Select a Country</option> | |
| <option value="2">Select a Country</option> | |
| <option value="3">Select a Country</option> | |
| </select> | |
| </div> | |
| <span class="hidden-tip">Please, fill the field</span> | |
| </div> | |
| {{/if}} | |
| {{else}} | |
| {{#if campaign.fields.streetPostalCode}} | |
| <div class="col text-left"> | |
| <label for="streetCountry" class="label">Country</label> | |
| <div class="fake-select full-width"> | |
| <select name="streetCountry" id="streetCountry" data-required="false"> | |
| <option value="1">Select a Country</option> | |
| <option value="2">Select a Country</option> | |
| <option value="3">Select a Country</option> | |
| </select> | |
| </div> | |
| <span class="hidden-tip">Please, fill the field</span> | |
| </div> | |
| {{else}} | |
| <div class="col text-left full-width"> | |
| <label for="streetCountry" class="label">Country</label> | |
| <div class="fake-select full-width"> | |
| <select name="streetCountry" id="streetCountry" data-required="false"> | |
| <option value="1">Select a Country</option> | |
| <option value="2">Select a Country</option> | |
| <option value="3">Select a Country</option> | |
| </select> | |
| </div> | |
| <span class="hidden-tip">Please, fill the field</span> | |
| </div> | |
| {{/if}} | |
| {{/if}} | |
| {{/if}} | |
| {{#if campaign.fields.streetPostalCode}} | |
| {{#if campaign.fields.streetPostalCodeIsRequired}} | |
| {{#if campaign.fields.streetCountry}} | |
| <div class="col text-left validate-form"> | |
| <label for="postcode" class="label required">Postcode</label> | |
| <input id="postcode" type="text" placeholder="Postcode" data-required="true"> | |
| <span class="hidden-tip">Please, fill the field</span> | |
| </div> | |
| {{else}} | |
| <div class="col text-left full-width validate-form"> | |
| <label for="postcode" class="label required">Postcode</label> | |
| <input id="postcode" type="text" placeholder="Postcode" data-required="true"> | |
| <span class="hidden-tip">Please, fill the field</span> | |
| </div> | |
| {{/if}} | |
| {{else}} | |
| {{#if campaign.fields.streetCountry}} | |
| <div class="col text-left"> | |
| <label for="postcode" class="label">Postcode</label> | |
| <input id="postcode" type="text" placeholder="Postcode" data-required="false"> | |
| <span class="hidden-tip">Please, fill the field</span> | |
| </div> | |
| {{else}} | |
| <div class="col text-left full-width"> | |
| <label for="postcode" class="label">Postcode</label> | |
| <input id="postcode" type="text" placeholder="Postcode" data-required="false"> | |
| <span class="hidden-tip">Please, fill the field</span> | |
| </div> | |
| {{/if}} | |
| {{/if}} | |
| {{/if}} | |
| </div> | |
| {{#if campaign.fields.telephone1}} | |
| {{#if campaign.fields.telephone1IsRequired}} | |
| <div class="row"> | |
| <div class="col full-width text-left validate-form"> | |
| <label for="telephone1" class="label required">Telephone</label> | |
| <input id="telephone1" type="tel" placeholder="Your telephone" data-required="true"> | |
| <span class="hidden-tip">Please, fill the field</span> | |
| </div> | |
| </div> | |
| {{else}} | |
| <div class="row"> | |
| <div class="col full-width text-left"> | |
| <label for="telephone1" class="label">Telephone</label> | |
| <input id="telephone1" type="tel" placeholder="Your telephone" data-required="false"> | |
| <span class="hidden-tip">Please, fill the field</span> | |
| </div> | |
| </div> | |
| {{/if}} | |
| {{/if}} | |
| {{#if campaign.fields.email}} | |
| {{#if campaign.fields.emailIsRequired}} | |
| <div class="row"> | |
| <div class="col full-width text-left validate-form"> | |
| <label for="email" class="label required">Email address</label> | |
| <input id="email" type="email" placeholder="Your email address" data-required="true"> | |
| <span class="hidden-tip">Please, fill the field</span> | |
| </div> | |
| </div> | |
| {{else}} | |
| <div class="row"> | |
| <div class="col full-width text-left"> | |
| <label for="email" class="label">Email address</label> | |
| <input id="email" type="email" placeholder="Your email address" data-required="false"> | |
| <span class="hidden-tip">Please, fill the field</span> | |
| </div> | |
| </div> | |
| {{/if}} | |
| {{/if}} | |
| {{#if campaign.fields.email}} | |
| {{#if campaign.fields.emailIsRequired}} | |
| {{#customSetting 'newsletter'}} | |
| <div class="row"> | |
| <div class="col full-width text-left"> | |
| <label for="newsletter"> | |
| <input id="newsletter" name="donate" type="checkbox" data-required="false"> | |
| <span class="fake-checkbox"></span> | |
| </label> | |
| <label for="check-6" class="label inline small-font">Yes, please sign me up for the St Kilda Mums newsletter</label> | |
| <span class="hidden-tip">Please, fill the field</span> | |
| </div> | |
| </div> | |
| {{/customSetting}} | |
| {{/if}} | |
| {{/if}} | |
| <div class="row"> | |
| <div class="col full-width text-left"> | |
| <span class="mandatory">Mandatory fields</span> | |
| </div> | |
| </div> | |
| </div> | |
| <strong class="form-title">3. Payment</strong> | |
| <div class="white-area main-border-radius"> | |
| <div class="row validate-form"> | |
| <div class="col full-width text-left flex"> | |
| <div class="column-wrap"> | |
| <label for="check-7" class="label inline">Select a payment method</label> | |
| </div> | |
| <div class="column-wrap"> | |
| {{#each campaign.processors}} | |
| {{#ifCond this.type 'creditcard'}} | |
| <label for="payment-{{this.key}}"> | |
| {{#ifCond @root.campaign.processorDefault 'creditcard'}} | |
| <input id="payment-{{this.key}}" name="payment" value="{{this.type}}" type="radio" data-required="true" checked="checked"> | |
| {{else}} | |
| <input id="payment-{{this.key}}" name="payment" value="{{this.type}}" type="radio" data-required="true"> | |
| {{/ifCond}} | |
| <span class="fake-input"> | |
| <img src="images/payment1.png" srcset="images/payment1-2x.png 2x" alt="Visa, Mastercard, American express"> | |
| </span> | |
| </label> | |
| {{/ifCond}} | |
| {{#ifCond this.type 'directdebit'}} | |
| <label for="payment-{{this.key}}"> | |
| {{#ifCond @root.campaign.processorDefault 'directdebit'}} | |
| <input id="payment-{{this.key}}" name="payment" value="{{this.type}}" type="radio" data-required="true" checked="checked"> | |
| {{else}} | |
| <input id="payment-{{this.key}}" name="payment" value="{{this.type}}" type="radio" data-required="true"> | |
| {{/ifCond}} | |
| <span class="fake-input"> | |
| <img src="images/payment2.png" srcset="images/payment2-2x.png 2x" alt="Direct Debit"> | |
| </span> | |
| </label> | |
| {{/ifCond}} | |
| {{#ifCond this.type 'paypal'}} | |
| <label for="payment-{{this.key}}"> | |
| {{#ifCond @root.campaign.processorDefault 'paypal'}} | |
| <input id="payment-{{this.key}}" name="payment" value="{{this.type}}" type="radio" data-required="true" checked="checked"> | |
| {{else}} | |
| <input id="payment-{{this.key}}" name="payment" value="{{this.type}}" type="radio" data-required="true"> | |
| {{/ifCond}} | |
| <span class="fake-input"> | |
| <img src="images/payment3.png" srcset="images/payment3-2x.png 2x" alt="PayPal"> | |
| </span> | |
| </label> | |
| {{/ifCond}} | |
| {{#ifCond this.type 'poli'}} | |
| <label for="payment-{{this.key}}"> | |
| {{#ifCond @root.campaign.processorDefault 'poli'}} | |
| <input id="payment-{{this.key}}" name="payment" value="{{this.type}}" type="radio" data-required="true" checked="checked"> | |
| {{else}} | |
| <input id="payment-{{this.key}}" name="payment" value="{{this.type}}" type="radio" data-required="true"> | |
| {{/ifCond}} | |
| <span class="fake-input"> | |
| <img src="images/payment4.png" srcset="images/payment4-2x.png 2x" alt="POLI"> | |
| </span> | |
| </label> | |
| {{/ifCond}} | |
| {{#ifCond this.type 'cheque'}} | |
| <label for="payment-{{this.key}}"> | |
| {{#ifCond @root.campaign.processorDefault 'cheque'}} | |
| <input id="payment-{{this.key}}" name="payment" value="{{this.type}}" type="radio" data-required="true" checked="checked"> | |
| {{else}} | |
| <input id="payment-{{this.key}}" name="payment" value="{{this.type}}" type="radio" data-required="true"> | |
| {{/ifCond}} | |
| <span class="fake-input"> | |
| <img src="images/payment-cheque.png" srcset="images/payment-cheque.png 2x" alt="Cheque / Money Order"> | |
| </span> | |
| </label> | |
| {{/ifCond}} | |
| {{/each}} | |
| </div> | |
| </div> | |
| </div> | |
| {{#hasProcessor 'creditcard'}} | |
| <div id="panel-creditcard" class="panel"> | |
| <div class="row"> | |
| <div class="col full-width text-left validate-form validate"> | |
| <strong class="details text-blue">Credit / Debit Card details</strong> | |
| <label for="creditcard-cardNumber" class="label">Card number:</label> | |
| <input id="creditcard-cardNumber" type="text" placeholder="Your card number" data-required="true"> | |
| </div> | |
| </div> | |
| <div class="row"> | |
| <div class="col full-width text-left"> | |
| <label for="creditcard-cardDate" class="label inline">Card expiry</label> | |
| <div class="tip-holder"> | |
| <a class="popup-opener"></a> | |
| <div class="popup"> | |
| <div class="holder"> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate deserunt suscipit hic fugiat ab tempore praesentium aperiam vitae, velit quos dignissimos eveniet, accusantium inventore modi?</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="col full-width text-left validate-form validate"> | |
| <div class="fake-select"> | |
| <select name="creditcard-cardDate" id="creditcard-cardDay" class="small-width" data-required="true"> | |
| <option value="1">12</option> | |
| <option value="2">12</option> | |
| <option value="3">12</option> | |
| </select> | |
| </div> | |
| <span class="dash">/</span> | |
| <div class="fake-select"> | |
| <select name="creditcard-cardDate" id="creditcard-cardMonth" class="small-width" data-required="true"> | |
| <option value="1">15</option> | |
| <option value="2">15</option> | |
| <option value="3">S15</option> | |
| </select> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="row"> | |
| <div class="col full-width text-left"> | |
| <label for="creditcard-ccv" class="label inline">CCV</label> | |
| <div class="tip-holder"> | |
| <a class="popup-opener"></a> | |
| <div class="popup"> | |
| <div class="holder"> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate deserunt suscipit hic fugiat ab tempore praesentium aperiam vitae, velit quos dignissimos eveniet, accusantium inventore modi?</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="col full-width text-left validate-form validate"> | |
| <input name="creditcard-ccv" id="creditcard-ccv" type="text" placeholder="The last three digits on the back of your card" data-required="true"> | |
| </div> | |
| </div> | |
| <div class="row"> | |
| <div class="col full-width text-left"> | |
| <button class="btn btn-blue btn-donate" type='submit'>Donate</button> | |
| <img class="align-middle" src="images/icon01.png" alt="Comodo Secure"> | |
| </div> | |
| </div> | |
| </div> | |
| {{/hasProcessor}} | |
| {{#hasProcessor 'paypal'}} | |
| <div id="panel-paypal" class="panel"> | |
| <div class="row"> | |
| <div class="col full-width text-left validate-form validate"> | |
| <strong class="details text-blue">PayPal details</strong> | |
| <div class="paypal-box"> | |
| <button class="btn btn-blue btn-donate" type='submit'>Donate via PayPal</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| {{/hasProcessor}} | |
| {{#hasProcessor 'cheque'}} | |
| <div id="panel-cheque" class="panel"> | |
| <div class="row"> | |
| <div class="col full-width text-left validate-form validate"> | |
| <strong class="details text-blue">Cheque / Money Order details</strong> | |
| <p> | |
| When making a donation via cheque or money order, please include the below reference code:</br/> | |
| <strong>'{{this.reference}}'</strong>. | |
| </p> | |
| <p> | |
| Please send your cheque or money order to:<br /> | |
| <mark class="text-blue">{{this.address}}</mark> | |
| </p> | |
| <br /> | |
| <button class="btn btn-blue btn-donate" type='submit'>Pledge</button> | |
| </div> | |
| </div> | |
| </div> | |
| {{/hasProcessor}} | |
| </div> | |
| </div> | |
| </form> | |
| </div> | |
| </div> | |
| </main> | |
| <footer id="footer" class="blue-bg"> | |
| <div class="container"> | |
| <ul class="social-networks"> | |
| <li> | |
| <a href="#" class="icon-facebook"></a> | |
| </li> | |
| <li> | |
| <a href="#" class="icon-twitter"></a> | |
| </li> | |
| <li> | |
| <a href="#" class="icon-linkedin"></a> | |
| </li> | |
| <li> | |
| <a href="#" class="icon-youtube"></a> | |
| </li> | |
| <li> | |
| <a href="#" class="icon-pinterest-p"></a> | |
| </li> | |
| <li> | |
| <a href="#" class="icon-flickr"></a> | |
| </li> | |
| <li> | |
| <a href="#" class="icon-instagram"></a> | |
| </li> | |
| </ul> | |
| <div class="col-holder"> | |
| <div class="col"> | |
| <h3><a href="#">Heading one</a></h3> | |
| <h3><a href="#">Heading two</a></h3> | |
| <h3><a href="#">Heading three</a></h3> | |
| <h3><a href="#">Heading four</a></h3> | |
| <h3><a href="#">Heading five</a></h3> | |
| <h3><a href="#">Heading six</a></h3> | |
| </div> | |
| <div class="col"> | |
| <div class="logo"> | |
| <a href="#"> | |
| <picture> | |
| <source srcset="images/logo.png, images/logo2x.png 2x" media="(max-width: 767px)"> | |
| <source srcset="images/logo.png, images/logo2x.png 2x" media="(max-width: 1024px)"> | |
| <source srcset="images/logo.png, images/logo2x.png 2x"> | |
| <img src="images/logo.png" alt="ST Kilda Mums"> | |
| </picture> | |
| </a> | |
| </div> | |
| <address> | |
| <p>00 Street Number</p> | |
| <p>Suburb State Postcode</p> | |
| <a href="mailto:info@stkildamums.org" class="email">info@stkildamums.org</a> | |
| <a href="tel:+0000000000" class="tel">0000 000 000</a> | |
| </address> | |
| <span class="copyright">© 2015 St Kilda Mums. All rights reserved. </span> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| </div> | |
| </body> | |
| </html> | |
| <script type="text/x-handlebars" id="frequency-template"> | |
| <img class="lightbox-image" src="{{large}}"> | |
| <div class="lightbox-meta"> | |
| <a class="pure-button lightbox-link" href="{{url}}">View on Flickr</a> | |
| <button class="pure-button lightbox-link lightbox-hide">Hide</button> | |
| </div> | |
| </script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment