How do I add buttons to my donation forms that look good?

Marnee Beck · April 2016

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"></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.

Brian Mucha · April 2016

It would be easier for us to have something to see, and some specific questions.

Also we can't see your donation preview links, since we'd need to be logged in as admins in your instance. Publish and send links to the live form.

So is this your usual donation form?

https://secure2.convio.net/res/site/Donation2?df_id=3876&3876.donation=form1

Can you post a link to the problem form?

Sara Hoffman · April 2016

Hi Marnee -

Unfortuantely, we can't access the preview link you shared because we don't have access to your Convio instance.

You also don't necessarily have to add the code to the wrapper, if you want to play around in a test form you can insert a style tag into an HTML caption and the styles will only apply to that single form instead of having impacts across other forms that use that same wrapper.

The code below is built off of TNC's code and will get you pretty well along:



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

label[for^="level_standardexpanded"] {
  background-color: #ddd;
  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: 150px;
  display: inline-block;
}

div.donation-level-amount-container,
div.donation-level-label-container {
  text-align: center;
  display: inline-block;
}

div.donation-level-amount-container {
  text-indent: 10px;
}

div.donation-level-amount-container+div.donation-level-label-container {
  text-align: center;
  display: inline-block;
  margin: 0;
}

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

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-label-input-container {
  width: 0;
  height: 0;
}

#level_standard_row {
  width: 100%;
}

#level_standard_row span.FormLabelText {
  display: none;
}

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_standardexpanded5329"] div.donation-level-label-container {
  position: relative;
  top: 36px;
  text-align: left;
  font-size: 8.5pt;
  font-style: italic;
}

Please note that the "Other amount" field and label #'s are used in the styles. So you'll need to use that form's id in the place of "level_standardexpanded5329"

You'll also need some javascript to handle the radio button selection to happen behind the scenes of the donation amount label selection. For examples of how to handle this - view the source of this reusable from WWF or the script at ~line 3400 from TNC's form.

How do I add buttons to my donation forms that look good?

Comments

Categories