For some of our larger events, we create a branded and nice-looking marketing page (or event landing page, if you will).

After going to the effort of making a nice page specific to an event with related images, styling, etc. - we felt it was a little klunky to bounce the user to a generic Registration form to signup for that event.  So, we wanted to be able to embed the registration form right in this marketing page.  With the embedded form, we could then stylize that form to look like it was specific to that event (because well, now it is).

Demo:


Adding a Registration Entry block to our event marketing page was easy.  Unfortunately, you end up with this:

NoRegistration.JPG


The missing bits of information for this block are the RegistrationInstanceId and/or the Slug.  (These are defined when you create the Registration Instance and Linkages).  Unfortunately the Registration Entry block does not provide a setting where you can set these necessary parameters on a block basis (a future enhancement maybe...?) - the block expects to receive those from URL Parameters.

Lava to the Rescue - we can use a page redirect to add the URL Page Parameters to make the block happy, and the end user doesn't even have to know.  Secondly, by using a Lava Shortcode, we can make this ultra easy to replicate for various events or pages.


Creating the Shortcode:

1. Navigate to Admin Tools -> CMS Configuration, Lava Shortcodes.

2. Create a new Shortcode by clicking the + on the top right-hand corner.  Configure as follows:

Name: Registration Entry Redirect

Tag Name: registrationentryredirect

Description:
When used on a page, will check that there is a RegistrationInstanceId in the page URL (required by a Registration Entry block). If there is no RegistrationInstanceId in the URL, it will redirect to the same page, appending the RegistrationInstanceId query parameter.

Documentation: (HTML):

<p>Basic Usage:</p>
<pre>{[registrationentryredirect registrationinstanceid:'99' slug:'myevent' autoscroll:'self']}</pre>
<p>This Lava, when used either in any HTML block (or in the Registration Entry block Pre/Post HTML sections), will redirect, if necessary, to add the RegistrationInstanceId parameter. There are the following options:</p>
<ul>
<li><b>registrationinstanceid</b>&nbsp;- The Registration Instance id</li>
<li><b>slug</b> - The Slug to append</li> <li><b>autoscroll </b>- A selector to automatically scroll to when the form is in-progress.&nbsp; Use 'self' for the registration form itself</li> </ul>

Shortcode Markup:

{% if autoscroll != empty %}
{% if autoscroll == "self" %}{% assign autoscroll = "#" | Append:uniqueid | Append:' ~ div' %}{% endif %}
<script id="{{ uniqueid }}">
    function scrollToRegistration() {
        if (window.location.hash) {
            $("{{ autoscroll }}").get(0).scrollIntoView();
        }
    }
    $(function() {
        // Need 1ms delay wrapper, or this doesn't work...
        // Attach a click handler to scroll when they click Next - in case there is a validation error
        Sys.Application.add_load(function() {
            $(".actions a").click(function() {
                setTimeout(scrollToRegistration, 1);
            });
        });
        // Scroll on postback end request
        Sys.WebForms.PageRequestManager.getInstance().add_endRequest(function() {
            setTimeout(scrollToRegistration, 1);
        });
    });
</script>
{% endif %}

Parameters:

registrationinstanceid | (no value)

slug | (no value)

autoscroll | self