Skip to content

Commit

Permalink
Merge pull request #233 from OCHA-DAP/feature/HDX-9233-areas-of-inter…
Browse files Browse the repository at this point in the history 
…est-mailchimp-form

HDX-9233 areas of interest MailChimp form
  • Loading branch information
@ccataalin
ccataalin authored Nov 13, 2023
2 parents e410d9d + a5a97f9 commit 5343bb4
Show file tree
Hide file tree
Showing 8 changed files with 196 additions and 94 deletions.
39 changes: 3 additions & 36 deletions src/footer.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,24 +15,7 @@
<section class="contact-module bg-pattern-green">
<h2>Stay in touch</h2>
<p class="large">Sign up to our mailing list to get the latest updates on the Centre or <a href="https://centre.humdata.org/brochure" target="_blank">download our brochure</a> to learn more</p>

<!-- Begin MailChimp Signup Form -->
<div id="mc_embed_signup">
<form action="//humdata.us14.list-manage.com/subscribe/post?u=ea3f905d50ea939780139789d&amp;id=99796325d1" method="post" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<div id="mc_embed_signup_scroll">
<div class="mc-field-group">
<input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL" placeholder="Your email address"><input type="submit" value="submit" name="subscribe" id="mc-embedded-subscribe" class="btn submit-btn">
</div>

<div id="mce-responses" class="clear">
<div class="response" id="mce-error-response" style="display:none"></div>
<div class="response" id="mce-success-response" style="display:none"></div>
</div> <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
<div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_ea3f905d50ea939780139789d_99796325d1" tabindex="-1" value=""></div>
</div>
</form>
</div>
<!--End mc_embed_signup-->
<?php echo do_shortcode('[mailchimp-newsletter-form]'); ?>
</section>
<?php }

Expand All @@ -53,7 +36,7 @@
<footer id='colophon' class='site-footer'>
<div class='row-container style-dark-bg footer-last'>
<div class='row row-parent style-dark no-top-padding no-h-padding no-bottom-padding'>
<div class='site-info uncell col-lg-4'>
<div class='site-info uncell col-lg-5'>
<a href="<?php echo $homeURL ?>">
<svg class='logo' viewBox="0 0 245 77" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
Expand Down Expand Up @@ -90,23 +73,7 @@
</a>
<h5 class='logo-tagline'>Connecting people and data to improve lives</h5>
<p class='signup-text'>Sign up to our mailing list for latest updates on the Centre or <a href="https://centre.humdata.org/brochure" target="_blank">download our brochure</a> to learn more</p>
<div id="mc_embed_signup">
<form action="//humdata.us14.list-manage.com/subscribe/post?u=ea3f905d50ea939780139789d&amp;id=99796325d1" method="post" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<div id="mc_embed_signup_scroll">
<div class="mc-field-group">
<input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL" placeholder="Your email address"><input type="submit" value="submit" name="subscribe" id="mc-embedded-subscribe" class="btn submit-btn">
</div>

<div id="mce-responses" class="clear">
<div class="response" id="mce-error-response" style="display:none"></div>
<div class="response" id="mce-success-response" style="display:none"></div>
</div> <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
<div style="position: absolute; left: -5000px;" aria-hidden="true">
<input type="text" name="b_ea3f905d50ea939780139789d_99796325d1" tabindex="-1" value="">
</div>
</div>
</form>
</div>
<?php echo do_shortcode('[mailchimp-newsletter-form]'); ?>
</div>
<div class='site-info uncell col-lg-5'>
<?php echo $secondary_list ?>
Expand Down
42 changes: 42 additions & 0 deletions src/functions.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -607,3 +607,45 @@ function get_archive_posts($post, $post_type, $tax)
}
return $content;
}

