Honor/Memorial Donation form with eCards

Hi Carrie,

I think you are trying to do something like this:

https://secure3.convio.net/cmf/site/Donation2?df_id=4240&4240.donation=form1

We haven't made this live to our donors yet, but I think its what you are going for.

Let me know if it is and I can tell ya how I set it up.

Thanks,

Phil

Carrie Kran:

Possibly this is what we would like to do.  Do you have eCard options on the next page of the form?

Yes, just fill in dummy info on the first page and you can get to the next one and see the eCard options.

Use 4111111111111111 and Visa for the CC info

Philip Nawrocki:

Hi Carrie,

 

I think you are trying to do something like this:

https://secure3.convio.net/cmf/site/Donation2?df_id=4240&4240.donation=form1

 

We haven't made this live to our donors yet, but I think its what you are going for.

 

Let me know if it is and I can tell ya how I set it up.

 

Thanks,

 

Phil

Hi Philip,

We were looking to set up something similar to your example for our organization so thanks so much for your post!

One question though: how were you able to Show/Hide the eCard fields using the "Yes, Send an eCard" checkbox? We have that option for honor or memorial fields but not for eCard fields. Do you need to use jQuery to accomplish that?

Thanks so much!

Philip Nawrocki:

Hi Stephen,

 

We are using the following eCard fields on the left side when editing a donation form:

 

eCard - Send Checkbox

eCard Recipients

eCard - Selections

eCard - Subject

eCard - Mesage

eCard - Preview Button

 

Once moved to the right side in the form editor, we have them in the above order.

 

eCard - Send Checkbox and eCard - Selections are the two fields that really drive the form. Once you click the eCard - Send Checkbox on the actual donation form, the eCard -Selections does all the work. In the donation form editor, that is where you select the eCards that will appear. It is Step 3, eCard Selections. For Step 5 on the eCard - Selections field choose: Required only if sending an eCard.

 

Let me know if that helps and if you have any other questions.

 

Thanks Philip! We were able to set that up, but our eCard fields on the donation form always display and I see in the example you provided, you were able to hide those fields until someone checks the "Yes, I want to send an eCard" checkbox. I was wondering if you were able to do that through Luminate Online or if you had to create a script to accomplish that.

Thank you again for your help!

Philip Nawrocki:

It is all done in Luminate. No scripting needed.

 

On your eCard - Send Checkbox field, step 7, is that checked? If it is, that could be why you are seeing the fields.

No, we have that option unchecked. Strange - I'll keep digging, but I really appreciate your help.

Kent Gilliam:

Actually that's not a default function. It looks like someone added some JS to that element. You can see the full JS element around that check box if you view that page source:

 

<script type="text/javascript">
<!--
var comp = new ObservableComponent ('send_ecard', 'name');
comp.hide = function(_hidden)
{
var _display = _hidden ? 'none' : '';
set_display ('send_ecard_Row', _display);
this.disable_submit_flag (_hidden);
}
comp.set = function (_value)
{
if (document.getElementById('send_ecardname')) {
document.getElementById('send_ecardname').checked = _value;
this.fireEvent();
}
}
comp.get = function()
{
if (document.getElementById('send_ecardname'))
return document.getElementById('send_ecardname').checked;
}
comp.clear = function()
{
this.set(false);
}


//-->

 

Hi Kent,

That actually didn't work for me, but I found this script in the code that seems to work for us on every browser I tested it on so far:

