├── max-number-of-characters-in-target-block.html
├── other-donation-do-not-allow-currency-or-spaces.html
├── email-address-do-not-allow-spaces.html
├── pre-tick-and-hide-opt-in.html
├── field-masks.html
├── direct-debits-next-month-20th.html
├── validation-errors-group-into-one-place.html
├── locale-save.html
├── change-error-text-for-a-single-field.html
├── update-field-with-another-field's-value.html
├── tls-checker.html
├── disable-submit-until-target-message-keypress.html
├── placeholders.html
├── phone-mobile-number-hidden-email-address.html
├── opt-in-text-toggle.html
├── textarea-characters-remaining.html
├── currency-symbol-next-suggested-gift.js
├── ett-target-block-show-target-party.js
├── anonymous-random-email-address.html
├── display-recent-responses-to-questions.md
├── share-by-email-button.md
├── reference-and-target-data-in-a-text-block.md
├── progress-through-campaign-pages.md
├── direct-debits-next-two-possible-dates.html
├── account-number-sort-code-verify.md
├── whatsapp-legacy.html
├── searchable-selects.md
├── insert-today's-date.js
├── ETT-select-random-target-from-custom-database.md
├── direct-debits-next-two-possible-dates-v2.html
├── accessible-custom-checkboxes.css
├── floating-button-scroll.md
├── gift-aid-calculation.md
├── show-MP-name-on-data-capture.md
├── read-more-expand.md
├── Insert contact data on page 1.html
├── direct-debits-Stripe-start-date-population.html
├── shopping-list-money-buys.md
└── README.md


/max-number-of-characters-in-target-block.html:
--------------------------------------------------------------------------------
1 | <script>
2 |   // This will force the plain text target message to have 100 as its maximum number of allowed characters
3 |   $(".en__contactMessage__plainText").attr("maxlength",100);
4 | </script>
5 | 


--------------------------------------------------------------------------------
/other-donation-do-not-allow-currency-or-spaces.html:
--------------------------------------------------------------------------------
 1 | // requires jQuery
 2 | $(function() {
 3 |     $("input[name='transaction.donationAmt.other']").bind({
 4 |         keydown: function(e) {
 5 |             // prevent £, $ and space from being typed
 6 |             if (e.keyCode==51||e.keyCode==52||e.keyCode==32) {
 7 |                return false;
 8 |             }
 9 |             return true;
10 |         }
11 |     });
12 | });
13 | 


--------------------------------------------------------------------------------
/email-address-do-not-allow-spaces.html:
--------------------------------------------------------------------------------
 1 | <script>
 2 |   // This code makes it impossible to type or paste spaces into the email address field
 3 |   $( document ).ready(function() {
 4 | 
 5 |     $(function(){
 6 |       $('#en__field_supporter_emailAddress').bind('input', function(){
 7 |         $(this).val(function(_, v){
 8 |          return v.replace(/\s+/g, '');
 9 |         });
10 |       });
11 |     });
12 | 
13 | 
14 |   });
15 | </script>
16 | 


--------------------------------------------------------------------------------
/pre-tick-and-hide-opt-in.html:
--------------------------------------------------------------------------------
 1 | <script> 
 2 |   $(document).ready(function() {
 3 |     // *** Your opt-in's name - change this to be the class of the top-most div for your opt-in. Include the leading fullstop! ***
 4 |     var optIn = ".en__field--opt-in"; 
 5 |     // Tick a checkbox opt-in, or choose a radio's Y option
 6 |     $(optIn + " input[value='Y']").prop('checked', 'true');
 7 |     // Hide the opt-in (optional)
 8 |     $(optIn).css("display", "none");
 9 |   }); 
10 | </script>
11 | 


--------------------------------------------------------------------------------
/field-masks.html:
--------------------------------------------------------------------------------
 1 | <script src='https://aaf1a18515da0e792f78-c27fdabe952dfc357fe25ebf5c8897ee.ssl.cf5.rackcdn.com/1757/jquery.mask.min.js?v=1517318179000'></script>
 2 | <script>
 3 |     // https://github.com/igorescobar/jQuery-Mask-Plugin
 4 |     $(document).ready(function(){
 5 |         $("#en__field_supporter_dateOfBirth").addClass("datemask");
 6 |         $("#en__field_supporter_phoneNumber").addClass("phonemask");
 7 |         $(".datemask").mask("9999-99-99");
 8 |         $(".phonemask").mask("999 999 9999");
 9 |     });
10 | </script>
11 | 


--------------------------------------------------------------------------------
/direct-debits-next-month-20th.html:
--------------------------------------------------------------------------------
 1 | <script>
 2 |   var today = new Date();
 3 | 
 4 |   var todayMonth = today.getMonth() + 1;
 5 |   var todayYear = today.getFullYear();
 6 |   var ddDay = "20";
 7 | 
 8 |   ddMonth = todayMonth + 1;
 9 |   ddMonth.toString();
10 |   ddYear = todayYear;
11 | 
12 |   if (ddMonth > 12) {
13 |     ddMonth = 1;
14 |     ddYear++;
15 |   }
16 |   if (ddMonth < 10) {
17 |     ddMonth = "0" + ddMonth + "";
18 |   }
19 | 
20 |   var ddDate = ddDay + "/" + ddMonth + "/" + ddYear;
21 |   
22 |   $("#en__field_supporter_NOT_TAGGED_7").val(ddDate);
23 | </script>
24 | 


--------------------------------------------------------------------------------
/validation-errors-group-into-one-place.html:
--------------------------------------------------------------------------------
 1 | <div class="errorBlock"></div>
 2 | <script>
 3 |     // Instead of validation errors appearing above inputs,    
 4 |     // this will group them all in the above errorBlock div
 5 |     $(".en__errorList, .en__errorHeader").appendTo(".errorBlock");
 6 |     $("body").on("DOMNodeInserted", ".en__field__error", function () {
 7 |         if ( !$(this).parent().hasClass("errorBlock") ) {  
 8 |             $(this).appendTo(".errorBlock");
 9 |         }
10 |     });
11 |      $("form.en__component--page").submit(function(e){
12 |         $(".errorBlock").empty();
13 |     });
14 | </script>
15 | 


--------------------------------------------------------------------------------
/locale-save.html:
--------------------------------------------------------------------------------
 1 | <!-- This code will save the locale into a question or form field called "Locale". -->
 2 | <!-- * The field should not be mandatory -->
 3 | <!-- * The field should be a text box (not hidden - the code will hide it instead) -->
 4 | <!-- * You need to have Expose transaction details enabled -->
 5 | <!-- * You will need jquery loaded in your template -->
 6 | <!-- This should be added as a code block on the same page as your locale field -->
 7 | 
 8 | <script>
 9 |     $( document ).ready(function() {
10 |         // Save the locale parameter to a question
11 |         $(".en__field--locale").hide();
12 |         $(".en__field--locale input").val(pageJson.locale);
13 |     });
14 | </script>
15 | 


--------------------------------------------------------------------------------
/change-error-text-for-a-single-field.html:
--------------------------------------------------------------------------------
 1 | <script>
 2 |     // All mandatory errors have the same text so cannot be tailored to different inputs
 3 |     // To change it for a specific input, this js listens for when the error div is created
 4 |     var eleToCheck = ".en__field--emailAddress"; // The field class to check - include the leading .
 5 |     var eleError = ".en__field__error";
 6 |     var newErrorText = "Where is your email address??"; // The error text to display
 7 |     $(eleToCheck).on('DOMNodeInserted', eleError, function() {
 8 |     	$(eleToCheck).off('DOMNodeInserted'); // stops function from running again when we change text in next step
 9 |     	$(eleToCheck + " " + eleError).text(newErrorText); 
10 |     });
11 | </script>
12 | 


--------------------------------------------------------------------------------
/update-field-with-another-field's-value.html:
--------------------------------------------------------------------------------
 1 | <script>
 2 |     // Form dependency calculations only work with numbers. This script will update a 
 3 |     // field with another field's value when the value changes and when the page first loads
 4 |     $(function() {
 5 |         fieldUpdateFromID = "en__field_supporter_emailAddress"; // ID of the field to update from
 6 |         fieldUpdateToID = "en__field_supporter_firstName"; // ID of the field to be updated by
 7 |         updateField();
 8 |         $( "#" + fieldUpdateFromID ).change(function() {
 9 |             updateField();
10 |         });
11 |         function updateField() {
12 |             $("#" + fieldUpdateToID).val($("#" + fieldUpdateFromID).val());
13 |         }
14 |     });
15 | </script>
16 | 


--------------------------------------------------------------------------------
/tls-checker.html:
--------------------------------------------------------------------------------
 1 | <!-- Amend the message and place this code in your template's Footer -->
 2 | <script>
 3 |   window.parseTLSinfo = function(data) {
 4 |     var message = 'Please upgrade to a browser with TLS 1.2 support. For assistance, contact info@xxx.com';
 5 |     var version = data.tls_version.split(' ');
 6 |     var sslFail = version[0] != 'TLS' || version[1] < 1.2;
 7 | 
 8 |     if(sslFail){
 9 |       var errorList = document.getElementsByClassName('en__errorList');
10 |       var error = document.createElement('li');
11 |       error.innerHTML = message;
12 |       error.className = 'en__error';
13 |       errorList[0].appendChild(error);
14 |     }
15 |   };
16 | </script>
17 | <script src="https://www.howsmyssl.com/a/check?callback=parseTLSinfo"></script>
18 | 


