How do I Embed a Registration Link into My Website

Helpdesk -

This guide sets out the steps you need to follow to embed the member registration forms, member login page and event page into your website.

Step 1 - Login to your account and click on Admin from the menu options at the top of the page:

Step 2 - Towards the bottom of the Settings page you will see 3 URLS. One for the registration form, one for the member login page and one for the events page:

Copy the URL you want to incorporate into your website.
 
If you would like to have an individual URL for each registration group, you will need to click the following option:
 
This will then give you a box to be able to select which URL you want:
 
(The highlighted button will copy the link for you.)
 
This can be useful if you want to navigate prospective registrations to a particular form first, for example, if you have sibling registrations, you may want to navigate them to the first member registration form so you can make sure they register the first member before adding siblings.
 
Another example of how this could be useful is to separate and direct prospective members to the right form from an area of your website. For example, if they are looking to register a for a pre-school session you can send them straight to the pre-school form, and those looking to get in for older classes can then be directed straight to that form.
 

Step 3 - Paste the URL into an <iframe> tag in the following manner (you can adjust width as per your preference). Please note that the id of the iframe should be ‘ifrmresize’ as shown below. 


Step 4 - Copy the <iframe> code into the body of your web page HTML source.  It should look like this. 



Step 5 – Copy below script into head of your web page HTML Source. 

<script src="https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/3.6.1/iframeResizer.min.js" type="text/javascript"></script>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>

<script>

        $(document).ready(function () {

            iFrameResize({ autoResize: true }, '#ifrmresize');

        })

</script>

 

It should now look like this. 

 

Note - To make the page load back at the top of the form you will also need to add the following script.

<script src="https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/3.6.1/iframeResizer.min.js" type="text/javascript"></script>

<script>

jQuery(document).ready(function ($) {

               iFrameResize({ 

                              autoResize: true,

                              initCallback: function(){

                                             $('html, body').animate({

                                                            scrollTop: $("#ifrmresize").offset().top

                                             }, 500);

                              },

               },

               '#ifrmresize');

});

</script>

An example of an embedded page can be found here: http://www.egka.org.uk/membership_online.php and here http://www.egka.org.uk/membership_
Have more questions? Submit a request

Comments

Powered by Zendesk