// Define the shortcode function
function mailchimp_newsletter_form_shortcode() {
ob_start(); // Start output buffering

?>
<!-- Begin MailChimp Signup Form -->
<div class="mc_embed_signup">
<form action="//humdata.us14.list-manage.com/subscribe/post?u=ea3f905d50ea939780139789d&amp;id=99796325d1&amp;f_id=0066c2e1f0" method="post" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<div class="mc-field-group">
<div class="hidden">
<input type="checkbox" name="group[4368][8]" value="">
<input type="checkbox" name="group[4368][2]" value="">
<input type="checkbox" name="group[4368][4]" value="">
<input type="checkbox" name="group[4368][1]" value="">
</div>
<input type="email" value="" name="EMAIL" class="required email" placeholder="Your email address">
<select multiple="multiple" class="interest-areas-select">
<option value="8">Data Services: the latest data, features and deep dives for the Humanitarian Data Exchange (HDX)</option>
<option value="2">Data Responsibility: guidance on the safe, ethical and effective management of data</option>
<option value="4">Learning and Practice: learning resources to improve the confidence of humanitarians to use data</option>
<option value="1">Data Science: risk analysis, models and forecasts to help anticipate and respond to shocks</option>
</select>
<input type="submit" value="submit" name="subscribe" class="btn submit-btn">
</div>
<div id="mce-responses" class="clear">
<div class="response" id="mce-error-response" style="display: none;"></div>
<div class="response" id="mce-success-response" style="display: none;"></div>
</div>
<div style="position: absolute; left: -5000px;" aria-hidden="true">
<input type="text" name="b_ea3f905d50ea939780139789d_99796325d1" tabindex="-1" value="">
</div>
</form>
</div>
<!--End mc_embed_signup-->
<?php

return ob_get_clean(); // Return the buffered content
}

// Register the shortcode
add_shortcode('mailchimp-newsletter-form', 'mailchimp_newsletter_form_shortcode');
32 changes: 2 additions & 30 deletions src/impactstory.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -144,36 +144,8 @@ class="fa fa-envelope" aria-hidden="true"></i></a>
<div class="volunteer-signup">
<p>Want to know the latest about the Centre and HDX?<br>Sign up for our
newsletter.</p>
<div id="mc_embed_signup">
<form action="//humdata.us14.list-manage.com/subscribe/post?u=ea3f905d50ea939780139789d&amp;id=99796325d1"
method="post" name="mc-embedded-subscribe-form" class="validate"
target="_blank" novalidate>
<div id="mc_embed_signup_scroll">
<div class="mc-field-group">
<input type="email" value="" name="EMAIL"
class="required email" id="mce-EMAIL"
placeholder="Your email address"><input type="submit"
value="submit"
name="subscribe"
id="mc-embedded-subscribe"
class="btn submit-btn">
</div>

<div id="mce-responses" class="clear">
<div class="response" id="mce-error-response"
style="display:none"></div>
<div class="response" id="mce-success-response"
style="display:none"></div>
</div>
<!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
<div style="position: absolute; left: -5000px;"
aria-hidden="true"><input type="text"
name="b_ea3f905d50ea939780139789d_99796325d1"
tabindex="-1" value=""></div>
</div>
</form>
</div>
</div>
<?php echo do_shortcode('[mailchimp-newsletter-form]'); ?>
</div>

<?php if(have_rows('related_content')): ?>
<h6>Related content:</h6>
Expand Down
25 changes: 25 additions & 0 deletions src/scripts/humdata.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -448,5 +448,30 @@
}
}

//*********** MAILCHIMP NEWSLETTER ***********//
$('.interest-areas-select').each(function() {
var select = $(this);
var form = select.parents('form:first');

// Initialize Select2
var $select2 = select.select2({placeholder: 'Area(s) of Interest'});
$select2.data().select2.$dropdown.addClass('interest-areas-container')

// Update hidden input values when Select2 selection changes
select.on('change', function () {
var selectedValues = select.val();

// Uncheck all hidden inputs
form.find('input[name^="group[4368]"]').prop('checked', false);

// Check hidden inputs based on selected values
if (selectedValues) {
selectedValues.forEach(function (value) {
form.find('input[name="group[4368][' + value + ']"]').prop('checked', true);
});
}
});
});

})(jQuery);

12 changes: 9 additions & 3 deletions src/scss/_elements.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -203,9 +203,15 @@ input{
}
}

#contact #mc_embed_signup div.mce_inline_error {
background-color: transparent;
color: #FF0000;
#contact {
.mc_embed_signup {
input[type="email"] {
border: 1px solid $green;
}
.select2-container {
border: 1px solid $green;
}
}
}

