Mura tutorial: contact form

The first post in a series of Mura CMS tutorials: how to create a contact form.

Step 1: Create contact form

  1. Open the Mura Administrator
    You'll find the Mura Administrator in the admin folder of your domain, www.mywebsite.com/admin/.
  2. Activate the Forms Manager in the Site Settings
    Select Site Settings > Edit Current Site in the top right menu. Choise the Modules tab and enable the Forms Manager. Don't forget to save.
  3. Open the Forms Manager and create a new form
    In the left side menu, open Forms  and select the Add Form option.
  4. Provide a Title for the form
  5. Create the form content
    Under Content go into code mode by selecting the Code button in the toolbar. Paste the following code into the textarea and remove the spaces within the Mura Tags:

    <form class="twoColumn" method="post" name="contact">
    [mura ]dspInclude('display_objects/dsp_form_protect.cfm')[/mura ]
    <fieldset><legend>Your Information</legend>
    <ol>
    <li class="req"><label for="txtNameFirst">First Name<ins> (required)</ins></label> <input class="text" id="txtNameFirst" name="FirstName" required="true" type="text" /></li>
    <li class="req"><label for="txtNameLast">Last Name<ins> (required)</ins></label> <input class="text" id="txtNameLast" name="LastName" required="true" type="text" /></li>
    <li class="req"><label for="txtEmail">Email Address<ins> (required)</ins></label> <input class="text" id="txtEmail" name="Email" required="true" type="text" /></li>
    </ol>
    </fieldset>
    <fieldset><legend>Your Message</legend>
    <ol>
    <li class="req"><label for="txtMessage">Message<ins> (required)</ins></label><textarea id="txtMessage" name="Question" required="true"></textarea></li>
    </ol>
    </fieldset>
    <div class="buttons">
    <p class="required">Required Fields</p>
    <input class="submit" name="Submit" type="submit" value="Submit" /></div>
    </form>


    You can adapt the form to your needs by changing the HTML code or by using the form options in the toolbar.
  6. Provide the Confirmation Message
    This is the message send by email to the user who submitted the form. Make sure you have an email field in your form if you want to use this option.
  7. Publish the Form

Step 2: Create contact page

  1. Open the Site Manager
  2. Add a page to your website
  3. Add the form to your page
    Open the Content Objects tab and select Forms from the Available Content Objects. Select the Data Collector of your form and add it to one of the Display Areas on the right side.
  4. Publish the page

Tips & Tricks

  • Make sure you use CFFormProtect since you don't want to get spammed. Just add the following line to your form  and remove the spaces within the Mura-tags: [mura ]dspInclude('display_objects/dsp_form_protect.cfm')[/mura ]. Don't forget to tune CFFormProtect, you'll find the settings file under [siteroot]/requirements/cfformprotect/cfp.ini.cfm.
  • If you don't want the form title to be displayed, uncheck Display Title in the Advanced tab of the form.
  • You don't need to receive the messages via email, you can also view them via the Forms Manager. Open the Forms Manager and select the Manage Data button (it looks like a screwdriver) next to the name of your form.