I've not yet been able to locate any examples of how the Contour forms are called in a content page. I've heard a few mentions of calling it from a template instead of from the content page - is this essential?

I know that I can Insert Macro > Insert Form from Contour, but when I do that directly into one of my pages, it shows up in the editor but not in preview or the front end. So I thought I'd look at the code that had been generated - however, I don't know what it's supposed to look like.

The code that was inserted by the macro looks like this:

<div class="umbMacroHolder" title="This is rendered content from macro" umbpageid="2061" umbversionid="84f79da2-dbab-4347-96ee-30519bf006d2" onresizestart="return false;" ismacro="true" umb_formguid="9b366fee-1c4f-4cf1-9455-f20b9bee090c" umb_macroalias="umbracoContour.RenderForm"><!-- startUmbMacro -->

<div id="contour">

<h4 class="contourPageName">Graduate application form</h4>

Please complete the following

<div class="contourField text firstname  mandatory"><!-- Our label --> First Name

<div><!-- The data entry control --></div>

<!-- Our Tooltip --> <!-- Validation --></div>

<div class="contourField text lastname  mandatory alternating"><!-- Our label --> Last Name

<div><!-- The data entry control --></div>

<!-- Our Tooltip --> <!-- Validation --></div>

<div class="contourField text phonenumber  mandatory"><!-- Our label --> Phone Number

<div><!-- The data entry control --></div>

<!-- Our Tooltip --> <!-- Validation --></div>

<div class="contourField text mobile  alternating"><!-- Our label --> Mobile

<div><!-- The data entry control --></div>

<!-- Our Tooltip --> <!-- Validation --></div>

<div class="contourField text email  mandatory"><!-- Our label --> Email

<div><!-- The data entry control --></div>

<!-- Our Tooltip --> <!-- Validation --></div>

<div class="contourField radiobuttonlist whichbestdescribesyoureligibilitytoworkinaustralia  mandatory alternating"><!-- Our label --> Which best describes your eligibility to work in Australia?

<div><!-- The data entry control --> <span class="radiobuttonlist">Citizen/Permanent Resident<br />Holder of a working visa<br />Require sponsorship<br />Other</span></div>

<!-- Our Tooltip --> <!-- Validation --></div>

<div class="contourField  pleaseattachyourcoverletter  mandatory"><!-- Our label --> Please attach your cover letter

<div><!-- The data entry control --> <span></span></div>

<!-- Our Tooltip --> <!-- Validation --></div>

<div class="contourField  pleaseattachyourresumé  mandatory alternating"><!-- Our label --> Please attach your resumé

<div><!-- The data entry control --> <span></span></div>

<!-- Our Tooltip --> <!-- Validation --></div>

<div class="contourField  pleaseattachyouracademicresultsothersupportingdocumentsifrelevant "><!-- Our label --> Please attach your academic results/other supporting documents (if relevant)

<div><!-- The data entry control --> <span></span></div>

<!-- Our Tooltip --> <!-- Validation --></div>

<div class="contourNavigation"></div>

</div>

<!-- endUmbMacro --></div>

Note: I'm a novice! I'm teaching myself as I go. So it may be obvious to others. But if I could see a working example that would be great. So far I can't find any documentation that outlines it, and every time somebody talks about it on the forums they refer to an approach without explicitly showing it on the post! :-)

I think it's something to do with needing some <form> tag, runat="server", that sort of thing... but I can't find the correct syntax anywhere.

Thanks in advance!