Embedding Forms In Your Website

You can embed your campaign gift or event registration forms in your own website using an iFrame.

iFrame Embed Code

Here is the embed code to embed in an iFrame (just replace the X in the URL with the the number of your form):

<iframe id="advform" width="100%" height="1000" onload="window.parent.parent.scrollTo(0,0)" src="https://secure.advancementform.com/giving_form/X" ></iframe>

OR

<iframe id="advform" width="100%" height="1000" onload="window.parent.parent.scrollTo(0,0)" src="https://secure.advancementform.com/registration_form/X" ></iframe>

You can adjust the height and width to what you want. Height should include the entire form even if some fields are un-hidden otherwise you will cut off the "Continue" button.

Passing URL Parameters To An iFrame

If you want to pass url parameters to the Advancement Form when it is embedded in an iFrame, you need to add the following javascript snippet to your host page. This script will copy the url parameters from the host page and pass them to the iframe. Please note, you need to make sure you have an id set on the iframe element and make sure that is referenced in the javascript. The examples on this page assume id="advform".  Lastly, make sure your javascript is BELOW your iFrame.

<script type="text/javascript">
  params = document.URL.split("?")[1];
  if (params !== undefined)
  {
    iframe = document.getElementById('advform');
    iframe.src = iframe.src + "?" + params;
  }
</script>


Hosting Multiple Forms On One Hosting Page

It is possible to use one hosting page for multiple forms and use a query string to select different forms. You need to omit the number of the form in the iframe embed code and add it as part of the URL query string for your hosting page.

Let's use id for our form number (this should not conflict with fields on your form). You now need to add this as a query string to your hosting page (where X equals your form number). For example:

https://mysite.org/mypage?id=X

To get this to work, remove the form number from the standard iframe embed code. For example:

<iframe id="advform" width="100%" height="1000" onload="window.parent.parent.scrollTo(0,0)" src="https://secure.advancementform.com/registration_form/" ></iframe>

You now need to add some additional javascript to extract the id from the URL and append it to the URL (or src attribute) in the iframe. For example:

<script type="text/javascript">
  // Function to extract values in the query string
  getParameterByName = function(name) {
    var regex, results;
    name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
    regex = new RegExp("[\\?&]" + name + "=([^&#]*)");
    results = regex.exec(location.search);
    if (results == null) {
      return "";
    } else {
      return decodeURIComponent(results[1].replace(/\+/g, " "));
    }
  };    
  
  params = document.URL.split("?")[1];
  if (params !== undefined)
  {
    id = getParameterByName('id');
    iframe = document.getElementById('advform');
    iframe.src = iframe.src + id + "?" + params;
  }
</script> 

Now you can access your different forms using the same hosting page. This is just one way to accomplish this. If your hosting page supports a dynamic language, you could use whatever technique you prefer to dynamically create the form the iFrame should display.


Last Updated: February 5, 2016