Donation Form - Layout

Katharine George:

I'm new to creating forms in Luminate. I found information that said I can't crate horizontal fields if I'm in responsive design on donation forms, but I"ve seen this for other orgs. Any tips?

Daniel Hartanto:
There are lot of potentials that you could do with the non-API form, as Erik has stated, with CSS and Javascript you could basically tweak the donation form look and feel to almost as many things you would want that to look like as possible.


Here are some examples that we have been doing with our Luminate Online Donation2 responsive form, all made possible by adding your own CSS/Javascript into the accompanying Page Wrapper (a PageWrapper act as template that wraps your donation form content where you could also add other reusable PageBuilders component to hold your static contents etc). They retained the responsiveness and are mobile friendly utilizing the Responsive Web Design (RWD) approach -- one instance/template serves both audiences, thus make the maintenance in long run manageable.


Thus feel free to take a look and resize your browser to see how the responsiveness works on those forms

• https://donations.diabetes.org/site/Donation2?df_id=19105&19105.donation=form1
• https://donations.diabetes.org/site/Donation2?df_id=19444&mfc_pref=T&19444.donation=form1
• https://donations.diabetes.org/site/Donation2?df_id=18864&18864.donation=form1​
• https://donations.diabetes.org/site/Donation2?df_id=18685&18685.donation=form1​ (prototype / demo)
• https://donations.diabetes.org/site/Donation2?df_id=19245&mfc_pref=T&19245.donation=form1​ (prototype/demo - animated gif background)
• https://donations.diabetes.org/site/Donation2?df_id=18685&18685.donation=form1&showbgvid=y​ (prototype/demo - background video loop)
• https://donations.diabetes.org/site/Donation2?df_id=19707&mfc_pref=T&19707.donation=form1&showmode=2   (this one single column donation form)
• https://donations.diabetes.org/site/Donation2?df_id=19707&mfc_pref=T&19707.donation=form1&showmode=2&showvid=y (this one single column with embedded video)

Technical note: some of the custom URL parameters used here (especially for the noted prototype) are there only to serve as toggle to quickly switch between modes, but in actuality, you store the configuration in a more permanent state using Javascript (as JSON object, or javascript variables etc) targeting those Donation Form ID specifics (DFID)

Here's another example of accompanying splash page that pass user entered / selected amount to the actual donation form.

This one showcase the ability to pass user entered amount into from the informational / landing page into the actual donation.
https://donations.diabetes.org/site/SPageServer/?pagename=Digital_Marketing_Landing_Prototype

While this one showcase, ability of user clicking on preset amount associated to the actual donation and the actual donation form will automatically select the associated user selected amount:
https://donations.diabetes.org/site/SPageServer/?pagename=Digital_Marketing_Landing_Prototype&presetAmt=y

These front-end codes (CSS/Javascript) are mostly viewable/retraceable from the browser using the Developer Tool (press F12 on most of nowadays browsers, and you could see the co-relation between these CSS, JS, and the HTML DOM elements), hence giving ideas to your web developer on how to reverse engineer, replicates / reproduce so long that they are really into digging and having their own hands on the technical stuff.


Once you have exhausted the options of going the non-API / CSS - JS approach, you could also take a look on more advanced API form that allows more flexible/full control as Romany has stated.


Hope it helps.


EDIT Note: Adding one column donation form samples and technical notes.


regards,

Daniel