--------------------------------------------------------------------------------
/disable-submit-until-target-message-keypress.html:
--------------------------------------------------------------------------------
 1 | <style>
 2 |     .en__submit button:disabled,
 3 |     .en__submit button[disabled] {
 4 |       color: #cccccc;
 5 |       cursor: default;
 6 |     }
 7 |     .en__submit button:disabled:hover,
 8 |     .en__submit button[disabled]:hover {
 9 |       background-color: #66bc29;
10 |     }
11 | </style>
12 | <script>
13 |     $( document ).ready(function() {
14 |         setTimeout(function(){ 
15 |             /* Disable submit button */
16 |             $(".en__submit button").attr("disabled", "disabled");
17 |             /* Enabled on keydown */
18 |             $(".en__contactMessage__plainText").keydown(function() { 
19 |                 $(".en__submit button").removeAttr("disabled");   
20 |             });
21 |         }, 0);
22 |     });
23 | </script>
24 | 


--------------------------------------------------------------------------------
/placeholders.html:
--------------------------------------------------------------------------------
 1 | <script>
 2 | document.addEventListener('DOMContentLoaded', function () {
 3 |     const fields = document.querySelectorAll('.en__field--text, .en__field--email');
 4 | 
 5 |     fields.forEach(function (field) {
 6 |         const input = field.querySelector('input');
 7 |         const label = field.querySelector('label');
 8 | 
 9 |         if (input && label) {
10 |             let labelText = label.textContent || '';
11 |             // Hide the label
12 |             label.style.display = 'none';
13 | 
14 |             // Check if it's a mandatory field
15 |             if (field.classList.contains('en__mandatory')) {
16 |                 labelText += '*';
17 |             }
18 | 
19 |             input.setAttribute('placeholder', labelText.trim());
20 |         }
21 |     });
22 | });
23 | </script>
24 | 


--------------------------------------------------------------------------------
/phone-mobile-number-hidden-email-address.html:
--------------------------------------------------------------------------------
 1 | <!-- REQUIRES JQUERY LIBRARY -->
 2 | <!-- Since email address is required, it can be hard to create a page to take just a phone/mobile number -->
 3 | <!-- This code will hide the email address field and use their number to create a unique email address -->
 4 | <!-- The format will be PHONE_NUMBER@noaddress.com -->
 5 | <style>
 6 |   /* hide the email address field */
 7 |   .en__field--emailAddress {
 8 |     display: none;
 9 |   }
10 | </style>
11 | <script>
12 |   // When the phone number field changes, add it to the email address with @noaddress.ea at the end 
13 |   $(document).on("change", "#en__field_supporter_phoneNumber2", function() {
14 | 		  $("#en__field_supporter_emailAddress").val($("#en__field_supporter_phoneNumber2").val() + "@noaddress.ea");
15 | 	  }
16 |   );
17 | </script>
18 | 


--------------------------------------------------------------------------------
/opt-in-text-toggle.html:
--------------------------------------------------------------------------------
 1 | <!-- NOTE: this can be done with CSS now. Please refer to https://github.com/EngagingNetworks/page-builder-css-styles/blob/master/opt-in-text-toggle.css -->
 2 | <script>
 3 |     // This will toggle a text-block with the class "optOutMessage" if a supporter selects No from a radio Opt-in
 4 |     // You can then add text there to check that the supporter is sure about this
 5 |     // NOTE: You will need to change line var optIn = ".en__field--opt-in" to be the class of your own opt-in field
 6 |     
 7 |     var optOut = ".en__field--opt-in"; // change this line
 8 |     $(optOut).click(function() { checkOptOut () });
 9 |     
10 |     checkOptOut();
11 |     
12 |     function checkOptOut() {
13 |     	if ( $(optOut + " input[value='N']").is(':checked') ) {
14 |     		$(".optOutMessage").show();
15 |     	} else {
16 |     		$(".optOutMessage").hide();
17 |     	}
18 |     }
19 | </script>
20 | 


--------------------------------------------------------------------------------
/textarea-characters-remaining.html:
--------------------------------------------------------------------------------
 1 | <script>
 2 |     // Add paragraphs to hold counter
 3 |     $("textarea").each(function( index ) {
 4 |         var counterClass = "textareaCounter" + index;
 5 |         var counterHTML = "<p class='" + counterClass + "'></p>"
 6 |         $(this).after(counterHTML);
 7 |         updateCounter(counterClass);
 8 |     });
 9 | 	
10 |     // Check for key presses
11 |     $("textarea").on('keyup',function(event) {
12 |         var index = $( "textarea" ).index( this );
13 |         updateCounter("textareaCounter" + index);
14 |     });
15 |     
16 |     // Update counter
17 |     function updateCounter(counterClass) {
18 |         var remaining;
19 |         var total = $("." + counterClass).siblings("textarea").val().length;
20 |         var maxLength =  $("." + counterClass).siblings("textarea").attr("maxlength");
21 |         remaining = maxLength - total;
22 |         $("." + counterClass).text(remaining);
23 |     }
24 | </script>
25 | 


--------------------------------------------------------------------------------
/currency-symbol-next-suggested-gift.js:
--------------------------------------------------------------------------------
 1 | // NOTE: this requires the jQuery library
 2 | // The Next Suggested Gift can change the radio donation amounts on a donation page
 3 | // But it loses the currency symbol. This code adds the currency symbol (set as £ in this example)
 4 | // to the amount label, if the first character is a number (e.g. "10" becomes "£10" but "£20" or "Other" stays the same)
 5 | // setTimeout is needed to ensure this code runs after the NSG has done what it needs to do
 6 | <script>
 7 | $(function() {
 8 |     
 9 | 	addCurrencySign();
10 | 	
11 | 	$( ".en__field--recurrpay" ).on( "click", function() {
12 |         	addCurrencySign();
13 | 	});
14 | 	
15 | 	function addCurrencySign() {
16 | 	    setTimeout(function(){
17 | 		    $( ".en__field--donationAmt .en__field__input + label" ).each(function( index ) {
18 | 			  var firstChar = $( this ).text().charAt(0);
19 | 			  if( parseInt(firstChar)) {
20 | 				  $( this ).prepend( "£" );
21 | 			  }
22 | 		    }); 
23 | 	    }, 0)
24 | 	}
25 | });
26 | </script>
27 | 


--------------------------------------------------------------------------------
/ett-target-block-show-target-party.js:
--------------------------------------------------------------------------------
 1 | // Grab political party / other data from biography and insert it after the last name of the contact
 2 | // For this to work, you need to insert the party as a field insert into the target block's biography tab
 3 | $(document).ready(function(){
 4 |   // Hide the biography tab
 5 |   $('.en__contact--open .en__contactDetails__background, .en__contacts--singleMessageMode .en__contactDetails__background').css("display", "none"); // one message to all contacts - update if individual msgs
 6 |   // Insert party
 7 |   $('.en__contacts').children('.en__contact').each(function () {
 8 |       var contactId = this.getAttribute('data-contact');
 9 |       contactId = String(contactId);
10 |       var temp = ".en__contact--"+contactId;
11 |       var selector = temp + " .en__contactBackground__text";
12 | 
13 |       var contactParty = $(selector).text();
14 |       contactParty = contactParty.replace(" ", ""); // strip extra spaces
15 |  
16 |       $(temp + ' .en__contactDetail--lastName').append('<span style="font-weight: normal;">-'+contactParty+'</span>');
17 |     });
18 | });
19 | 


--------------------------------------------------------------------------------
/anonymous-random-email-address.html:
--------------------------------------------------------------------------------
 1 | <script>
 2 |   // For anonymous actions, or actions that don't require an email address, 
 3 |   // the database still needs an email address to be able to store the data.
 4 |   // Either you can create a supporter record and add a default value to a hidden email address field so all data stores there
 5 |   // Or you can use this code if you want separate records for each one - this code creates a random unique email address and
 6 |   // puts it into the email address field
 7 |   // Example: see https://actnow.e-activist.com/page/15136/petition/1?mode=DEMO
 8 |   $( document ).ready(function() {
 9 |     var theDate = new Date();
10 |     var milliseconds = theDate.getTime();
11 |     var emailAddress = makeid() + milliseconds + "@noaddress.ea";
12 |     $("#en__field_supporter_emailAddress").val(emailAddress);
13 |     $(".en__field--emailAddress").css("display","none");
14 |     function makeid() {
15 |       var text = "";
16 |       var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
17 |       for (var i = 0; i < 5; i++) {
18 |           text += possible.charAt(Math.floor(Math.random() * possible.length));
19 |       }
20 |       return text;
21 |     }
22 |   });
23 | </script>
24 | 


--------------------------------------------------------------------------------
/display-recent-responses-to-questions.md:
--------------------------------------------------------------------------------
 1 | You can use our public API call to retrieve, and display, responses to a question directly on the page. 
 2 | 
 3 | To do this, you need to add a Code Block, with code similar to the below. Note that you'll need to get your own Public Token for the token variable, and to place in your own questionId. The questionId can be retrieved by following the instructions at the bottom of https://engagingnetworks.support/knowledge-base/public-data-services-using-a-token
 4 | 
 5 | ```html
 6 | <div id="responses"></div>
 7 | <script>
 8 |     var questionId = 23668;
 9 |     var token = "YOUR_PUBLIC_TOKEN";
10 |     var dataURL = "https://e-activist.com/ea-dataservice/data.service?service=EaSupporterQuestionResponse&token=" + 
11 |         token + "&questionId=" + questionId + "&contentType=json";
12 |     // make the data call
13 |     var ret = $.ajax({
14 |     	url: dataURL,
15 |     	crossDomain: true,
16 |     	dataType: 'jsonp'
17 | 	});
18 | 	// when data call is done
19 | 	var responseHTML = "<ul>";
20 | 	ret.done(function(data){
21 | 	    var result = data;
22 | 	    var count = result.rows.length;
23 | 	    for(var i=0; i<count; i++){
24 | 	        var response = $.trim(result.rows[i].columns[7].value);
25 | 	        responseHTML += "<li>" + response + "</li>";
26 | 	    }
27 | 	    responseHTML += "</ul>";
28 | 	    $("#responses").html(responseHTML);
29 | 	});
30 | 
31 | </script>
32 | ```
33 | 


