Buttons on Donation Form

Mike Richards

I have been tasked to update our forms a bit to be more visually appealing. Currently, the company is using radio buttons to select which amount the client is donating. However, they would like button.


Any help would be much appreciated.

Sara Hoffman

Hi Mike -


It's all about CSS and it's pretty easy to do. It's mostly about covering the radio with the label.


Here are some form you can steal code from: 
World Wildlife
Nature Conservency 
JDRF


Happy coding,

Sara

Marnee Beck

Sara Hoffman:

Hi Mike -


It's all about CSS and it's pretty easy to do. It's mostly about covering the radio with the label.


Here are some form you can steal code from: 
World Wildlife
Nature Conservency 
JDRF


Happy coding,

Sara

Hi Sara,


I tried adding the code and I am completely stuck. Can you help? I added the code from the Nature Conservancy but I can't seem to get it to work.  Here's the wrapper code that I am using:

<div class="wrapper-header clearfix">

<div class="nav-content">

<div class="logo">

      <img id="logo_image" src="../images/content/pagebuilder/logo-sample.gif" alt="RESOLVE Logo" />

      

    </div>

<ul class="nav-links">

<li><a class="nav-link" href="http://www.resolve.org/"><span style="font-size: 120%;"><strong>Home</strong></span></a></li>

<li><a class="nav-link" href="http://www.resolve.org/about/"><span style="font-size: 120%;"><strong>About Us</strong></span></a></li>

<li><a class="nav-link" href="http://www.resolve.org/about/contact.html"><span style="font-size: 120%;"><strong>Contact Us</strong></span></a></li>

</ul>

</div>

</div>

<p>

<span style="display: none;">25703</span></p>

<style type="text/css"><!--

#site-header { margin-bottom:0px; }

#site-header .wrapper { background-color:#fff; }

.coldesc-two #coltwo { padding:0 }

h3 { margin-top: 15px; }

#payment_typecc_type_row { display:none; }

div.responsive { font-size:1em; }

div.form-message-text { font-size: 10pt; }

#layout > .wrapper { padding-top: 0.25em; }

h2.section-header-container > #single_designee_row { display: none; }

#verisign embed, #verisign img  { width: 80px!important; }

label + div.donation-level-user-entered { margin: 0 }

div.donation-level-container { border: 0; margin:5px 0; float:left; position:relative; display:inline-block; /*width:125px;*/ }

input[type="radio"][id^="level_standardexpanded"] { /*opacity: 0;*/ position: relative; left: 24px; top:24px; }

label[for^="level_standardexpanded"] { background:url(http://familybuilding.resolve.org/images/wrapper/201310-DonationWrapper/radio_bg.png) top left repeat-x; border:solid 1px #ccc; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; padding: 12px 0; /*left: -18px;*/ /*top:-18px;*/ position: relative; width: 102px; display: inline-block; }

label[for^="level_standardexpanded"][for$="amount"] { display: none; }

input[id^="level_standardexpanded"][id$="amount"] { left: 8px; bottom: 36px; position: relative; width:72px; height: 15px; }

label[for="level_standardexpanded25703"] div.donation-level-label-container, label[for="level_standardexpanded30081"] div.donation-level-label-container { position: relative; top: 36px; text-align: left; font-size: 8.5pt; font-style: italic; }

label[for="level_standardauto_repeatname"] { display: inline-block; } 

label.custom-element-checkbox-label { display: inline-block; max-width: 250px; }

label.custom-element-checkbox-label[for="premium_opt_out_radio"] { max-width:100%; }

div.donation-level-container-generic-repeat { margin-top:25px; margin-bottom:15px; }

div.donation-level-amount-container, div.donation-level-label-container { width:102px; text-align:center; }

div.donation-level-label-input-container { width:0; height:0; }

#level_standard_row { width:100%; }

#level_standard_row span.FormLabelText { display:none; }

/*.selected-amount { background:red; } */

.selected-amount~label { background:url(http://familybuilding.resolve.org/images/content/pagebuilder/radio_bg_gr.png) bottom left repeat-x; border:solid 1px #00703c; }

#level_standard_row span.field-required { display:none; }

#level_standard_row, #level_standard_row div.form-content { margin-top:0; }

div.don-standard-levels { margin-top:-25px; margin-bottom:25px; }

input[name="currency_locale"] + div.form-row { width:1180px; margin-left:-142px; }

div.donation-form-content h2:first-of-type  { border-top:0; }

#responsive_payment_typecc_type_row, #responsive_payment_typepay_typeradio_row { width:inherit; margin:inherit; }

div.don-standard-levels { max-width:600px; }

#donation-bar { background-color:#e3e5d7; }

#donation-bar .donation-text { width: 650px; margin:8px 0 0 63px; }

#donation-bar .donation-image { margin-right:63px; }

#donation-bar .donation-image img { float:right; }

div.payment-field-container span.payment-type-option, div.payment-field-container span.internal-payment span.payment-type-option { border:solid 1px #ccc; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; }

div.payment-field-container span.payment-type-option.selected { background:url(http://familybuilding.resolve.org/images/content/pagebuilder/radio_bg_gr.png) bottom left repeat-x; border:solid 1px #00703c!important; }

div.payment-field-container span.internal-payment { border:0 }

div.payment-field-container span.external-payment span.payment-type-option { padding: 6px 5px 5px; }

div.html-caption-container { overflow:inherit; }


@media only screen and (max-width:1200px) {

    div.responsive { max-width:100%; margin: 0; width: 100%; padding: 0; }

    div.donation-form-content > div, div.donation-form-content > h2 { margin-left:50px; margin-center:50px; }

    input[name="currency_locale"] + div.form-row { width:100%; margin-left:0; }

    /*.donation-form-content { margin-left: 50px; }*/

    #layout .wrapper { padding:0; }

    #donation-bar .donation-text { width: 60%; margin:10px 0 0 50px; }

    #donation-bar .donation-image { margin-center:50px; width:30%; overflow:hidden; }

    .photoCreditImg img { max-width:inherit; }

    #donation-bar h1 { font-size:1.5em; }

}

@media only screen and (max-width:1100px) {

    #donation-bar .donation-image { margin-center: 0; }

}

@media only screen and (max-width: 800px) {

    #donation-bar .donation-text { max-width: 60%; }

}

@media only screen and (max-width: 700px){

    #donation-bar .donation-text { max-width: 100%; width: 100%; }

    div.donation-form-content > div, div.donation-form-content > h2 { margin-left:25px; margin-center:25px; }

    #donation-bar .donation-text { width: 80%; margin:5px 0 0 25px; }

}

@media only screen and (max-width: 700px){

    div.donation-form-content > div, div.donation-form-content > h2 { margin-left:15px; margin-center:15px; }

}

--></style>

<div class="wrapper-body">

<convio:session name="63" param="3"></convio:session>

</div>


I am not sure what I am doing wrong. Also, is possible to have the top of the donation form look like the top of our usual donation form (https://secure2.convio.net/res/admin/Donation2Preview?idb=1679364925&df_id=3876&mfc_pref=T&3876.donation=form1&idb=1237534715) ?


I'll owe you one if you can help me. Thanks in advance.