💁 Have fun with some live examples:

Launch form with custom button
Launch form with image link
Launch form with text link

🤓  Be careful: This is advanced, nerds only!

☝️Change all Form ID's in the embed code and element your are launching the form with. Change's required where you see "X".




1) First, edit the form embed code:

Add the useDefaultButton: false parameter. This will hide the default button. Place this embed code at the top of your HTML page body.

<script id="funraise-form-lib" src="https://d2n4tvy2wsd0oo.cloudfront.net/widget/common/1.3/funraise.min.js" type="text/javascript"></script>
<script id="funraise-form-XXXXXXXXXX" type="text/javascript">
    var f = new Funraise({
        id: 'XXXXXXXX-XX-XXXX-XXXX-XXXXXXXXXXXX:XX',
        isPopup: true,
        useDefaultButton: false /* this hides the default popup button */
    });
    f.init();
</script>
<div id="fc-XXXXXXXXXX"></div>




2) Next, use a custom element to launch the form:

Now that you've hidden the default button, you'll need to create a linked HTML element to launch the form. You can launch the form with a custom button, image, or text link! Change the Form ID and place the custom element anywhere you want it to appear in you HTML body.



Launch form with a custom button  
See example

<style>
.fun_btn_container {
  width: 100%;
  text-align: center;
}

.fun_btn {
  background-color: #008dd2;
  color: #ffffff;
  padding: 15px 20px 15px 20px;
  margin: 20px 0px 20px 0px;
  font-size: 1.2em;
  font-weight: 700;
  text-transform: none;
  border: none;
  border-radius: 3px;
}

.fun_btn:hover {
  background-color: #007cba;
  text-transform: none;
  color: #ffffff;
  cursor: pointer;
}
</style>

<div class="fun_btn_container">
  <button class="fun_btn" type="button" data-toggle="modal" data-target="#donateModal-XXXXXXXXXX">Donate Now</button>
</div>



Launch form with a image link  See example

<a class="fun_img_a" data-toggle="modal" data-target="#donateModal-XXXXXXXXXX" href="javascript:"><img class="fun_img" src="INSERT_YOUR_IMAGE_URL"/></a>



Launch form with a text link  See example

<a class="fun_text_a" data-toggle="modal" data-target="#donateModal-XXXXXXXXXX" href="javascript:">Donate Now</a>


😎 Pro-Tip: You can launch the form with a prefilled amount by adding the data-amount="1000" parameter to the link element. You can enter any amount. Do not use commas or any punctuation.

<button data-toggle="modal" data-amount="1000" data-target="#donateModal-XXXXXXXXXX" style="">Give $500</button>
Did this answer your question?