--------------------------------------------------------------------------------
/share-by-email-button.md:
--------------------------------------------------------------------------------
 1 | # Add a share by email button to the simple social buttons
 2 | 
 3 | The social share channels available are Facebook, Twitter, LinkedIn and WhatsApp. But what if you wanted to add another option to share by email here?
 4 | 
 5 | If you add this code to the bottom of the page, below the social buttons then it'll do this for you. Adjust the settings for the email variables for your own content:
 6 | 
 7 | Remember to add <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script> to the code if you have not already loaded the jQuery library
 8 | 
 9 | ```html
10 | <script>
11 | $( document ).ready(function() {
12 |     // Email variables
13 |     var emailSubject = "Please take action";
14 |     var emailBody = "I just signed this petition - will you too?";
15 |     var emailIcon = "https://aaf1a18515da0e792f78-c27fdabe952dfc357fe25ebf5c8897ee.ssl.cf5.rackcdn.com/1757/en_share--email.png?v=1535971194000";
16 |     // Encode for the URL
17 |     emailSubject = encodeURIComponent(emailSubject);
18 |     emailBody = encodeURIComponent(emailBody);
19 |     // Make up the HTML of the button
20 |     var emailHREF = "mailto:?subject=" + emailSubject + "&body=" + emailBody;
21 |     var emailHTML = "<a class='en__socialShare en__socialShare--email' style='width: 60px; height: 60px; padding: 12px; margin: 0px;' href='" + emailHREF + "' target='_blank'><img src='" + emailIcon + "' alt='Share by email'></a>"; 
22 |     // Insert the button
23 |     $( ".en__socialShares" ).append( emailHTML );
24 | });
25 | </script>
26 | 


--------------------------------------------------------------------------------
/reference-and-target-data-in-a-text-block.md:
--------------------------------------------------------------------------------
 1 | Reference data and target data (such as Party) can be inserted inside a target block message, in the contact details area of a target block, or in the background information tab of the block.
 2 | 
 3 | If you wish for reference data to show up in a text block then you can insert this into the background information area of the target block first, then use the following code to display it in a text block as well (hiding the background information tab too).
 4 | 
 5 | This code works for a three-page email-to-target campaign set-up, where the target block is on Page 2.
 6 | 
 7 | 1) Add any html, target data inserts and reference data inserts you want to display inside the targetblock's background information area (via the target block's settings) first. 
 8 | For example:
 9 | ```html
10 | <h2>In {contact_data~organization}, there are {reference_data~123~column1} cases of graffiti every year.</h2> 
11 | ```
12 | 2) Add a Code Block at the bottom of the page with the following code (this assumes you have jQuery on your page):
13 | ```html
14 | <script>
15 |     $(".en__component--copyblock.referencemessage").html($(".en__contactBackground__text pre").text().trim());
16 | </script> 
17 | <style>
18 |     .en__contactDetails__background {
19 |         display: none !important;
20 |     }
21 | </style> 
22 | ```
23 | 3) Add a class of "referencemessage" to the text block that should display the html (it will replace everything inside the text block so you can add default text here should the code not work for some reason)
24 | 


--------------------------------------------------------------------------------
/progress-through-campaign-pages.md:
--------------------------------------------------------------------------------
 1 | # Show progress through the campaign
 2 | This is useful to give an indication of how far through the campaign the supporter is. 
 3 | For example, for a donation campaign, page 1 might be "Personal Details", 2 "Payment details" and 3 "Confirmation". 
 4 | This is very simple by using a text block on each page:
 5 | 
 6 | ```html
 7 | <ol>
 8 | 	<li class="active">Details</li>
 9 | 	<li>Payment</li>