.media-credit {
Expand Down
5 changes: 0 additions & 5 deletions src/scss/_front.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -362,11 +362,6 @@ a.underline {
}
.contact-module {
padding-bottom: 80px;
.mc-field-group {
input[type=email] {
margin-bottom: 20px;
}
}
p {
width: 90%;
}
Expand Down
21 changes: 11 additions & 10 deletions src/scss/_impactstory.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,13 @@
.impact-story {
.post-content {
margin-bottom: 60px;
.mc_embed_signup {
.select2-container {
width: 100% !important;
margin-top: 5px;
margin-bottom: 5px;
}
}
}
.summary {
font-size: 20px;
Expand Down Expand Up @@ -179,20 +186,19 @@
font-size: 16px;
height: 40px;
line-height: 40px;
max-width: 270px;
width: 100%;
padding-left: 10px;
width: 68%;
&::-webkit-input-placeholder { /* Chrome/Opera/Safari */
color: #CCC !important;
}
&::-moz-placeholder { /* Firefox 19+ */
color: #CCC !important;
color: $graycc !important;
}
&:-ms-input-placeholder { /* IE 10+ */
color: #CCC !important;
color: $graycc !important;
}
&:-moz-placeholder { /* Firefox 18- */
color: #CCC !important;
color: $graycc !important;
}
}
.btn.submit-btn {
Expand Down Expand Up @@ -305,11 +311,6 @@
}
}
.impact-story {
.post-content {
#mc_embed_signup {
padding: 0;
}
}
.author-info {
h5 {
font-size: 14px;
Expand Down
114 changes: 104 additions & 10 deletions src/scss/_menus.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -272,30 +272,26 @@
}
}

#mc_embed_signup {
.mc_embed_signup {
input[type="email"] {
background-color: $white;
border-radius: 0;
font-size: 16px;
height: 40px;
line-height: 40px;
max-width: 270px;
width: 180px;
padding-left: 10px;
width: 68%;
&::-webkit-input-placeholder { /* Chrome/Opera/Safari */
color: #CCC !important;
color: $graycc !important;
}
&::-moz-placeholder { /* Firefox 19+ */
color: #CCC !important;
color: $graycc !important;
}
&:-ms-input-placeholder { /* IE 10+ */
color: #CCC !important;
color: $graycc !important;
}
&:-moz-placeholder { /* Firefox 18- */
color: #CCC !important;
}
&.light {
border: 1px solid $green;
color: $graycc !important;
}
}
.btn.submit-btn {
Expand All @@ -305,6 +301,104 @@
line-height: 40px;
padding: 0 12px !important;
}
.select2-container {
width: 320px !important;
display: inline-block;
height: 40px;
line-height: 40px;
overflow: hidden;
.select2-selection {
border: 0;
border-radius: 0;
&.select2-selection--multiple {
max-height: 40px;
.select2-selection__rendered {
max-height: 40px;
}
.select2-selection__choice {
line-height: 24px !important;
}
}
.select2-selection__choice {
$selection-width: 75px;
$selection-margin: 6px;
$max-selections: 4;
float: none;
display: inline-block;
top: 0;
left: auto;
position: absolute;
width: $selection-width;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
padding: 2px 5px;
border-radius: 5px;
margin: $selection-margin;
border: 1px solid $green;
color: $gray66;
background-color: $white;
@for $i from 1 through $max-selections {
&:nth-child(#{$i}) {
left: ($selection-width + $selection-margin) * ($i - 1);
}
}
}
.select2-search__field {
line-height: 34px;
font-family: $font-serif-book;
font-size: 16px;
&::-webkit-input-placeholder { /* Chrome/Opera/Safari */
color: $graycc !important;
}
&::-moz-placeholder { /* Firefox 19+ */
color: $graycc !important;
}
&:-ms-input-placeholder { /* IE 10+ */
color: $graycc !important;
}
&:-moz-placeholder { /* Firefox 18- */
color: $graycc !important;
}
}
}
}
}
.interest-areas-container {
.select2-dropdown {
.select2-results {
.select2-results__options {
.select2-results__option {
color: $gray66;
background-color: $white;
font-size: 12px;
&.select2-results__option--highlighted {
color: $green;
}
}
}
}
}
}
@media (max-width: $screen-lg) {
.mc_embed_signup {
.select2-container {
width: 215px !important;
}
}
}
@media (max-width: $screen-md) {
.mc_embed_signup {
input[type="email"] {
width: 100%;
max-width: none;
}
.select2-container {
width: 100% !important;
margin-top: 5px;
margin-bottom: 5px;
}
}
}


Expand Down

0 comments on commit 5343bb4

Please sign in to comment.