If a donor is making a one-time gift, you can ask if they'd like to consider making a recurring gift via a modal. You will want to add this to your page's content area in the WYSIWYG editor in HTML mode. Once it has been added, you can update the following sections with the text that you'd like the modal to show:
- Request modal title
- Request modal content
- Button to process as recurring
- Button to process normally
Be sure to only update these text areas with your content.
HTML for Request Modal
<div id="requestModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="requestModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<!-- Request Modal Title -->
<h4 class="modal-title" id="requestModalLabel">Request modal title</h4>
</div>
<div class="modal-body">
<!-- Request Modal Content -->
<p>Request modal content</p>
</div>
<div class="modal-footer">
<!-- Process as Recurring button -->
<button type="button" class="btn btn-modal-green" id="btnProcessRecurring">Button to process as recurring</button>
<!-- Process Normally button -->
<button type="button" class="btn btn-modal-white" id="btnProcessNormal">Button to process normally</button>
</div>
</div>
</div>
Also, be sure to add the following script to your page. You can find the area under the Design menu in the Add custom Javascript elements for your form option. Make sure to add it in the Code for your donation page text box!
Script for Request Modal
<script>
var RequestModal = function () { $('#requestModal').modal({ backdrop: 'static', keyboard: false }); };
</script>