10 | 	<li>Complete</li>
11 | </ol>
12 | ```
13 | 
14 | Note that the "active" class shows the current stage in the process.
15 | 
16 | An example style is below - this changes the numbers into circles and adds an underline in the submit button's colour (if using the Free and Flexible templates):
17 | 
18 | ```css
19 | /* Page progress */
20 | .progress ol {
21 |     padding: 0;
22 |     display: flex;
23 |     width: 100%;
24 |     list-style: none;
25 |     counter-reset: item;
26 | }
27 | .progress ol li {
28 |     width: 33%;
29 |     font-weight: bold;
30 |     border-bottom: 3px solid #dddddd;
31 |     padding-bottom: 14px;
32 |     list-style-position: inside;
33 |     counter-increment: item;
34 |     text-align: center;
35 | }
36 | .progress ol li.active {
37 |     border-bottom: 3px solid var(--submit__button_background-color);
38 |     color: var(--submit__button_background-color);
39 | }
40 | .progress ol li::before {
41 |     content: counter(item);
42 |     margin-right: 5px;
43 |     background-color: #aaa;
44 |     border-radius: 100%;
45 |     color: #ffffff;
46 |     width: 24px;
47 |     display: inline-block;
48 |     text-align: center;
49 | }
50 | .progress ol li.active::before {
51 |     background-color: var(--submit__button_background-color);
52 | }
53 | ```
54 | 


--------------------------------------------------------------------------------
/direct-debits-next-two-possible-dates.html:
--------------------------------------------------------------------------------
 1 | <!-- This code chooses the next two available dates on any two days of the month --> 
 2 | <!-- The start date field needs to be a Select -->
 3 | 
 4 | <script>	
 5 | 	// Variable to hold the possible choices and quantity we want
 6 | 	var options = [];
 7 | 	var numberOfOptions = 2;
 8 | 	var monthNames = ["January", "February", "March", "April", "May", "June","July", "August", "September", "October", "November", "December"];
 9 | 	var possDay1 = 5;
10 | 	var possDay2 = 15;
11 | 	var daysAhead = 21; // the number of days from today we can start a new DD from
12 | 	// Get the earliest start date to compare against
13 | 	var nextDate = new Date();
14 | 	nextDate.setDate(nextDate.getDate() + daysAhead);
15 | 	// Step through the days to see if valid
16 | 	do {
17 | 		if (nextDate.getDate() == possDay1 || nextDate.getDate() == possDay2) {
18 | 			options.push(nextDate);
19 | 		}  
20 | 		nextDate = new Date(nextDate);
21 |     		nextDate.setDate(nextDate.getDate() + 1);
22 | 	}
23 | 	while (options.length < numberOfOptions);
24 | 	// Populate the dropdown
25 |   	var dropdown = $("#en__field_transaction_recurrstart");
26 | 	$(dropdown).empty();
27 | 	var fullDate; // display date
28 | 	var valueDate; // value stored
29 | 	for (var option = 0; option < options.length; option++) {
30 | 		optionDate = options[option];
31 | 		day = options[option].getDate();
32 | 		month = options[option].getMonth() + 1;
33 | 		year = options[option].getFullYear();
34 | 		fullDate = day + ' ' + monthNames[month - 1] + ' ' + year; 
35 | 		if( day < 10 ) {
36 | 			day = "0" + day  + "";
37 | 		}
38 | 		if( month < 10 ) {
39 | 			month = "0" + month  + "";
40 | 		}
41 | 		valueDate = day + '/' + month + '/' + year; 
42 | 		dropdown.append('<option value="' + valueDate + '">' + fullDate + '</option>');
43 | 	}
44 | </script>
45 | 


--------------------------------------------------------------------------------
/account-number-sort-code-verify.md:
--------------------------------------------------------------------------------
 1 | # Verify account number and sort code
 2 | 
 3 | You cannot insert some field values into thanks emails or on thanks pages. For example, tagged account number and sort code.
 4 | Therefore if you want to verify these to the supporter, you need to create new untagged fields in your Account Data Structure
 5 | and add them to the form block as Hidden fields. You can then use a Code Block to update these fields with the data that
 6 | the supporter enters.
 7 | 
 8 | **Note:** how you verify supporter's financial information with them is up to you and depends on many factors - we do not offer advice on what you should do, just the technical aspect of it. The code below is simply an example. 
 9 | 
10 | In this example, the code block will update the untagged fields NOT_TAGGED_13 and NOT_TAGGED_14 with the tagged fields.
11 | Your own IDs may vary.
12 | 
13 | In addition, the code masks out the first 4 digits of the account number.
14 | 
15 | ```html
16 | <script>
17 |     $( document ).ready(function() {
18 |         var accountNumberInput = "#en__field_supporter_bankAccountNumber";
19 |         var sortCodeInput = "#en__field_supporter_bankRoutingNumber";
20 |         var accountNumberVerify = "input[name='supporter.NOT_TAGGED_13']";
21 |         var sortCodeVerify = "input[name='supporter.NOT_TAGGED_14']";
22 |         doVerification();
23 |         $(accountNumberInput + "," + sortCodeInput).on("change", doVerification);
24 |         function doVerification() {
25 |             var accountNumberMask = "****" + $(accountNumberInput).val().slice(4);
26 |             $(accountNumberVerify).val( accountNumberMask );
27 |             $(sortCodeVerify).val( $(sortCodeInput).val() );
28 |         }
29 |     })
30 | </script>
31 | ```
32 | 
33 | Now you can simply use the field insert tool to display this information to the supporter.
34 | 


--------------------------------------------------------------------------------
/whatsapp-legacy.html:
--------------------------------------------------------------------------------
 1 | <!-- LEGACY SCRIPT - YOU CAN ADD WHATSAPP SHARES SINCE OCTOBER 2020 -->
 2 | 
 3 | <!-- This script should add a Whatsapp button next to your social buttons. -->
 4 | <!-- You will need to have set the social settings for this to work. -->
 5 | <!-- You will only see the button on mobiles & tablets. -->
 6 | 
 7 | <script>
 8 |     $(document).ready(function() {
 9 |         
10 |         // Only do this for non-desktops
11 |         if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
12 |             
13 |             // Set icon image
14 |             var wImageURL = "https://aaf1a18515da0e792f78-c27fdabe952dfc357fe25ebf5c8897ee.ssl.cf5.rackcdn.com/1757/whatsapp-icon-0.png?v=1531232571000";
15 |             
16 |             // Get data from meta tags
17 |             var element = document.querySelector('meta[property="og:description"]');
18 |             var wShareText = element && element.getAttribute("content");
19 |             element = document.querySelector('meta[property="og:title"]');
20 |             var wShareTitle = element && element.getAttribute("content");
21 |             element = document.querySelector('meta[property="og:url"]');
22 |             var wShareURL = element && element.getAttribute("content");
23 |             
24 |             // Make up HTML of button
25 |             wShareText = encodeURIComponent(wShareTitle) + " " + encodeURIComponent(wShareURL);
26 |             var wURL = "whatsapp://send?text=" + wShareText;
27 |             var wHTML = "<div class='en__share en__share--whatsapp en__share--simple'>" +
28 |                 "<a class='en__share__button en__share__button--simple en__share__button--whatsapp' " +
29 |                 "href='" + wURL + "'>" +
30 |                 "<img src='" + wImageURL + "'></a></div>"
31 |             
32 |             // Place HTML
33 |             $( ".en__shares" ).append( wHTML );
34 |         }
35 | 
36 |     });
37 | </script>
38 | 


--------------------------------------------------------------------------------
/searchable-selects.md:
--------------------------------------------------------------------------------
 1 | If you have a lot of values in a select field, you might want it to be fully searchable. 
 2 | 
 3 | There is a third-party JavaScript plug-in called [Selectize](https://github.com/selectize/selectize.js) that works well.
 4 | 
 5 | ## Example
 6 | For example, this allows you to search for specific UK towns:
 7 | 
 8 | https://secure.engagingnetworks.net/page/47877/petition/1?mode=DEMO&locale=en-GB
 9 | 
10 | In that example, it uses a code block to call CDN files (this applies to all Selects - you can change this to be more specific via the .selectize() line in this code):
11 | 
12 | ```html
13 | <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
14 | <script type="text/javascript" src="https://aaf1a18515da0e792f78-c27fdabe952dfc357fe25ebf5c8897ee.ssl.cf5.rackcdn.com/1757/selectize-standalone.js?v=1567417278000"></script>
15 | <link rel="stylesheet" type="text/css" href="https://aaf1a18515da0e792f78-c27fdabe952dfc357fe25ebf5c8897ee.ssl.cf5.rackcdn.com/1757/selectize.css?v=1567417051000" />
16 | <script>
17 | $(function() {
18 | 	$("select").selectize();
19 | });
20 | </script>
21 | ```
22 | 
23 | There are many other options available, so check out Selectize's documentation.
24 | 
25 | ## Styling
26 | 
27 | Some example stylings for the selectize box:
28 | 
29 | ```css
30 | .selectize-input input {
31 |   border-radius: .5em;
32 |   color: #264334;
33 |   min-height: 3em;
34 |   padding: .55em !important;
35 |   border-color: #000;
36 | }
37 | ```
38 | 
39 | To make it full width:
40 | 
41 | ```css
42 | .selectize-control {
43 |   width: 100%;
44 |   padding: 0;
45 | }
46 | ```
47 | 
48 | And to style the search text (highlight) and the active one you hover on (active):
49 | 
50 | ```css
51 | .selectize-control .highlight {
52 |     color: white;
53 |     background-color: #333333 !important;
54 | }
55 | .selectize-control .active {
56 |     background-color: #ccc;
57 | }
58 | ```
59 | 
60 | And to style the placeholder text:
61 | 
62 | ```css
63 | .selectize-control input::placeholder {
64 |     color: black;
65 | }
66 | ```
67 | 
68 | 


--------------------------------------------------------------------------------
/insert-today's-date.js:
--------------------------------------------------------------------------------
 1 | $( document ).ready(function() {
 2 |   // this example:
 3 |   // ... inserts today's date into #en__field_supporter_NOT_TAGGED_6,
 4 |   // ... inserts the date a year from now into #en__field_supporter_NOT_TAGGED_8,
 5 |   // ... inserts the date a year from now, minus one, into #en__field_supporter_NOT_TAGGED_7
 6 |   // It will format them as YYYYMMDD which means you can use profile and query filters (e.g. Is After)
 7 |   // Note 1: the IDs of the fields you want to insert the dates into will be different for your own account!
 8 |   // Note 2: the fields would need to be on the page, and hidden by CSS (NOT as a Hidden type otherwise val cannot be set)
 9 |   // Note 3: Hide the fields using CSS in a code block so you can still see them in page-builder
10 |   // Note 4: You don't need all three fields of course - if you just want today's date, only insert for the start date
11 |   // Note 5: You need jQuery for this to work. You can put this in a Code Block on the same page as the fields to insert into
12 |   
13 |   var daytoday = new Date();
14 |   var dayinyear = new Date();
15 |   var dayinyearlessone = new Date();
16 |   dayinyear.setFullYear(dayinyear.getFullYear() + 1);
17 |   dayinyearlessone.setFullYear(dayinyearlessone.getFullYear() + 1);
18 |   dayinyearlessone.setDate(dayinyearlessone.getDate()-1);
19 |   $("#en__field_supporter_NOT_TAGGED_6").val(formatDate(daytoday)); // today's date (e.g. start date)
20 |   $("#en__field_supporter_NOT_TAGGED_7").val(formatDate(dayinyearlessone)); // date a year from now, minus one (e.g. end date)
21 |   $("#en__field_supporter_NOT_TAGGED_8").val(formatDate(dayinyear)); // date a year from now (e.g. due date)
22 |   function formatDate(date) {
23 |       var year=String(date.getFullYear());
24 |       var month=String(date.getMonth() + 1);
25 |       var day=String(date.getDate());
26 |       if (month.length < 2) {
27 |           month = "0" + String(month);
28 |       }
29 |       if (day.length < 2) {
30 |           day = "0" + String(day);
31 |       }
32 |       var formattedDate=String(year)+String(month)+String(day);
33 |       return formattedDate;
34 |   }
35 | });
36 | 


--------------------------------------------------------------------------------
/ETT-select-random-target-from-custom-database.md:
--------------------------------------------------------------------------------
 1 | # Select a random target for a custom database ETT
 2 | 
 3 | Usually when using a custom database that requires a Match field, you match the target
 4 | on a field determined by the supporter, e.g. their broadband company
 5 | 
 6 | However, you may want to randomise this, so that the supporter is given a randomised target from a list of targets.
 7 | 
 8 | This is especially useful for the UK's House of Lords database, since these aren't determined by a postcode.
 9 | 
10 | 1) Create your custom database as usual, with a column of match numbers from 1 upwards, so each row has a unique number
11 | 2) Create a match field in your account data structure that will hold the randomised match number
12 | 3) Add the field to your ETT's first page, and the target block on the 2nd page
13 | 4) Add the code block below, ensuring you amend num to be the total number of targets in your database
14 | 5) Also amend matchFieldID to be the ID of your field (you can see this in the HTML of your page)
15 | 
16 | 
17 | ```html
18 | <script>
19 |     $(document).ready(function() {
20 |         var lords = new Array();
21 |         var num = 5;
22 |         var i = 1;
23 |         var exclude = new Array();
24 |         var matchFieldID = "#" + "en__field_supporter_NOT_TAGGED_2";
25 |         
26 |         /* Exclude values if you wish. Copy the line below and change the number */
27 |         //exclude.push(35);
28 |         
29 |         /* create array. don't create if number matches forbidden numbers */
30 |         while(i <= num){
31 |         	if($.inArray(i,exclude) == -1){
32 |         		lords.push(i);
33 |         	}
34 |         	i++;
35 |         }
36 |         
37 |         /* count the size of the new array (no. of lords after exclusions). minus 1 because 0 is an array index */
38 |         countLords = lords.length - 1;
39 |         
40 |         /* get a random value between 1 and no. of remaining lords */
41 |         var lordIndex = 1 + Math.floor(Math.random() * countLords);
42 |         
43 |         /* get the lord value and add to field */
44 |         var lordValue = lords[lordIndex];
45 |         
46 |         $(matchFieldID).val(lordValue);
47 |     });
48 | </script>
49 | ```
50 | 


--------------------------------------------------------------------------------
/direct-debits-next-two-possible-dates-v2.html:
--------------------------------------------------------------------------------
 1 | <!-- This code chooses the next two available dates on the 1st of the month --> 
 2 | <!-- given a gap of 15 days from now. The start date field needs to be a Select! -->
 3 | 
 4 | <script>
 5 | 
 6 |     // Variable to hold the possible choices and quantity we want
 7 | 	var options = [];
 8 | 	var numberOfOptions = 2;
 9 | 	var monthNames = ["January", "February", "March", "April", "May", "June","July", "August", "September", "October", "November", "December"];
10 | 	// Get the earliest start date to compare against
11 | 	var daysAhead = 15; // the number of days from today we can start a new DD from
12 |     	var earliestDate = new Date();
13 | 	earliestDate.setDate(earliestDate.getDate() + daysAhead);
14 | 	// Possible parts of earliest date
15 | 	var day = earliestDate.getDate();
16 | 	var month = earliestDate.getMonth(); // months run 0-11
17 | 	var year = earliestDate.getFullYear();
18 | 	// now advance the earliestDate to the next 1st
19 | 	if (day == 1) {
20 | 		// all fine, do nothing
21 | 	} else {
22 | 		month++;
23 | 		day = 1;
24 | 	}
25 | 	if (month == 12) { // gone too far
26 | 		year++;
27 | 		month = 0;
28 | 	}
29 | 	earliestDate = new Date(year, month, day);
30 | 	// Add this to the array
31 | 	options.push(earliestDate);
32 | 	// Create the next possible date(s)
33 | 	while (options.length < numberOfOptions) {
34 | 		// Advance to next possible date
35 | 		month++;
36 | 		if (month == 12) {
37 | 			year++;
38 | 			month = 0;
39 | 		}
40 | 		newDate = new Date(year, month, day);
41 | 		options.push(newDate);
42 | 	}
43 | 	// Clear
44 | 	var dropdown = $("#en__field_transaction_recurrstart");
45 | 	$(dropdown).empty();
46 | 	// Populate
47 | 	var optionDate;
48 | 	var fullDate; // display date
49 | 	var valueDate; // value stored
50 | 	for (var option = 0; option < options.length; option++) {
51 | 		optionDate = options[option];
52 | 		day = optionDate.getDate();
53 | 		month = optionDate.getMonth() + 1;
54 | 		year = optionDate.getFullYear();
55 | 		fullDate = day + ' ' + monthNames[month - 1] + ' ' + year; 
56 | 		if( day < 10 ) {
57 | 			day = "0" + day  + "";
58 | 		}
59 | 		if( month < 10 ) {
60 | 			month = "0" + month  + "";
61 | 		}
62 | 		valueDate = day + '/' + month + '/' + year; 
63 | 		dropdown.append('<option value="' + valueDate + '">' + fullDate + '</option>');
64 | 	}
65 | 	
66 | </script>
67 | 


--------------------------------------------------------------------------------
/accessible-custom-checkboxes.css:
--------------------------------------------------------------------------------
 1 | /* Styling checkboxes can often make them inaccessible with either the keyboard, screenreaders, or even both.
 2 |  This CSS allows you to replace the default browser checkboxes with fully accessible replacements.
 3 |  There are comments which indicate which parts to change to customise for your brand. */
 4 | 
 5 | input[type='checkbox'] {
 6 |   position: absolute;
 7 | }
 8 | 
 9 | input[type='checkbox'] + label {
10 |   display: block;
11 |   position: relative;
12 |   padding: 0 1.5rem;
13 | }
14 | 
15 | input[type='checkbox'] + label::before {
16 |   content: '';
17 |   position: relative;
18 |   display: inline-block;
19 |   margin-right: 10px;
20 |   width: 25px;  /* Modify this to change the size of the checkbox. */
21 |   height: 25px; /* Modify this to change the size of the checkbox. */
22 |   background: #ffffff; /* Modify this to change the background colour of the checkbox. */
23 |   border: 1px solid #000000; /* Modify this to change colour of the border of the checkbox and the thickness of the border. */
24 |   vertical-align: text-bottom;
25 | }
26 | 
27 | input[type='checkbox']:checked + label::before {
28 |   background: #ffffff; /* Modify this to change the colour of background of the checkbox when it is checked. */
29 | }
30 | 
31 | input[type='checkbox']:checked + label::after {
32 |   content: '';
33 |   position: absolute;
34 |   top: 7px; /* Modify this to adjust the position of the tick inside the checkbox. */
35 |   left: 22px; /* Modify this to adjust the position of the tick inside the checkbox. */
36 |   border-left: 2px solid #000000; /* Modify this to change the colour of the tick inside the checkbox. */
37 |   border-bottom: 2px solid #000000; /* Modify this to change the colour of the tick inside the checkbox. */
38 |   height: 6px; /* Modify this to change the size of the tick inside the checkbox. */
39 |   width: 13px; /* Modify this to change the size of the tick inside the checkbox. */
40 |   transform: rotate(-45deg);
41 | }
42 | 
43 | input[type='checkbox']:focus + label::before {
44 |   outline: #000000 solid 1px; /* Modify this to change the focus colour for the checkbox. */
45 |   box-shadow: 0 0px 8px ;
46 | }
47 | 
48 | input[type='checkbox'] {
49 |   position: absolute !important;
50 |   height: 1px;
51 |   width: 1px;
52 |   overflow: hidden;
53 |   clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
54 |   clip: rect(1px, 1px, 1px, 1px);
55 | }
56 | 


--------------------------------------------------------------------------------
/floating-button-scroll.md:
--------------------------------------------------------------------------------
 1 | # Floating button for mobiles to scroll to form
 2 | This code will add a button fixed to the bottom of the page for screens less than 600 pixels wide that, when clicked,
 3 | will scroll to specified content, such as the second column.
 4 | 
 5 | This is useful if you are worried that the left column (which will sit above the right column in narrow screens is obscuring the fields that the supporter needs to complete. 
 6 | 
 7 | This code should all be within one code block. Note that you will need to have styled .button
 8 | 
 9 | The button will scroll to the selector specified in $slideTo
10 | 
11 | Example page: https://e-activist.com/page/29146/petition/1?mode=DEMO&locale=en-GB
12 | 
13 | ```html
14 | <style>
15 |     @media only screen and (min-width: 600px) {
16 |         div#mobileScrollerFooter {
17 |             display: none;
18 |         }
19 |     }
20 |     div#mobileScrollerFooter {
21 |         position: fixed;
22 |         bottom: 0;
23 |         background-color: #fff;
24 |         width: 100%;
25 |         padding: 1rem;
26 |         border-top: 1px solid #555;
27 |         z-index: 1000;
28 |         text-align: center;
29 |         box-sizing: border-box;
30 |     }
31 |     a#mobileScroller {
32 |         cursor: pointer;
33 |         display: block;
34 |     }
35 | </style>
36 | <script>
37 |     $( document ).ready(function() {
38 |         // Insert the button into the HTML
39 |         var buttonText = "Sign the letter";
40 |         var buttonHTML = "<div id='mobileScrollerFooter'><a class='button' id='mobileScroller'>" + buttonText + "</a></div>"
41 |         $( buttonHTML ).insertAfter( ".en__component--page" );
42 |         var $floatingButton = $("div#mobileScrollerFooter");
43 |         // Where the floating button should slide to
44 |         var $slideTo = $(".en__component--column--2");
45 |         var $slideToPosition = $slideTo.position();
46 |         // Check window width
47 |         if ( $( document ).width() > 600 ) {
48 |             $floatingButton.hide();
49 |         } else {
50 |             // If button clicked, scroll
51 |             $floatingButton.find(".button").click(function() {
52 |                 $([document.documentElement, document.body]).animate({
53 |                     scrollTop: $slideTo.offset().top
54 |                 }, 2000);
55 |             });
56 |             // Hide button if just above or below target
57 |             $(window).scroll(function(){
58 |                 if ( $(window).scrollTop() > ( $slideToPosition.top - 200 ) ) {
59 |                     $floatingButton.slideUp("slow");
60 |                 } else {
61 |                     $floatingButton.slideDown("slow");
62 |                 }
63 |                 
64 |             });
65 |         }
66 |     });
67 | </script>
68 | ```
69 | 


--------------------------------------------------------------------------------
/gift-aid-calculation.md:
--------------------------------------------------------------------------------
 1 | You might want to tell the supporter how much their donation would be worth if they ticked the Gift Aid option. You can achieve this using calculated fields, but what if you want to show this within a text block, e.g. "With Gift Aid your donation would be worth £1.25"?
 2 | 
 3 | One way is to add a code block with the following code:
 4 | 
 5 | ```html
 6 | <script>
 7 | document.addEventListener('DOMContentLoaded', function () {
 8 | 
 9 |     // Function to update donation and Gift Aid values
10 |     function updateGiftAidDisplay() {
11 |         const donationRadios = document.querySelectorAll('input[name="transaction.donationAmt"]');
12 |         const otherInput = document.querySelector('input[name="transaction.donationAmt.other"]');
13 |         let selectedValue = "0";
14 | 
15 |         // Find the checked radio
16 |         const checkedRadio = Array.from(donationRadios).find(r => r.checked);
17 | 
18 |         if (checkedRadio && checkedRadio.value === "Other" && otherInput) {
19 |             selectedValue = otherInput.value;
20 |         } else if (checkedRadio) {
21 |             selectedValue = checkedRadio.value;
22 |         }
23 | 
24 |         let val = parseFloat(selectedValue);
25 |         if (isNaN(val) || val <= 0) val = 1;
26 | 
27 |         const donationAmtEl = document.querySelector('.gift-aid p strong.donation-amt');
28 |         const giftAidValEl = document.querySelector('.gift-aid p strong.gift-aid-val');
29 | 
30 |         if (donationAmtEl) donationAmtEl.textContent = "£" + val;
31 |         if (giftAidValEl) giftAidValEl.textContent = "£" + (val + (val * 20 / 80)).toFixed(2);
32 |     }
33 | 
34 |     // Attach listeners to donation radios, other input, and recurrpay radios
35 |     document.addEventListener('change', function (event) {
36 |         if (
37 |             event.target.name === 'transaction.donationAmt' ||
38 |             event.target.name === 'transaction.donationAmt.other' ||
39 |             event.target.name === 'transaction.recurrpay'
40 |         ) {
41 |             updateGiftAidDisplay();
42 |         }
43 |     });
44 | 
45 |     // For real-time updates on typing into "Other" field
46 |     const otherInput = document.querySelector('input[name="transaction.donationAmt.other"]');
47 |     if (otherInput) {
48 |         otherInput.addEventListener('input', updateGiftAidDisplay);
49 |     }
50 | 
51 |     // Trigger once on load
52 |     updateGiftAidDisplay();
53 | 
54 | });
55 | </script>
56 | ```
57 | 
58 | And then inside the text block (with class "gift-aid") where you want to show the calculated amount, add this:
59 | 
60 | ```html
61 | <h2>Gift aid</h2>
62 | <p>With gift aid, every <strong class="donation-amt">&pound;1</strong> 
63 | you give to us would be worth <strong class="gift-aid-val">&pound;1.25</strong> 
64 | at no extra cost to you.</p>
65 | ```
66 | 
67 | The code will replace the values inside the text block with values based on the input donation amount. Bingo!
68 | 


--------------------------------------------------------------------------------
/show-MP-name-on-data-capture.md:
--------------------------------------------------------------------------------
 1 | This example uses the EaAOContactData public data service call.
 2 | 
 3 | You can use data calls to query our contact databases for information and display them to the user, without having to use an email to target form.
 4 | 
 5 | Here's an example using a postcode field on the first page of an action. When the supporter types this in and submits the page, the second page uses the postcode to request information from our MP contact database and then displays the supporter's MP in a copy block.
 6 | 
 7 | 1) Create the first page of the data capture action, including the postcode field, email address and anything else you want.
 8 | 
 9 | 2) On the second page, add a code block
10 | 
11 | 3) In the Code Block, put in the following, updating 'your-token' with your public token
12 | 
13 | ``` html
14 | <span id="userPostcode" style="display:none;">{user_data~Postcode}</span>
15 | <p>Your MP is <span id="mpName"></span></p>
16 | 
17 | <script>
18 |   var userPostcode = encodeURIComponent($.trim($('#userPostcode').text()));
19 |   var service = "EaAOContactData";
20 |   var constituencyDatabaseId = 3; // Westminster MP database
21 |   var token = "your-token";
22 |   var dataUrl = "https://e-activist.com/ea-dataservice/data.service?service=" + service + 
23 |     "&constituencyDatabaseId=" + constituencyDatabaseId +
24 |     "&postcode=" + userPostcode +
25 |     "&token=" + token + 
26 |     "&contentType=json";
27 |   var newDataRequest = $.ajax({
28 |     url: dataUrl,
29 |     dataType: "jsonp",
30 |     crossDomain: true,
31 |     timeout: 30000
32 |   });
33 |   newDataRequest.done(function(data) {
34 |     var mpName = data.rows[0].columns[1].value + ' ' + data.rows[0].columns[2].value + ' ' + data.rows[0].columns[3].value + ' ' + data.rows[0].columns[4].value;
35 |     $('#mpName').text(mpName);
36 |   });
37 |   newDataRequest.fail(function(jqXHR, textStatus) {
38 |     console.log('ajax error' + jqXHR.responseText);
39 |   });
40 | </script>
41 | ```
42 | 
43 | 5) The page will then display something like: Your MP is Caroline Lucas MP
44 | 
45 | # How does it work?
46 | The first span just puts the supporter's postcode in a hidden box so we can reference it later. The next paragraph then shows text to the supporter "Your MP is xxx", where xxx is filled in by the script.
47 | 
48 | The script begins by assigning the postcode to a variable, which it gets from the hidden span. The dataurl that will be used to query the contact database is then made, including a filter for the supporter's postcode. The database ID refers to the Westminster MP database, and the service as seen on Public Data Services. The token is the public token you have on your account.
49 | 
50 | The data request is then made, using the URL. When it is done, the received JSON information is put in a variable called data. From this, the MP's name is assembled via a few columns of the received data. Finally, it is inserted into the mpName span from the second line.
51 | 


--------------------------------------------------------------------------------
/read-more-expand.md:
--------------------------------------------------------------------------------
 1 | # Adding a read more expanding text block
 2 | 
 3 | If you want some text that is hidden until a link is clicked, then you can do it by following these instructions
 4 | 
 5 | First of all your template will need some javascript to add the functionality. Paste this into the bottom of your footer, just before the `</html>` tag:
 6 | 
 7 | ```html
 8 | <!-- More info box -->
 9 | <script type="text/javascript">
