Easy Umbraco Forms


I am currently redeveloping the website of the company I work for using Umbraco. There are a number of pages that have different requirements for forms such as a contact form, support form, and contract renewal form. The easiest way to add forms to content pages is to create macros that can be inserted via the editor. This way the content editor has complete control over where they will place the form for maximum effect.

To create a form macro is straight forward enough. Log onto Umbraco and go to the developer section. Create a new Scripting File, and make sure that the Create Macro checkbox is ticked. Once your Razor file has been created, you can then enter the source code and save it. When you are done, select the content tab and click on the file you want to add the form to. Select the Content tab and place your cursor where you want to add the form. Then insert the macro that you have just created and publish your page. That’s all there is to it. The sample source code below is for a simple contract renewal form.

@if (!IsPost)
{
  <form method="POST">
     <table>
       <caption>Renew your contract</caption>
       <tr>
         <td>Your Name:</td>
         <td><input type="text" name="name"/></td>
       </tr>
       <tr>
         <td>Your Company:</td>
         <td><input type="text" name="company"/></td>
       </tr>
       <tr>
         <td>The month your contract runs out:</td>
         <td>
           <select name="expiryMonth">
             <option>January</option>
             <option>February</option>
             <option>March</option>
             <option>April</option>
             <option>May</option>
             <option>June</option>
             <option>July</option>
             <option>August</option>
             <option>September</option>
             <option>October</option>
             <option>November</option>
             <option>December</option>
           </select>
         </td>
       </tr>
       <tr>
         <td>Your Email Address:</td>
         <td><input type="text" name="emailAddress"/></td>
       </tr>
       <tr>
         <td>Your Telephone Number:</td>
         <td><input type="text" name="telephoneNumber"/></td>
       <tr>
       <tr>
         <td colspan="2"><input type="submit" name="submit" value="Submit" /></td>
       <tr>
     </table>
</form>
}
else
{
var name = Request["name"];
var company = Request["company"];
var expiryMonth = Request["expiryMonth"];
var emailAddress = Request["emailAddress"];
var telephoneNumber = Request["telephoneNumber"];
var message = "Contract Renewal: Name: " + @name + ", Company: " + @company + ",
 Expiry Month: " + @expiryMonth + ", Email Address: " + @emailAddress + ", Telephone Number: " +
@telephoneNumber;  umbraco.library.SendMail(emailAddress,"info@company.com",
"Contract Renewal from " + name, message,false);
<p><strong>Thank you for renewing your contract @name</strong>.</p>
<p>Your Genesis Business Systems account manager will be in touch.</p>
}
​
Advertisements