{"id":60645,"date":"2026-05-11T06:11:02","date_gmt":"2026-05-11T06:11:02","guid":{"rendered":"https:\/\/www.greenpeace.org\/africa\/?page_id=60645"},"modified":"2026-05-11T06:11:05","modified_gmt":"2026-05-11T06:11:05","slug":"mothers-day-e-card-generator","status":"publish","type":"page","link":"https:\/\/www.greenpeace.org\/africa\/en\/mothers-day-e-card-generator\/","title":{"rendered":"Mother&#8217;s day e-card generator"},"content":{"rendered":"\n<style>\n  .ecard-wrapper *, .ecard-wrapper *::before, .ecard-wrapper *::after { margin: 0; padding: 0; box-sizing: border-box; }\n\n  .ecard-wrapper {\n    font-family: 'Outfit', sans-serif;\n    color: #2C2420;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: 2rem 1rem;\n  }\n\n  .ecard-container {\n    width: 100%;\n    max-width: 540px;\n    animation: ecardRise 0.6s ease-out both;\n  }\n\n  @keyframes ecardRise {\n    from { opacity: 0; transform: translateY(20px); }\n    to   { opacity: 1; transform: translateY(0); }\n  }\n\n  .ecard-hero-image {\n    width: 100%;\n    border-radius: 16px 16px 0 0;\n    display: block;\n  }\n\n  .ecard-form-card {\n    background: #FFFFFF;\n    border: 1px solid #DDD6CC;\n    border-top: none;\n    border-radius: 0 0 16px 16px;\n    padding: 2rem 2.25rem 2.5rem;\n    box-shadow: 0 8px 40px rgba(44,36,32,0.07);\n  }\n\n  .ecard-form-card h1 {\n    font-family: 'DM Serif Display', serif;\n    font-size: 1.55rem;\n    font-weight: 400;\n    text-align: center;\n    margin-bottom: 0.3rem;\n    color: #1D8038;\n  }\n\n  .ecard-subtitle {\n    text-align: center;\n    color: #7A7168;\n    font-size: 0.88rem;\n    font-weight: 300;\n    margin-bottom: 2rem;\n    line-height: 1.5;\n  }\n\n  .ecard-field {\n    margin-bottom: 1.4rem;\n  }\n\n  .ecard-form-card label {\n    display: block;\n    font-size: 0.78rem;\n    font-weight: 500;\n    text-transform: uppercase;\n    letter-spacing: 0.08em;\n    color: #7A7168;\n    margin-bottom: 0.4rem;\n  }\n\n  .ecard-row {\n    display: flex;\n    gap: 1rem;\n  }\n\n  .ecard-row .ecard-field { flex: 1; }\n\n  .ecard-form-card input {\n    width: 100%;\n    padding: 0.72rem 1rem;\n    font-family: 'Outfit', sans-serif;\n    font-size: 0.95rem;\n    font-weight: 300;\n    color: #2C2420;\n    background: #F5F2EC;\n    border: 1.5px solid #DDD6CC;\n    border-radius: 10px;\n    outline: none;\n    transition: border-color 0.2s, box-shadow 0.2s;\n  }\n\n  .ecard-form-card input::placeholder { color: #BFB5A8; }\n\n  .ecard-form-card input:focus {\n    border-color: #1D8038;\n    box-shadow: 0 0 0 3px rgba(29,128,56,0.2);\n  }\n\n  .ecard-form-card input.invalid { border-color: #C0392B; }\n\n  .ecard-error-msg {\n    color: #C0392B;\n    font-size: 0.76rem;\n    margin-top: 0.25rem;\n    display: none;\n  }\n\n  .ecard-error-msg.show { display: block; }\n\n  \/* Card selection *\/\n  .ecard-selection-label {\n    display: block;\n    font-size: 0.78rem;\n    font-weight: 500;\n    text-transform: uppercase;\n    letter-spacing: 0.08em;\n    color: #7A7168;\n    margin-bottom: 0.6rem;\n  }\n\n  .ecard-options {\n    display: flex;\n    gap: 0.75rem;\n    margin-bottom: 0.25rem;\n  }\n\n  .ecard-option {\n    flex: 1;\n    padding: 0.85rem 0.5rem;\n    border: 2px solid #DDD6CC;\n    border-radius: 12px;\n    cursor: pointer;\n    text-align: center;\n    transition: all 0.2s;\n    background: #F5F2EC;\n    position: relative;\n  }\n\n  .ecard-option:hover {\n    border-color: #AAA49A;\n    transform: translateY(-1px);\n  }\n\n  .ecard-option.selected {\n    transform: translateY(-2px);\n    box-shadow: 0 4px 16px rgba(0,0,0,0.08);\n  }\n\n  .ecard-option.selected.ecard-card-1 {\n    border-color: #F2C524;\n    background: rgba(242,197,36,0.06);\n  }\n  .ecard-option.selected.ecard-card-2 {\n    border-color: #2260BF;\n    background: rgba(34,96,191,0.06);\n  }\n  .ecard-option.selected.ecard-card-3 {\n    border-color: #6B3FA0;\n    background: rgba(107,63,160,0.06);\n  }\n\n  .ecard-swatch {\n    width: 28px;\n    height: 28px;\n    border-radius: 50%;\n    margin: 0 auto 0.45rem;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    font-size: 0.7rem;\n    color: #fff;\n    font-weight: 600;\n  }\n\n  .ecard-card-1 .ecard-swatch { background: #F2C524; color: #5A4800; }\n  .ecard-card-2 .ecard-swatch { background: #2260BF; }\n  .ecard-card-3 .ecard-swatch { background: #6B3FA0; }\n\n  .ecard-option-name {\n    font-size: 0.78rem;\n    font-weight: 500;\n    color: #2C2420;\n  }\n\n  .ecard-check-icon {\n    position: absolute;\n    top: 6px;\n    right: 6px;\n    width: 16px;\n    height: 16px;\n    border-radius: 50%;\n    background: #1D8038;\n    display: none;\n    align-items: center;\n    justify-content: center;\n  }\n\n  .ecard-option.selected .ecard-check-icon {\n    display: flex;\n  }\n\n  .ecard-check-icon svg {\n    width: 10px;\n    height: 10px;\n  }\n\n  .ecard-divider {\n    height: 1px;\n    background: #DDD6CC;\n    margin: 0.75rem 0 1.75rem;\n  }\n\n  button.ecard-submit-btn {\n    width: 100%;\n    padding: 0.85rem;\n    font-family: 'Outfit', sans-serif;\n    font-size: 1rem;\n    font-weight: 500;\n    letter-spacing: 0.03em;\n    color: #fff;\n    background: #1D8038;\n    border: none;\n    border-radius: 12px;\n    cursor: pointer;\n    transition: background 0.2s, transform 0.1s;\n  }\n\n  button.ecard-submit-btn:hover { background: #166B2D; }\n  button.ecard-submit-btn:active { transform: scale(0.985); }\n\n  .ecard-footer {\n    text-align: center;\n    margin-top: 1.25rem;\n    font-size: 0.75rem;\n    color: #7A7168;\n    font-weight: 300;\n  }\n\n  @media (max-width: 500px) {\n    .ecard-form-card { padding: 1.5rem 1.25rem 2rem; }\n    .ecard-row { flex-direction: column; gap: 0; }\n    .ecard-form-card h1 { font-size: 1.35rem; }\n    .ecard-options { gap: 0.5rem; }\n  }\n<\/style>\n\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=DM+Serif+Display&#038;family=Outfit:wght@300;400;500;600&#038;display=swap\" rel=\"stylesheet\">\n\n<div class=\"ecard-wrapper\">\n  <div class=\"ecard-container\">\n    <img decoding=\"async\"\n      src=\"https:\/\/www.greenpeace.org\/static\/planet4-africa-stateless\/2026\/05\/7e633119-md-gp-africa-cards.png\"\n      alt=\"Greenpeace Africa Mother's Day Cards\"\n      class=\"ecard-hero-image\"\n    >\n\n    <div class=\"ecard-form-card\">\n      <h1>CREATE YOUR MOTHER&#8217;S DAY E-CARD<\/h1>\n      <p class=\"ecard-subtitle\">Didn&#8217;t receive our email? No worries! Pick a card design below, type in your details, and we&#8217;ll create a beautiful personalised e-card for you to download and share.<\/p>\n\n      <!-- Card Selection -->\n      <label class=\"ecard-selection-label\">Select Your Card<\/label>\n      <div class=\"ecard-options\">\n        <div class=\"ecard-option ecard-card-1 selected\" onclick=\"ecardSelectCard(1)\" id=\"ecardOpt1\">\n          <div class=\"ecard-check-icon\"><svg viewBox=\"0 0 10 10\" fill=\"none\"><path d=\"M2 5.5L4 7.5L8 3\" stroke=\"#fff\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg><\/div>\n          <div class=\"ecard-swatch\">1<\/div>\n          <div class=\"ecard-option-name\">Card 1<\/div>\n        <\/div>\n        <div class=\"ecard-option ecard-card-2\" onclick=\"ecardSelectCard(2)\" id=\"ecardOpt2\">\n          <div class=\"ecard-check-icon\"><svg viewBox=\"0 0 10 10\" fill=\"none\"><path d=\"M2 5.5L4 7.5L8 3\" stroke=\"#fff\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg><\/div>\n          <div class=\"ecard-swatch\">2<\/div>\n          <div class=\"ecard-option-name\">Card 2<\/div>\n        <\/div>\n        <div class=\"ecard-option ecard-card-3\" onclick=\"ecardSelectCard(3)\" id=\"ecardOpt3\">\n          <div class=\"ecard-check-icon\"><svg viewBox=\"0 0 10 10\" fill=\"none\"><path d=\"M2 5.5L4 7.5L8 3\" stroke=\"#fff\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg><\/div>\n          <div class=\"ecard-swatch\">3<\/div>\n          <div class=\"ecard-option-name\">Card 3<\/div>\n        <\/div>\n      <\/div>\n\n      <div id=\"ecardCardError\" class=\"ecard-error-msg\" style=\"margin-bottom:1rem;\">Please select a card.<\/div>\n\n      <div class=\"ecard-divider\"><\/div>\n\n      <!-- Form Fields -->\n      <div class=\"ecard-row\">\n        <div class=\"ecard-field\">\n          <label for=\"ecardFirstName\">Mother&#8217;s First Name<\/label>\n          <input type=\"text\" id=\"ecardFirstName\" placeholder=\"Jane\" required>\n          <div class=\"ecard-error-msg\" id=\"ecardFirstNameError\">Please enter mother&#8217;s first name.<\/div>\n        <\/div>\n        <div class=\"ecard-field\">\n          <label for=\"ecardLastName\">Mother&#8217;s Last Name<\/label>\n          <input type=\"text\" id=\"ecardLastName\" placeholder=\"Doe\" required>\n          <div class=\"ecard-error-msg\" id=\"ecardLastNameError\">Please enter mother&#8217;s last name.<\/div>\n        <\/div>\n      <\/div>\n\n      <div class=\"ecard-field\">\n        <label for=\"ecardHonoringName\">Your Name<\/label>\n        <input type=\"text\" id=\"ecardHonoringName\" placeholder=\"Your full name\" required>\n        <div class=\"ecard-error-msg\" id=\"ecardHonoringNameError\">Please enter your name.<\/div>\n      <\/div>\n\n      <div class=\"ecard-divider\"><\/div>\n\n      <button class=\"ecard-submit-btn\" onclick=\"ecardHandleSubmit()\" id=\"ecardSubmitBtn\">Create my E-Card \u2192<\/button>\n\n      <div class=\"ecard-footer\">Greenpeace Africa \u2014 Protecting our planet for future generations.<\/div>\n    <\/div>\n  <\/div>\n<\/div>\n\n<script>\n  let ecardSelectedCard = 1;\n\n  const ecardUrls = {\n    1: 'https:\/\/img1.niftyimages.com\/gvmh\/5i8p\/e33f',\n    2: 'https:\/\/img1.niftyimages.com\/gvmh\/qi8p\/w33f',\n    3: 'https:\/\/img1.niftyimages.com\/gvmh\/yi8p\/s33f'\n  };\n\n  function ecardSelectCard(num) {\n    ecardSelectedCard = num;\n    document.querySelectorAll('.ecard-option').forEach(el => el.classList.remove('selected'));\n    document.getElementById('ecardOpt' + num).classList.add('selected');\n    document.getElementById('ecardCardError').classList.remove('show');\n  }\n\n  function ecardHandleSubmit() {\n    const firstName = document.getElementById('ecardFirstName');\n    const lastName = document.getElementById('ecardLastName');\n    const honoringName = document.getElementById('ecardHonoringName');\n    const submitBtn = document.getElementById('ecardSubmitBtn');\n\n    \/\/ Reset errors\n    [firstName, lastName, honoringName].forEach(el => el.classList.remove('invalid'));\n    document.querySelectorAll('.ecard-error-msg').forEach(el => el.classList.remove('show'));\n\n    let valid = true;\n\n    if (!ecardSelectedCard) {\n      document.getElementById('ecardCardError').classList.add('show');\n      valid = false;\n    }\n    if (!firstName.value.trim()) {\n      firstName.classList.add('invalid');\n      document.getElementById('ecardFirstNameError').classList.add('show');\n      valid = false;\n    }\n    if (!lastName.value.trim()) {\n      lastName.classList.add('invalid');\n      document.getElementById('ecardLastNameError').classList.add('show');\n      valid = false;\n    }\n    if (!honoringName.value.trim()) {\n      honoringName.classList.add('invalid');\n      document.getElementById('ecardHonoringNameError').classList.add('show');\n      valid = false;\n    }\n\n    if (!valid) return;\n\n    const baseUrl = ecardUrls[ecardSelectedCard];\n    const params = new URLSearchParams({\n      full_name: firstName.value.trim() + ' ' + lastName.value.trim(),\n      honoring_name: honoringName.value.trim()\n    });\n\n    const imageUrl = baseUrl + '?' + params.toString();\n\n    \/\/ Update button state\n    submitBtn.textContent = 'Generating your E-Card...';\n    submitBtn.disabled = true;\n    submitBtn.style.opacity = '0.7';\n\n    \/\/ Fetch the image and trigger download\n    fetch(imageUrl)\n      .then(response => response.blob())\n      .then(blob => {\n        const blobUrl = URL.createObjectURL(blob);\n        const link = document.createElement('a');\n        link.href = blobUrl;\n        link.download = 'Greenpeace-Africa-Mothers-Day-ECard.png';\n        document.body.appendChild(link);\n        link.click();\n        document.body.removeChild(link);\n        URL.revokeObjectURL(blobUrl);\n\n        \/\/ Redirect after a short delay so the download starts\n        setTimeout(() => {\n          window.location.href = imageUrl;\n        }, 1500);\n      })\n      .catch(() => {\n        \/\/ If fetch fails (e.g. CORS), fall back to direct redirect\n        \/\/ The user can right-click and save from the redirected page\n        window.location.href = imageUrl;\n      });\n  }\n\n  \/\/ Clear errors on input\n  document.querySelectorAll('.ecard-form-card input').forEach(input => {\n    input.addEventListener('input', () => {\n      input.classList.remove('invalid');\n      input.nextElementSibling.classList.remove('show');\n    });\n  });\n<\/script>\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>CREATE YOUR MOTHER&#8217;S DAY E-CARD Didn&#8217;t receive our email? No worries! Pick a card design below, type in your details, and we&#8217;ll create a beautiful personalised e-card for you to download and share. Select Your Card 1 Card 1 2 Card 2 3 Card 3 Please select a card. Mother&#8217;s First Name Please enter mother&#8217;s [&hellip;]<\/p>\n","protected":false},"author":83,"featured_media":60647,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"ep_exclude_from_search":false,"p4_hide_page_title_checkbox":"on","p4_title":"","p4_subtitle":"","p4_description":"","background_image_id":"","background_image":"","p4_button_title":"","p4_button_link":"","p4_button_link_checkbox":"","p4_og_title":"","p4_og_description":"","p4_og_image":"","p4_og_image_id":"","p4_seo_canonical_url":"","p4_campaign_name":"","p4_local_project":"","p4_basket_name":"","p4_department":"","footnotes":""},"categories":[],"tags":[],"class_list":["post-60645","page","type-page","status-publish","has-post-thumbnail","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.greenpeace.org\/africa\/en\/wp-json\/wp\/v2\/pages\/60645","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.greenpeace.org\/africa\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.greenpeace.org\/africa\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.greenpeace.org\/africa\/en\/wp-json\/wp\/v2\/users\/83"}],"replies":[{"embeddable":true,"href":"https:\/\/www.greenpeace.org\/africa\/en\/wp-json\/wp\/v2\/comments?post=60645"}],"version-history":[{"count":2,"href":"https:\/\/www.greenpeace.org\/africa\/en\/wp-json\/wp\/v2\/pages\/60645\/revisions"}],"predecessor-version":[{"id":60649,"href":"https:\/\/www.greenpeace.org\/africa\/en\/wp-json\/wp\/v2\/pages\/60645\/revisions\/60649"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.greenpeace.org\/africa\/en\/wp-json\/wp\/v2\/media\/60647"}],"wp:attachment":[{"href":"https:\/\/www.greenpeace.org\/africa\/en\/wp-json\/wp\/v2\/media?parent=60645"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.greenpeace.org\/africa\/en\/wp-json\/wp\/v2\/categories?post=60645"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.greenpeace.org\/africa\/en\/wp-json\/wp\/v2\/tags?post=60645"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}