10 |       $(function() {
11 |             $(".moreinfo-content").hide();
12 |             $(".moreinfo").click(function() {
13 |                   $(".moreinfo-content",this).toggle("fast");
14 |                   $(".moreinfo-heading",this).toggleClass("moreinfo-active"); 
15 |             });      
16 |       });
17 | </script>
18 | ```
19 | 
20 | Note you need jquery for this to work, so add the library if you don't already have it (see https://github.com/EngagingNetworks/page-builder-code-blocks/blob/master/README.md).
21 | 
22 | If you want to, you can add styling to the header that is clicked, so that an arrow appears before the link which twists downwards when it is clicked to expand open. The example styles below requires the Font Awesome font to be installed, which is a handy font because it contains lots of nice symbols. You can do that by visiting https://fontawesome.com/get-started and copying the code it gives you and putting it in your template's header, somewhere inside the `<head>` tags. 
23 | 
24 | Then insert the styles below into your `<head>` also:
25 | 
26 | ```html
27 | <style>
28 |         /* More info box */
29 |     	.moreinfo {
30 |     	  cursor: pointer;
31 |     	  border: 0;
32 |     	  box-sizing: border-box;
33 |     	  display: block;
34 |     	  width: 100%;
35 |     	  margin-bottom: 20px;
36 |     	}
37 |     	.moreinfo-heading {
38 |     	    padding-bottom: 1em;
39 |     	  color: #f9461c;
40 |     	  font-size: 1.2em;
41 |     	}
42 |         .moreinfo-heading:before {
43 |             display: inline-block;
44 |             font-family: FontAwesome;
45 |             content: "\f0da";
46 |             padding-right: 0.5rem;
47 |         }
48 |     	.moreinfo-heading.moreinfo-active:before {
49 |             -ms-transform: rotate(90deg);
50 |             -moz-transform: rotate(90deg);
51 |             -webkit-transform: rotate(90deg);
52 |             transform: rotate(90deg);
53 |             transform-origin: 20% 40%;
54 |     	}
55 | </style>
56 | ```
57 | 
58 | Finally, to actually add the text to your page, drag in a new text block, then click the Source button and paste in this HTML:
59 | 
60 | ```html
61 | <div class="moreinfo">
62 |       <div class="moreinfo-heading">
63 |             Click for more information
64 |       </div>
65 |       <div class="moreinfo-content">
66 |             <p>More info more info</p>
67 |             <p>More info more info</p>
68 |             <p>More info more info</p>
69 |             <p>More info more info</p>
70 |       </div>
71 | </div>
72 | ```
73 | 
74 | Any content that appears between the moreinfo-content div will be hidden until the moreinfo-heading is clicked.
75 | 


--------------------------------------------------------------------------------
/Insert contact data on page 1.html:
--------------------------------------------------------------------------------
 1 | <style>
 2 |     .en__submit button:disabled {
 3 |         background-color: #ccc;
 4 |     }
 5 | </style>
 6 | <script>
 7 | $( document ).ready(function() {
 8 |     // Lookup event triggering
 9 |     authorityLookup();
10 |     $('input[name$="postcode"]').change(function() {
11 |         console.log("postcode change");
12 |         setTimeout(
13 |           function() 
14 |           {
15 |             authorityLookup();
16 |           }, 1000);
17 |         
18 |     });
19 |     // For PCA predict, we need to fire the Postcode change event when Address 1 changes after a delay
20 |     $('input[name$="supporter.address1"]').change(function() {
21 |         console.log("add1 change");
22 |         // wait a bit
23 |         setTimeout(
24 |           function() 
25 |           {
26 |             // trigger postcode change
27 |             $('input[name$="postcode"]').trigger( "change" );
28 |           }, 1000);
29 |     });
30 |     // Function to lookup authority from postcode
31 |     function authorityLookup() {
32 |         $(".en__submit button").attr("disabled", "disabled");
33 |         
34 |         var token = 'INSERT TOKEN HERE'; // token settings (from dashboard)
35 |         var campaignId = 'INSERT CAMPAIGN ID HERE'; // campaign ID setting (from lookup campaign, 'view source' footer)
36 |         var postcode = $('input[name$="postcode"]').val(); // always grabs the tagged 'postcode' field value; change if using a generic input field
37 |         console.log("authorityLookup: " + postcode)
38 |         var postcodeRegex = /^([a-zA-Z]){1}([0-9][0-9]|[0-9]|[a-zA-Z][0-9][a-zA-Z]|[a-zA-Z][0-9][0-9]|[a-zA-Z][0-9]){1}([ ]?)([0-9][a-zA-z][a-zA-z]){1}$/; // might need tweaking, but should allow codes with/without space separators
39 |     
40 |         if (postcodeRegex.test(postcode) == false) {
41 |                // $('input[name$=NOT_TAGGED_3]').val(':('); // the code was invalid
42 |                 // add some code to indicate error here?
43 |         } else {
44 |             // perform ajax call
45 |             flagReady = false;
46 |            postcode = postcode.replace(/\s/g, ""); // clear all spaces from string, to make it 'proper' for the call ...
47 |     
48 |            $.ajax({
49 |                 url:"https://e-activist.com/ea-dataservice/data.service?service=EaEmailAOTargetContact&token="+token+"&campaignId="+campaignId+"&postcode="+postcode+"&contentType=json",
50 |         		crossDomain:true,
51 |         	    dataType:"jsonp"
52 |         	}).done(function(dataResponse) {            
53 |               	for (i = 0; i < dataResponse["rows"].length; i++) {
54 |                   title = dataResponse["rows"][i]["columns"][1].value; // title
55 |                   firstname = dataResponse["rows"][i]["columns"][2].value; // firstname
56 |                   lastname = dataResponse["rows"][i]["columns"][3].value; // lastname
57 |                   organisation = dataResponse["rows"][i]["columns"][5].value; // organisation
58 |                   console.log(title+' '+firstname+' '+lastname+', '+organisation);
59 |                   $('input[name$=NOT_TAGGED_3]').val(title+' '+firstname+' '+lastname+', '+organisation); // insert organization into the field
60 |                   $(".en__submit button").removeAttr("disabled");
61 |                 }    
62 |             })
63 |     			
64 |             .fail(function() {
65 |             	// note on error
66 |             })
67 |     				
68 |             .always(function() {
69 |                 // note on ajax call completed
70 |             });    
71 |         }
72 |     }
73 | 
74 | 
75 | });
76 | </script>
77 | 


--------------------------------------------------------------------------------
/direct-debits-Stripe-start-date-population.html:
--------------------------------------------------------------------------------
  1 | <script>
  2 |     window.onload = loadStartDates();
  3 |     
  4 |     function loadStartDates() {
  5 |         
  6 |         // ================== VARIABLES YOU CAN CHANGE =========================
  7 |         // ==== you need to only change these 3. They should all be numbers ====
  8 |         var numberOfOptions = 3; // the number of choices in the select you want to give, each separated by a month, e.g. 2
  9 |         var daysAhead = 15; // the number of days from today we can start a new DD from, e.g. 10
 10 |         var forceDayOfMonth = 21; // set to 0 if you are happy with any day of the month, set to 1-28 if you want to force the start date(s) to be on a certain day of the month, e.g. 1
 11 |         // =====================================================================
 12 |         
 13 |         // Other variables 
 14 |     	var options = []; // the possible choices
 15 |     	var monthNames = ["January", "February", "March", "April", "May", "June","July", "August", "September", "October", "November", "December"];
 16 |     	// Get the earliest start date to compare against
 17 |         var earliestDate = new Date();
 18 |     	earliestDate.setDate(earliestDate.getDate() + daysAhead);
 19 |     	// Possible parts of earliest date
 20 |     	var day = earliestDate.getDate();
 21 |     	var month = earliestDate.getMonth(); // months run 0-11
 22 |     	var year = earliestDate.getFullYear();
 23 |     	//  advance the earliestDate to the next day of month if set
 24 |     	if (forceDayOfMonth && day != forceDayOfMonth) {
 25 |     	    if (day < forceDayOfMonth) {
 26 |     	        // the day is too early
 27 |     	        day = forceDayOfMonth;
 28 |     	    } else {
 29 |     	        // the day is too late
 30 |         		month++;
 31 |     		    day = forceDayOfMonth;	        
 32 |     	    }
 33 |     	}
 34 |     	// advance the earliestDate to 1 of next month is day >28
 35 |     	if (day > 28) { 
 36 |     		month++;
 37 |     		day = 1;
 38 |     	}    
 39 |     	// advance the earliestDate to January if month is 12
 40 |     	if (month > 11) {
 41 |     		year++;
 42 |     		month = 0;
 43 |     	}
 44 |     	earliestDate = new Date(year, month, day);
 45 |     	// Add this to the array
 46 |     	options.push(earliestDate);
 47 |     	// Create the next possible date(s)
 48 |     	while (options.length < numberOfOptions) {
 49 |     		// Advance to next possible date
 50 |     		month++;
 51 |     		if (month == 12) {
 52 |     			year++;
 53 |     			month = 0;
 54 |     		}
 55 |     		newDate = new Date(year, month, day);
 56 |     		options.push(newDate);
 57 |     	}
 58 |     	// Clear the select of values
 59 | 		var startDateSelect = document.querySelector("#en__field_transaction_recurrstart");
 60 |     	removeOptions(document.getElementById("en__field_transaction_recurrstart"));
 61 |         // Populate
 62 |     	var optionDate;
 63 |     	var fullDate; // display date
 64 |     	var valueDate; // value stored
 65 | 	// Recurring Day field
 66 |         document.getElementById("en__field_transaction_recurrday").value = day;
 67 | 	// Options
 68 |     	for (var option = 0; option < options.length; option++) {
 69 |     		optionDate = options[option];
 70 |     		day = optionDate.getDate();
 71 |     		month = optionDate.getMonth() + 1;
 72 |     		year = optionDate.getFullYear();
 73 |     		fullDate = day + ' ' + monthNames[month - 1] + ' ' + year; 
 74 |     		if( day < 10 ) {
 75 |     			day = "0" + day  + "";
 76 |     		}
 77 |     		if( month < 10 ) {
 78 |     			month = "0" + month  + "";
 79 |     		}
 80 |     		valueDate = year +"-" + month + "-" + day; 
 81 |     		
 82 |     		//startDateSelect.append('<option value="' + valueDate + '">' + fullDate + '</option>'); //  format yyyy-mm-dd
 83 |     		var $opt = document.createElement('option');
 84 |             $opt.value = valueDate;
 85 |             $opt.label = fullDate;
 86 |             startDateSelect.appendChild($opt);
 87 |     	}
 88 |     }
 89 |     
 90 |     function removeOptions(selectElement) {
 91 |        var i, L = selectElement.options.length - 1;
 92 |        for(i = L; i >= 0; i--) {
 93 |           selectElement.remove(i);
 94 |        }
 95 |     }
 96 |     
 97 | 
 98 | </script>
 99 | <style>
100 |     .en__field--recurrday {
101 |         display: none !important;
102 |     }
103 | </style>
104 | 


--------------------------------------------------------------------------------
/shopping-list-money-buys.md:
--------------------------------------------------------------------------------
  1 | # Shopping list for donation amounts
  2 | You might want to have a page that has a "shopping list" or "money-buys" for different amounts chosen, e.g. "£20 could pay for a a water filtration kit". 
  3 | This can be done via some JavaScript (using jQuery) and CSS, then a text block with bulleted items where you set the text.
  4 | 
  5 | ## To accept single and recurring (via Reccuring Payment field)
  6 | To do that, you need code like this:
  7 | 
  8 | ```html
  9 | <script>
 10 |     $( document ).ready(function() {
 11 |         // show the shopping list depending on the donation value and whether it is recurring or not:
 12 |         const showPrompt = (radioValue, radioRecurring) => {
 13 |             if (radioValue=="Other") {
 14 |                 radioValue = $("input[name='transaction.donationAmt.other']").val();
 15 |             }
 16 |             $('.en__component--copyblock.prompts ul').find('li').each(function () {
 17 |                 if ( ($(this).data("amount") == radioValue) && ($(this).data("rec") == radioRecurring) ){
 18 |                     $(this).css("display","list-item");
 19 |                 } else {
 20 |                     $(this).css("display","none");
 21 |                 }
 22 |             })
 23 |         }
 24 |         
 25 |         // get the values of the amount and recurring-ness
 26 |         const checkRadio = () => {
 27 |             const currentRadioValue = $(".en__field--donationAmt input:checked").val();
 28 |             const currentRadioRecurring = $(".en__field--recurrpay input:checked").val();
 29 |             showPrompt(currentRadioValue, currentRadioRecurring);
 30 |         }       
 31 |         
 32 |         // call the function on donation amount change
 33 |         $(document).on("change",".en__field--donationAmt input",function(){
 34 |             checkRadio();
 35 |         });
 36 |         
 37 |         // call the function on recurring change
 38 |         $(document).on("change",".en__field--recurrpay input",function(){
 39 |             checkRadio();
 40 |         });
 41 |         
 42 |         checkRadio();
 43 |     });
 44 | </script>
 45 | ```
 46 | 
 47 | Then, add this CSS to style the prompts:
 48 | 
 49 | ```html
 50 | <style>
 51 |     body#en__pagebuilder .en__component--copyblock.prompts::before {
 52 |         /* This only shows in the page-builder so you can edit the text block */
 53 |         content: "Edit money-buys prompts (use Source to set the amount and recurring flags)";
 54 |         text-align: center;
 55 |         font-weight: bold;
 56 |         color: #666;
 57 |         background-color: #eee;
 58 |         padding: 2em;
 59 |         display: block;
 60 |     }
 61 |     .en__component--copyblock.prompts ul {
 62 |         padding: 0;
 63 |     }
 64 |     .en__component--copyblock.prompts li {
 65 |         display: none;
 66 |         list-style-type: none;
 67 |         text-align: center;
 68 |     }
 69 | </style>
 70 | ```
 71 | 
 72 | Then you add a text block, with a class of "prompts". 
 73 | It will look like a bulleted list, but the data-amount and data-rec are set via the HTML (get there using the Source button).
 74 | For example, ```<li data-amount="5" data-rec="N">``` will show when the donation amount is 5, and the recurring payment is N:
 75 | 
 76 | ```html
 77 | <ul>
 78 | 	<li data-amount="5" data-rec="N"><strong>&pound;5 could pay</strong> for xxx...</li>
 79 | 	<li data-amount="10" data-rec="N"><strong>&pound;10&nbsp;could pay</strong> for xxx...</li>
 80 | 	<li data-amount="25" data-rec="N"><strong>&pound;25 could pay</strong> for xxx...</li>
 81 | 	<li data-amount="50" data-rec="N"><strong>&pound;50 could pay</strong> for xxx...</li>
 82 | 	<li data-amount="100" data-rec="N"><strong>&pound;100 could pay</strong> for xxx...</li>
 83 | 	<li data-amount="5" data-rec="Y"><strong>&pound;5 could pay</strong> for xxx...</li>
 84 | 	<li data-amount="10" data-rec="Y"><strong>&pound;10&nbsp;could pay</strong> for xxx...</li>
 85 | 	<li data-amount="25" data-rec="Y"><strong>&pound;25 could pay</strong> for xxx...</li>
 86 | 	<li data-amount="50" data-rec="Y"><strong>&pound;50 could pay</strong> for xxx...</li>
 87 | 	<li data-amount="100" data-rec="Y"><strong>&pound;100 could pay</strong> for xxx...</li>
 88 | </ul>
 89 | ```
 90 | 
 91 | ## To accept one-off donations only (you don't have a Recurring Payment field on the page)
 92 | 
 93 | Code:
 94 | 
 95 | ```html
 96 | <script>
 97 |     $( document ).ready(function() {
 98 |         // show the shopping list depending on the donation value:
 99 |         const showPrompt = (radioValue) => {
100 |             if (radioValue=="Other") {
101 |                 radioValue = $("input[name='transaction.donationAmt.other']").val();
102 |             }
103 |             $('.en__component--copyblock.prompts ul').find('li').each(function () {
104 |                 if ( ($(this).data("amount") == radioValue) ){
105 |                     $(this).css("display","list-item");
106 |                 } else {
107 |                     $(this).css("display","none");
108 |                 }
109 |             })
110 |         }
111 |         
112 |         // get the values of the amount
113 |         const checkRadio = () => {
114 |             const currentRadioValue = $(".en__field--donationAmt input:checked").val();
115 |             showPrompt(currentRadioValue);
116 |         }       
117 |         
118 |         // call the function on donation amount change
119 |         $(document).on("change",".en__field--donationAmt input",function(){
120 |             checkRadio();
121 |         });
122 |         
123 |         checkRadio();
124 |     });
125 | </script>
126 | ```
127 | 
128 | Style is the same, HTML of the prompts block is:
129 | 
130 | ```html
131 | <ul>
132 | 	<li data-amount="5"><strong>&pound;5 could pay</strong> for xxx...</li>
133 | 	<li data-amount="10"><strong>&pound;10&nbsp;could pay</strong> for xxx...</li>
134 | 	<li data-amount="25"><strong>&pound;25 could pay</strong> for xxx...</li>
135 | 	<li data-amount="50><strong>&pound;50 could pay</strong> for xxx...</li>
136 | 	<li data-amount="100"><strong>&pound;100 could pay</strong> for xxx...</li>
137 | </ul>
138 | ```
139 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # page-builder: Code Blocks
  2 | 
  3 | Code Blocks can contain styles and javascript that only run when you preview or load the live page. They can add extra functionality to your pages.
  4 | 
  5 | **Note that these need to be thoroughly tested by you before launching your page! It is functionality outside of the normal operation of the platform.**
  6 | 
  7 | Many of these code blocks assume you have the jQuery library loaded in your template. If you do not, then you can add it via a line in your template's `<head>`, e.g.:
  8 |   
  9 | ```html
 10 | <script src="https://aaf1a18515da0e792f78-c27fdabe952dfc357fe25ebf5c8897ee.ssl.cf5.rackcdn.com/1/jquery-3-7-1.js?v=1719495813000"></script>
 11 | ```
 12 | ## Where to put the code block
 13 | The code block's position is important - if it is responding to a part of the page but it loads before it, it may not work. It is good to position the block at the bottom of your pages. Sometimes, you may want to wrap the code up in a ready event - this is so that it will only fire once the page has fully loaded:
 14 | 
 15 | ```javascript
 16 | $( document ).ready(function() {
 17 |     // your code here
 18 | });
 19 | ```
 20 | 
 21 | ## Do I have to use a Code Block?
 22 | No! The Code Block is useful when you only want to run the code on one page of a campaign, but you could add it directly into the template so all campaigns and their pages using that template get the code.
 23 | 
 24 | ## Fields code
 25 | 
 26 | Add placeholders within text boxes that match the input's label
 27 | https://github.com/EngagingNetworks/page-builder-code-blocks/blob/master/placeholders.html
 28 | 
 29 | Do not allow spaces in an email address field
 30 | https://github.com/EngagingNetworks/page-builder-code-blocks/blob/master/email-address-do-not-allow-spaces.html
 31 | 
 32 | Create and place a random email address - useful for anonymous actions
 33 | https://github.com/EngagingNetworks/page-builder-code-blocks/blob/master/anonymous-random-email-address.html
 34 | 
 35 | Create and place a random email address based on the supporter's phone/mobile number
 36 | https://github.com/EngagingNetworks/page-builder-code-blocks/blob/master/phone-mobile-number-hidden-email-address.html
 37 | 
 38 | Disable the submit button until the supporter presses a key inside the email-to-target message (to force them to edit it)
 39 | https://github.com/EngagingNetworks/page-builder-code-blocks/blob/master/disable-submit-until-target-message-keypress.html
 40 | 
 41 | Field masks, e.g. for phone numbers or credit card numbers
 42 | https://github.com/EngagingNetworks/page-builder-code-blocks/blob/master/field-masks.html
 43 | 
 44 | Change the error text for a specific field
 45 | https://github.com/EngagingNetworks/page-builder-code-blocks/blob/master/change-error-text-for-a-single-field.html
 46 | 
 47 | Counters for characters remaining in textareas
 48 | https://github.com/EngagingNetworks/page-builder-code-blocks/blob/master/textarea-characters-remaining.html
 49 | 
 50 | Update a field with another's contents
 51 | https://github.com/EngagingNetworks/page-builder-code-blocks/blob/master/update-field-with-another-field's-value.html
 52 | 
 53 | Locale - save to a question/field when you submit the page
 54 | https://github.com/EngagingNetworks/page-builder-code-blocks/blob/master/locale-save.html
 55 | 
 56 | Target block messages to have a maximum number of allowed characters
 57 | https://github.com/EngagingNetworks/page-builder-code-blocks/blob/master/max-number-of-characters-in-target-block.html
 58 | 
 59 | Searchable select field
 60 | https://github.com/EngagingNetworks/page-builder-code-blocks/blob/master/searchable-selects.md
 61 | 
 62 | ## Opt-in code
 63 | 
 64 | Show and hide an alert if the supporter chooses No for a radio opt-in
 65 | https://github.com/EngagingNetworks/page-builder-code-blocks/blob/master/opt-in-text-toggle.html
 66 | 
 67 | Pre-tick and hide a checkbox or radio opt-in
 68 | https://github.com/EngagingNetworks/page-builder-code-blocks/blob/master/pre-tick-and-hide-opt-in.html
 69 | 
 70 | ## Donation pages code
 71 | 
 72 | Choose the next two available start dates on the 1st of the month
 73 | https://github.com/EngagingNetworks/page-builder-code-blocks/blob/master/direct-debits-next-two-possible-dates-v2.html
 74 | 
 75 | Choose the next two available start dates on the 1st or 15th of the month
 76 | https://github.com/EngagingNetworks/page-builder-code-blocks/blob/master/direct-debits-next-two-possible-dates.html
 77 | 
 78 | Choose the next available start date as the 20th of next month
 79 | https://github.com/EngagingNetworks/page-builder-code-blocks/blob/master/direct-debits-next-month-20th.html
 80 | 
 81 | Gift aid calculation display in a text block
 82 | https://github.com/EngagingNetworks/page-builder-code-blocks/blob/master/gift-aid-calculation.md
 83 | 
 84 | Verify account number and sort code for thanks emails
 85 | https://github.com/EngagingNetworks/page-builder-code-blocks/blob/master/account-number-sort-code-verify.md
 86 | 
 87 | ## Social code
 88 | 
 89 | Add a share by email button
 90 | https://github.com/EngagingNetworks/page-builder-code-blocks/blob/master/share-by-email-button.md
 91 | 
 92 | ## Other
 93 | 
 94 | Add a more info link that expands to reveal more content
 95 | https://github.com/EngagingNetworks/page-builder-code-blocks/blob/master/read-more-expand.md
 96 | 
 97 | Add a fixed floating button to allow supporters to scroll down to the form for narrow screens/mobiles
 98 | https://github.com/EngagingNetworks/page-builder-code-blocks/blob/master/floating-button-scroll.md
 99 | 
100 | Alert supporters if their browser does not support TLS 1.1 or above (see http://support.engagingnetworks.net/manually-enabling-tls-11-andor-tls-12-protocols-web-browsers for more information)
101 | https://github.com/EngagingNetworks/page-builder-code-blocks/blob/master/tls-checker.html
102 | 
103 | Show the supporter's MP name on a non-email-to-target page
104 | https://github.com/EngagingNetworks/page-builder-code-blocks/blob/master/show-MP-name-on-data-capture.md
105 | 
106 | Add a shopping list/money-buys to show when certain donation amounts are chosen
107 | https://github.com/EngagingNetworks/page-builder-code-blocks/blob/master/shopping-list-money-buys.md
108 | 
109 | Show progress through a campaign
110 | https://github.com/EngagingNetworks/page-builder-code-blocks/blob/master/progress-through-campaign-pages.md
111 | 


--------------------------------------------------------------------------------