<script type="text/javascript">
addOnLoadHandler(function(){
     showHideEcardFields();
     var eCardSendCheckbox=document.getElementById('send_ecardname');
     Utils.addEvent(eCardSendCheckbox,'click',showHideEcardFields);
});
function showHideEcardFields(){
     var eCardSendCheckbox=document.getElementById('send_ecardname');
     var eCardSendDateRow='ecard_send_date_Row';
     var eCardRecipientsRow='ecard_recpients_Row';
     var eCardSelectionsRow='select_grid_Row';
     var eCardSubjectRow='tribute_ecard_subject_Row';
     var eCardMessageRow='tribute_ecard_message_Row';
     var eCardSendCopyRow='e_card_copy_sender_Row';
     var eCardPreviewButtonRow='preview_button_Row';
     var eCardFields=new Array(eCardSendDateRow,eCardRecipientsRow,eCardSelectionsRow,eCardSubjectRow,eCardMessageRow,eCardSendCopyRow,eCardPreviewButtonRow);
     var i;
     if(eCardSendCheckbox.checked){
          for(i in eCardFields){
               if(document.getElementById(eCardFields[i])){
                    document.getElementById(eCardFields[i]).style.position='static';
                    document.getElementById(eCardFields[i]).style.top='0';
                    document.getElementById(eCardFields[i]).style.left='0';
               }
          }
     }
     else{
          for(i in eCardFields){
               if(document.getElementById(eCardFields[i])){
                    document.getElementById(eCardFields[i]).style.position='absolute';
                    document.getElementById(eCardFields[i]).style.top='0';
                    document.getElementById(eCardFields[i]).style.left='-999em';
               }
          }
     }
}
</script>

If you see any issues with using this, please let me know.

Much appreciated,

Stephen

Stephen Saporito:

No, we have that option unchecked. Strange - I'll keep digging, but I really appreciate your help.

Sorry about that Stephen.

I haven't looked at this donation form in a long time. You are correct. We do have some scripting. We usually put it directly under the "Page #" field. This time we had it at the very bottom.

Glad you figured it out!

Kent Gilliam:

Stephen Saporito:

Hi Kent,

 

That actually didn't work for me, but I found this script in the code that seems to work for us on every browser I tested it on so far:

 

<script type="text/javascript">
addOnLoadHandler(function(){
     showHideEcardFields();
     var eCardSendCheckbox=document.getElementById('send_ecardname');
     Utils.addEvent(eCardSendCheckbox,'click',showHideEcardFields);
});
function showHideEcardFields(){
     var eCardSendCheckbox=document.getElementById('send_ecardname');
     var eCardSendDateRow='ecard_send_date_Row';
     var eCardRecipientsRow='ecard_recpients_Row';
     var eCardSelectionsRow='select_grid_Row';
     var eCardSubjectRow='tribute_ecard_subject_Row';
     var eCardMessageRow='tribute_ecard_message_Row';
     var eCardSendCopyRow='e_card_copy_sender_Row';
     var eCardPreviewButtonRow='preview_button_Row';
     var eCardFields=new Array(eCardSendDateRow,eCardRecipientsRow,eCardSelectionsRow,eCardSubjectRow,eCardMessageRow,eCardSendCopyRow,eCardPreviewButtonRow);
     var i;
     if(eCardSendCheckbox.checked){
          for(i in eCardFields){
               if(document.getElementById(eCardFields[i])){
                    document.getElementById(eCardFields[i]).style.position='static';
                    document.getElementById(eCardFields[i]).style.top='0';
                    document.getElementById(eCardFields[i]).style.left='0';
               }
          }
     }
     else{
          for(i in eCardFields){
               if(document.getElementById(eCardFields[i])){
                    document.getElementById(eCardFields[i]).style.position='absolute';
                    document.getElementById(eCardFields[i]).style.top='0';
                    document.getElementById(eCardFields[i]).style.left='-999em';
               }
          }
     }
}
</script>

If you see any issues with using this, please let me know.

 

Much appreciated,

Stephen

 

Yeah... That bit I shared was just a small portion. There was some other stuff to it but it probably had stuff that you couldn't see on the live end when viewing the source. I just wanted to show that there was some JS that was controlling that and it wasn't a default functionality. Thanks a million for sharing this code though! It will be a big help as I know others would love this UX.

 

Thanks!