|
|
|
|
|
|
|
|
|
<templates:section paddingTop="8rem" paddingBottom="8rem" paddingLeft="1rem" paddingRight="1rem" bgimage="https://images.unsplash.com/photo-1605309340332-4e5110465727?ixid=Mnw2ODg1fDB8MXxzZWFyY2h8Mnx8cGFyaXMlMjBsb2NrfGVufDB8fHx8MTY3Njg0OTAwNQ&" color="#ffffff" contentsize="md" bgposition="bottom left" bgwashcolor="#333333" bgwashopacity="50" bgimageblur="1">
<templates:row>
<templates:column width="6">
<h1>Donate and support us</h1>
<p style="text-align: left;">
Alliance Française de San Antonio counts on generous contributions from community members to offer French language classes and cultural
activities in the community.
</p>
<p style="text-align: left;">
Your support makes activities like the French films, conversation, book club, and Journée de la Francophonie immersion day possible.
Consider making a tax-deductible donation in any amount to Alliance Française de San Antonio.
</p>
</templates:column>
<templates:column width="5">
<p><br /></p>
</templates:column>
</templates:row>
<templates:row style="text-align: left;">
<templates:column width="6"></templates:column>
<templates:column width="6"></templates:column>
</templates:row>
</templates:section>
<templates:section paddingTop="6rem" paddingBottom="6rem" paddingLeft="2rem" paddingRight="2rem">
<templates:row>
<templates:column width="5">
<h2>Support Alliance Française de San Antonio today</h2>
<p>
Your gift will support the Alliance Française with key programing that brings French language and culture to San Antonio, including:
</p>
<ul>
<li>
The annual Journée de la Francophonie, a day of French-related immersion and enrichment (co-sponsored with UTSA) to inspire and encourage
French-language high school students from several San Antonio school districts
</li>
<li>On-air advertising on Texas Public Radio, to promote increased membership and French-language student enrollment</li>
<li>French-language classes in Spring, Summer, and Fall</li>
</ul>
</templates:column>
<templates:column width="6">
<standard:image width="100%" maintainaspect="crop" src="/media/website_pages/donate/335A0852-scaled.jpeg" />
</templates:column>
</templates:row>
</templates:section>
<templates:section paddingTop="0rem" paddingLeft="2rem" paddingRight="2rem" paddingBottom="6rem">
<forms:form id="donation_form" recordsubmissions="true" onsubmitemail="support@oncord.com" onsubmitemailsubject="New Recurring Donation" contactmode="store" onsubmitredirect="/donate/success/?sale_id=[? $sale_id ?]">
<ajax:event id="donation_frequency_ajaxevent" updateregions="donation_frequency_ajaxregion,donation_paymentmethod_ajaxregion" />
<div class="donation-radio">
<h3 style="text-align: center;">
<small>Your generous contribution provides funding for our cultural programs. Consider making a tax-deductible donation in any amount.</small>
</h3>
<p><br /></p>
<ul>
<logic:if test="$_GET['interval'] == 'monthly'">
<li>
<forms:radiobutton id="donation_frequency_once" label="Once off" name="donation_frequency" onclickajax="donation_frequency_ajaxevent" valuechecked="once" allowuncheck="true"/>
</li>
</logic:if>
<logic:else>
<li>
<forms:radiobutton id="donation_frequency_once" label="Once off" name="donation_frequency" onclickajax="donation_frequency_ajaxevent" valuechecked="once" value="once" allowuncheck="true"/>
</li>
</logic:else>
<li style="padding-left: 20px; padding-right: 10px">or</li>
<logic:if test="$_GET['interval'] == 'monthly'">
<li>
<forms:radiobutton id="donation_frequency_monthly" label="Monthly" name="donation_frequency" onclickajax="donation_frequency_ajaxevent" valuechecked="monthly" value="monthly" allowuncheck="true"/>
</li>
</logic:if>
<logic:else>
<li>
<forms:radiobutton id="donation_frequency_monthly" label="Monthly" name="donation_frequency" onclickajax="donation_frequency_ajaxevent" valuechecked="monthly" allowuncheck="true"/>
</li>
</logic:else>
</ul>
</div>
<br />
<h4 style="text-align: center"><strong>Select a Donation Amount:</strong></h4>
<div class="donation-amt-container">
<div class="donation-amt" data-value="25" onclick="donationAmountClick(this)">
<h3>$25</h3>
</div>
<div class="donation-amt" data-value="50" onclick="donationAmountClick(this)">
<h3>$50</h3>
</div>
<div class="donation-amt" data-value="75" onclick="donationAmountClick(this)">
<h3>$75</h3>
</div>
</div>
<br />
<div class="donation-other">
<div class="donation-other-content">
<ul>
<li>
Or
<strong>donate another amount:</strong>
</li>
<li>
<standard:icon style="width: 32px; height: 32px; color: #cf2032" library="fontawesome" iconstyle="solid" iconname="dollar-sign" />
<ajax:event id="donation_amount_ajaxevent" updateregions="donation_paymentmethod_ajaxregion" />
<forms:editbox id="donation_amount" value="[? $_GET['donation_amount'] ?]" datacolumn="donation_amount" validations="mandatory" placeholder="Other" onfocus="donationClearSelection()" onchangeajax="donation_amount_ajaxevent" completecart="true" showpaymentformonzerovalue="true" />
<ajax:region id="donation_frequency_ajaxregion">
<logic:if test="$donation_frequency_monthly.checked">
<span style="display: block; min-width: 100px;">/ mo</span>
</logic:if>
</ajax:region>
</li>
</ul>
</div>
</div>
<br />
<br />
<div class="donation-gift">
<fieldset>
<legend>
<h3 style="margin: 0;">Your Information</h3>
</legend>
<templates:row>
<templates:column width="6">
<forms:row label="First Name" type="one_column">
<forms:editbox id="contact_first_name" datacolumn="contact_first_name" />
</forms:row>
</templates:column>
<templates:column width="6">
<forms:row type="one_column"label="Last Name"><forms:editbox id="contact_last_name" datacolumn="contact_last_name" /></forms:row>
</templates:column>
</templates:row>
<templates:row>
<templates:column width="6">
<forms:row type="one_column"label="E-Mail Address"><forms:editbox id="contact_email" datacolumn="contact_email" /></forms:row>
</templates:column>
<templates:column width="6">
<forms:row type="one_column"label="Phone Number"><forms:editbox id="contact_phone" datacolumn="contact_phone" /></forms:row>
</templates:column>
</templates:row>
<logic:variable value="[? \Framework\HTTP\Request::getCountryCodeFromIP() ?]" as="ipcountry" />
<forms:address id="contact_address" rowtype="one_column" /><br />
</fieldset>
<br />
<br />
<fieldset>
<legend>
<h3 style="margin: 0;">Billing Details</h3>
</legend>
<br />
<ajax:region id="donation_paymentmethod_ajaxregion">
<logic:if test="floatval($donation_amount.value) >= 1">
<forms:paymentmethod productid="[? ($donation_frequency_monthly.checked) ? 387 : 386 ?]" amount="[? $donation_amount.value ?]" recurringamount="[? ($donation_frequency_monthly.checked) ? ($donation_amount.value) : null ?]" recurringinterval="month" />
</logic:if>
<logic:else>
<h3><small><span style="color: #cf2032;">Please enter a donation amount above.</span></small></h3>
</logic:else>
</ajax:region>
</fieldset>
</div>
</forms:form>
</templates:section>
<templates:section paddingTop="8rem" paddingBottom="8rem" paddingLeft="1rem" paddingRight="1rem" bgimage="https://images.unsplash.com/photo-1605309340332-4e5110465727?ixid=Mnw2ODg1fDB8MXxzZWFyY2h8Mnx8cGFyaXMlMjBsb2NrfGVufDB8fHx8MTY3Njg0OTAwNQ&" color="#ffffff" contentsize="md" bgposition="bottom left" bgwashcolor="#333333" bgwashopacity="50" bgimageblur="1">
<templates:row>
<templates:column width="6">
<h1>Donate and support us</h1>
<p style="text-align: left;">
Alliance Française de San Antonio counts on generous contributions from community members to offer French language classes and cultural
activities in the community.
</p>
<p style="text-align: left;">
Your support makes activities like the French films, conversation, book club, and Journée de la Francophonie immersion day possible.
Consider making a tax-deductible donation in any amount to Alliance Française de San Antonio.
</p>
</templates:column>
<templates:column width="5">
<p><br /></p>
</templates:column>
</templates:row>
<templates:row style="text-align: left;">
<templates:column width="6"></templates:column>
<templates:column width="6"></templates:column>
</templates:row>
</templates:section>
<templates:section paddingTop="6rem" paddingBottom="6rem" paddingLeft="2rem" paddingRight="2rem">
<templates:row>
<templates:column width="5">
<h2>Support Alliance Française de San Antonio today</h2>
<p>
Your gift will support the Alliance Française with key programing that brings French language and culture to San Antonio, including:
</p>
<ul>
<li>
The annual Journée de la Francophonie, a day of French-related immersion and enrichment (co-sponsored with UTSA) to inspire and encourage
French-language high school students from several San Antonio school districts
</li>
<li>On-air advertising on Texas Public Radio, to promote increased membership and French-language student enrollment</li>
<li>French-language classes in Spring, Summer, and Fall</li>
</ul>
</templates:column>
<templates:column width="6">
<standard:image width="100%" maintainaspect="crop" src="/media/website_pages/donate/335A0852-scaled.jpeg" />
</templates:column>
</templates:row>
</templates:section>
<templates:section paddingTop="0rem" paddingLeft="2rem" paddingRight="2rem" paddingBottom="6rem">
<forms:form id="donation_form" recordsubmissions="true" onsubmitemail="support@oncord.com" onsubmitemailsubject="New Recurring Donation" contactmode="store" onsubmitredirect="/donate/success/?sale_id=[? $sale_id ?]">
<ajax:event id="donation_frequency_ajaxevent" updateregions="donation_frequency_ajaxregion,donation_paymentmethod_ajaxregion" />
<div class="donation-radio">
<h3 style="text-align: center;">
<small>Your generous contribution provides funding for our cultural programs. Consider making a tax-deductible donation in any amount.</small>
</h3>
<p><br /></p>
<ul>
<logic:if test="$_GET['interval'] == 'monthly'">
<li>
<forms:radiobutton id="donation_frequency_once" label="Once off" name="donation_frequency" onclickajax="donation_frequency_ajaxevent" valuechecked="once" allowuncheck="true"/>
</li>
</logic:if>
<logic:else>
<li>
<forms:radiobutton id="donation_frequency_once" label="Once off" name="donation_frequency" onclickajax="donation_frequency_ajaxevent" valuechecked="once" value="once" allowuncheck="true"/>
</li>
</logic:else>
<li style="padding-left: 20px; padding-right: 10px">or</li>
<logic:if test="$_GET['interval'] == 'monthly'">
<li>
<forms:radiobutton id="donation_frequency_monthly" label="Monthly" name="donation_frequency" onclickajax="donation_frequency_ajaxevent" valuechecked="monthly" value="monthly" allowuncheck="true"/>
</li>
</logic:if>
<logic:else>
<li>
<forms:radiobutton id="donation_frequency_monthly" label="Monthly" name="donation_frequency" onclickajax="donation_frequency_ajaxevent" valuechecked="monthly" allowuncheck="true"/>
</li>
</logic:else>
</ul>
</div>
<br />
<h4 style="text-align: center"><strong>Select a Donation Amount:</strong></h4>
<div class="donation-amt-container">
<div class="donation-amt" data-value="25" onclick="donationAmountClick(this)">
<h3>$25</h3>
</div>
<div class="donation-amt" data-value="50" onclick="donationAmountClick(this)">
<h3>$50</h3>
</div>
<div class="donation-amt" data-value="75" onclick="donationAmountClick(this)">
<h3>$75</h3>
</div>
</div>
<br />
<div class="donation-other">
<div class="donation-other-content">
<ul>
<li>
Or
<strong>donate another amount:</strong>
</li>
<li>
<standard:icon style="width: 32px; height: 32px; color: #cf2032" library="fontawesome" iconstyle="solid" iconname="dollar-sign" />
<ajax:event id="donation_amount_ajaxevent" updateregions="donation_paymentmethod_ajaxregion" />
<forms:editbox id="donation_amount" value="[? $_GET['donation_amount'] ?]" datacolumn="donation_amount" validations="mandatory" placeholder="Other" onfocus="donationClearSelection()" onchangeajax="donation_amount_ajaxevent" completecart="true" showpaymentformonzerovalue="true" />
<ajax:region id="donation_frequency_ajaxregion">
<logic:if test="$donation_frequency_monthly.checked">
<span style="display: block; min-width: 100px;">/ mo</span>
</logic:if>
</ajax:region>
</li>
</ul>
</div>
</div>
<br />
<br />
<div class="donation-gift">
<fieldset>
<legend>
<h3 style="margin: 0;">Your Information</h3>
</legend>
<templates:row>
<templates:column width="6">
<forms:row label="First Name" type="one_column">
<forms:editbox id="contact_first_name" datacolumn="contact_first_name" />
</forms:row>
</templates:column>
<templates:column width="6">
<forms:row type="one_column"label="Last Name"><forms:editbox id="contact_last_name" datacolumn="contact_last_name" /></forms:row>
</templates:column>
</templates:row>
<templates:row>
<templates:column width="6">
<forms:row type="one_column"label="E-Mail Address"><forms:editbox id="contact_email" datacolumn="contact_email" /></forms:row>
</templates:column>
<templates:column width="6">
<forms:row type="one_column"label="Phone Number"><forms:editbox id="contact_phone" datacolumn="contact_phone" /></forms:row>
</templates:column>
</templates:row>
<logic:variable value="[? \Framework\HTTP\Request::getCountryCodeFromIP() ?]" as="ipcountry" />
<forms:address id="contact_address" rowtype="one_column" /><br />
</fieldset>
<br />
<br />
<fieldset>
<legend>
<h3 style="margin: 0;">Billing Details</h3>
</legend>
<br />
<ajax:region id="donation_paymentmethod_ajaxregion">
<logic:if test="floatval($donation_amount.value) >= 1">
<forms:paymentmethod productid="[? ($donation_frequency_monthly.checked) ? 387 : 386 ?]" amount="[? $donation_amount.value ?]" recurringamount="[? ($donation_frequency_monthly.checked) ? ($donation_amount.value) : null ?]" recurringinterval="month" />
</logic:if>
<logic:else>
<h3><small><span style="color: #cf2032;">Please enter a donation amount above.</span></small></h3>
</logic:else>
</ajax:region>
</fieldset>
</div>
</forms:form>
</templates:section>
|
|
{"togglable_footerCTA":null,"togglable_memberCTA":null,"togglable_testCTA":null,"togglable_newslettercta":"on"}
{"togglable_footerCTA":null,"togglable_memberCTA":null,"togglable_testCTA":null,"togglable_newslettercta":"on"}
|
|
/* Donation Frequency Radios */
.donation-radio ul li label {
padding-left: 10px;
}
input[type=radio] {
margin-top: 5px;
}
.donation-radio {
background: #fafafa;
padding: 20px;
}
.donation-radio ul {
list-style: none;
text-align: center;
padding: 0;
margin: 0;
}
.donation-radio ul li {
display: inline;
}
/* Donaination amount flex container */
.donation-amt-container
{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin: -10px;
}
/* Donation amount boxes */
.donation-amt
{
flex-grow: 1;
display: flex;
flex-direction: column;
justify-content: center;
width: 350px;
margin: 10px;
background-color: #dc1836;
background-image: url(/media/website_pages/donate/box.png);
text-align: center;
color: white;
min-height: 180px;
background-size: 75%;
background-position: right bottom;
background-repeat: no-repeat;
position: relative;
cursor: pointer;
transition: .2s all linear;
}
.donation-amt p {
padding: 0 30px;
flex-shrink: 1;
width: auto;
}
.donation-amt h3 {
font-size: 2.8rem;
font-weight: 600;
flex-shrink: 1;
width: auto;
}
/* Donation amount - selected */
.donation-amt-selected {
background-color: #ed9635;
}
.donation-amt-selected::after {
content: "SELECTED";
position: absolute;
top: 10px;
right: 10px;
font-size: 11px;
background: #dc1836;
padding: 5px 10px;
border-radius: 0;
font-weight: bolder;
}
select {
display: inline;
}
.donation-gift .formRow.formRow2Col, .donation-gift .formRow {
background: transparent;
}
.donation-other-content ul li {
display: flex;
justify-content: center;
align-items: center;
gap: 1rem;
}
.donation-other-content input[type=text]{
}
.donation-other-content button {
margin-bottom: 0px !important;
}
.donation-gift button[type=submit], .donation-other-content button {
outline: none;
border: transparent;
color: #fff;
padding: 10px 25px 8px 25px;
border-radius: 50px;
margin: 2px;
cursor: pointer;
text-transform: uppercase;
font-weight: bold;
font-size: 14px;
margin-bottom: 50px;
}
.donation-gift strong {
color: #111;
}
.donation-gift small {
color: #696969;
}
.donation-other-content ul {
list-style: none;
padding: 0px;
margin: 0 auto;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
gap: 1rem;
}
.donation-gift input[type=checkbox] {
margin-top: 7px;
}
fieldset {
border: 2px solid #333333;
}
/* Mobile optimise */
@media(max-width: 991px) {
.donation-other-content ul li {
display: table;
padding: 10px 0;
margin: 0 auto;
}
}
@media(max-width: 768px) {
.donation-radio ul li label {
padding-left: 0;
}
.donation-gift {
padding: 20px;
}
.donation-other {
padding: 20px;
}
}
@media (max-width: 500px) {
.donation-radio ul li {
display: block;
text-align: center;
padding: 0;
}
.donation-amt {
max-height: 150px;
min-height: 150px;
}
#donation_frequency_monthly_tooltip {
margin-left: 0px;
}
#donation_frequency_monthly_tooltip.donation_frequency_monthly_tooltip_show {
max-width: 100%;
display: show !important;
transform: scale(1);
white-space: unset;
}
#donation_frequency_monthly_tooltip:before {
top: 0;
left: 0;
}
}
.donation-other {
background: #efefef;
padding: 20px 60px;
}
/* Donation Frequency Radios */
.donation-radio ul li label {
padding-left: 10px;
}
input[type=radio] {
margin-top: 5px;
}
.donation-radio {
background: #fafafa;
padding: 20px;
}
.donation-radio ul {
list-style: none;
text-align: center;
padding: 0;
margin: 0;
}
.donation-radio ul li {
display: inline;
}
/* Donaination amount flex container */
.donation-amt-container
{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin: -10px;
}
/* Donation amount boxes */
.donation-amt
{
flex-grow: 1;
display: flex;
flex-direction: column;
justify-content: center;
width: 350px;
margin: 10px;
background-color: #dc1836;
background-image: url(/media/website_pages/donate/box.png);
text-align: center;
color: white;
min-height: 180px;
background-size: 75%;
background-position: right bottom;
background-repeat: no-repeat;
position: relative;
cursor: pointer;
transition: .2s all linear;
}
.donation-amt p {
padding: 0 30px;
flex-shrink: 1;
width: auto;
}
.donation-amt h3 {
font-size: 2.8rem;
font-weight: 600;
flex-shrink: 1;
width: auto;
}
/* Donation amount - selected */
.donation-amt-selected {
background-color: #ed9635;
}
.donation-amt-selected::after {
content: "SELECTED";
position: absolute;
top: 10px;
right: 10px;
font-size: 11px;
background: #dc1836;
padding: 5px 10px;
border-radius: 0;
font-weight: bolder;
}
select {
display: inline;
}
.donation-gift .formRow.formRow2Col, .donation-gift .formRow {
background: transparent;
}
.donation-other-content ul li {
display: flex;
justify-content: center;
align-items: center;
gap: 1rem;
}
.donation-other-content input[type=text]{
}
.donation-other-content button {
margin-bottom: 0px !important;
}
.donation-gift button[type=submit], .donation-other-content button {
outline: none;
border: transparent;
color: #fff;
padding: 10px 25px 8px 25px;
border-radius: 50px;
margin: 2px;
cursor: pointer;
text-transform: uppercase;
font-weight: bold;
font-size: 14px;
margin-bottom: 50px;
}
.donation-gift strong {
color: #111;
}
.donation-gift small {
color: #696969;
}
.donation-other-content ul {
list-style: none;
padding: 0px;
margin: 0 auto;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
gap: 1rem;
}
.donation-gift input[type=checkbox] {
margin-top: 7px;
}
fieldset {
border: 2px solid #333333;
}
/* Mobile optimise */
@media(max-width: 991px) {
.donation-other-content ul li {
display: table;
padding: 10px 0;
margin: 0 auto;
}
}
@media(max-width: 768px) {
.donation-radio ul li label {
padding-left: 0;
}
.donation-gift {
padding: 20px;
}
.donation-other {
padding: 20px;
}
}
@media (max-width: 500px) {
.donation-radio ul li {
display: block;
text-align: center;
padding: 0;
}
.donation-amt {
max-height: 150px;
min-height: 150px;
}
#donation_frequency_monthly_tooltip {
margin-left: 0px;
}
#donation_frequency_monthly_tooltip.donation_frequency_monthly_tooltip_show {
max-width: 100%;
display: show !important;
transform: scale(1);
white-space: unset;
}
#donation_frequency_monthly_tooltip:before {
top: 0;
left: 0;
}
}
.donation-other {
background: #efefef;
padding: 20px 60px;
}
|
|
// Helper function to clear selection
function donationClearSelection()
{
var arrSelected = document.getElementsByClassName('donation-amt-selected');
for (var i = arrSelected.length-1; i >= 0; i--)
{
arrSelected[i].classList.remove('donation-amt-selected');
}
}
// Amount buttons on click
function donationAmountClick(nElement)
{
donationClearSelection();
var nAmount = document.getElementById('donation_amount');
nAmount.value = nElement.getAttribute('data-value');
nElement.classList.add('donation-amt-selected');
// Trigger onchange
var event;
if (typeof window.Event == 'function') { event = new Event('change'); }
else { event = document.createEvent('Event'); event.initEvent('change', true, true, true);}
nAmount.dispatchEvent(event);
}
// Helper function to clear selection
function donationClearSelection()
{
var arrSelected = document.getElementsByClassName('donation-amt-selected');
for (var i = arrSelected.length-1; i >= 0; i--)
{
arrSelected[i].classList.remove('donation-amt-selected');
}
}
// Amount buttons on click
function donationAmountClick(nElement)
{
donationClearSelection();
var nAmount = document.getElementById('donation_amount');
nAmount.value = nElement.getAttribute('data-value');
nElement.classList.add('donation-amt-selected');
// Trigger onchange
var event;
if (typeof window.Event == 'function') { event = new Event('change'); }
else { event = document.createEvent('Event'); event.initEvent('change', true, true, true);}
nAmount.dispatchEvent(event);
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|