Dynamic templates for the form pages
You might have a situation where you need to use the same form a few different ways and you need the landing page for the form to have a different site template for each use.
An example situation would be that you want a form to open up in a lightbox or modal overlay. The form will be submitted via AJAX and the landing page will be returned and loaded in the same lightbox. However, to develop with best practices the form should also be accessible if the user has Javascript turned off. In that case the form would be submitted like a normal form post and the landing page will most likely have a different look then if it was loaded in the lightbox.
There are 2 things that need to be to make the user interface handle the Javascript and non-Javascript methods.
- The site template that's used to display the form in the lightbox needs to be different from the template to display the form on a regular page.
- The site template that's used to display the landing page in the lightbox needs to be different from the template to display the landing page as a regular page.
Use a different template for the form
When you create the page for the form use a site template to display the form as a regular page. To specify a different site template for the form in the lightbox use the special tid parameter in the URL to the page.
Example: <a href="/form-page?tid=3">View Form</a>
The tid URL parameter tells the system to use the site template that has an ID of 3 instead of the site template that is normally assigned to the page.
Because the tid URL parameter should only be used if Javascript is enabled you should use Javascript to adjust to URL in the link tag to add that parameter.
Below is an example using jQuery to modify the link tag URL. In this case the form page uses a site template whose ID is 4.
$(document).ready(function() {
$("a[href='/form-page']").attr('href', '/form-page?tid=4');
});
Use a different template for the landing page
To tell the landing page to use a specific template you need to pass through a hidden form field whose name is aptid.
Example: <input type="hidden" name="aptid" value="3" /> .
Like the tid URL parameter you should use Javascript to add this form field because in this situation it only applies if the user has Javascript enabled.
Below is an example using jQuery to add the hidden form field to the form. In this case both the landing page and the form page use a site template with an ID of 4.
$(document).ready(function() {
$('form').append('<input type="hidden" name="aptid" value="4" />').attr('action', '/form-page?tid=4');
});