Skip to content

HTML Form Templates

Jump to bottom
Michael Milette edited this page Nov 10, 2017 · 16 revisions

On this page you will find examples of web forms that are ready to cut and paste right into your Moodle site which has the Contact Form for Moodle plugin already installed.

Important: Be sure to paste the following HTML code into the HTML view of the Moodle editor. Otherwise HTML codes will display on your page and the form will not work.

The sample code included in the documentation for the Contact Form for Moodle plugin assumes that you are submitting the form from a Moodle page at the root of the site. You may need to modify the URL in the ACTION parameter of the FORM tag so that it reflects the location of local/contact/index.php plugin. Alternatively, see the Contact Us with FilerCodes example.

Minimal template form for Contact Form for Moodle

This is a minimal template that you can use to create your own form. It includes the essentials required for Contact Form for Moodle to process the submission and send the email. Use this as a lead generation form or as a starting point for your own form. This particular form is optimized fit in a side block.

<form action="../../local/contact/index.php" method="post" class="template-form">
    <fieldset>
        <label for="name" id="namelabel">Your name <strong class="required">(required)</strong></label><br>
        <input id="name" name="name" type="text" pattern="[A-zÀ-ž]([A-zÀ-ž\s]){2,}" title="Minimum 3 letters/spaces." required="required" value="" style="width:100%;"><br>
        <label for="email" id="emaillabel">Email address <strong class="required">(required)</strong></label><br>
        <input id="email" name="email" type="email" required="required" value="" style="width:100%;"><br>
        <input type="hidden" id="sesskey" name="sesskey" value="">
        <script>document.getElementById('sesskey').value = M.cfg.sesskey;</script>
    </fieldset>
    <div>
        <input type="submit" name="submit" id="submit" value="Send">
    </div>
</form>

Contact Us form with FilterCodes for Contact Form for Moodle

This form can be used on your site's Contact Us page. It is exactly the same as the [example form in the documentation}(https://github.com/michael-milette/moodle-filter_filtercodes/blob/master/README.md#usage) but makes use of tags from the FilterCodes plugin to perform some dynamic operations:

  • Makes the form work regardless of where you put it on the site thanks to the {wwwroot} tag.
  • Automatically fill in the user's name {fullname} and email address {email} if they are logged-in
  • Automatically makes the name and email address fields read-only if the user is logged-in with the {readonly} tag.
  • Adds a ReCAPTCHA if the user is not logged-in thanks to the {recaptcha} tag.

For more information. see the Contact Form for Moodle documentation.

<form action="{wwwroot}/local/contact/index.php" method="post" class="contact-us-form">
    <fieldset>
        <label for="name" id="namelabel">Your name <strong class="required">(required)</strong></label><br>
        <input id="name" name="name" type="text" size="57" maxlength="45" pattern="[A-zÀ-ž]([A-zÀ-ž\s]){2,}"
                title="Minimum 3 letters/spaces." required="required" {readonly} value="{fullname}"><br>
        <label for="email" id="emaillabel">Email address <strong class="required">(required)</strong></label><br>
        <input id="email" name="email" type="email" size="57" maxlength="60" 
                required="required" {readonly} value="{email}"><br>
        <label for="subject" id="subjectlabel">Subject <strong class="required">(required)</strong></label><br>
        <input id="subject" name="subject" type="text" size="57" maxlength="80" minlength="5"
                title="Minimum 5 characters." required="required"><br>
        <label for="message" id="messagelabel">Message <strong class="required">(required)</strong></label><br>
        <textarea id="message" name="message" rows="5" cols="58" minlength="5"
                title="Minimum 5 characters." required="required"></textarea><br>
        <input type="hidden" id="sesskey" name="sesskey" value="">
        <script>document.getElementById('sesskey').value = M.cfg.sesskey;</script>
        {recaptcha}
    </fieldset>
    <div>
        <input type="submit" name="submit" id="submit" value="Send">
    </div>
</form>

For more information on using the FilterCodes appearing in this example, see the FilterCodes documentation.

Request a new course form for Contact Form for Moodle

This form enables students to request the creation of a new course which is of interest to them.

<form action="../../local/contact/index.php" method="post" class="new-course-request-form">
    <fieldset>
        <label for="name" id="namelabel">Your name <strong class="required">(required)</strong></label><br>
        <input id="name" name="name" type="text" size="57" maxlength="45" pattern="[A-zÀ-ž]([A-zÀ-ž\s]){2,}"
                title="Minimum 3 letters/spaces." required="required" value=""><br>
        <label for="email" id="emaillabel">Email address <strong class="required">(required)</strong></label><br>
        <input id="email" name="email" type="email" size="57" maxlength="60" required="required" value=""><br>
        <label for="new_course_name" id="new_course_namelabel">Proposed name of the new course <strong class="required">(required)</strong></label><br>
        <input id="new_course_name" name="new_course_name" type="text" size="57" maxlength="80" minlength="5"
                title="Minimum 5 characters." required="required"><br>
        <label for="message" id="messagelabel">Course description <strong class="required">(required)</strong></label><br>
        <textarea id="message" name="message" rows="5" cols="58" minlength="5"
                title="Minimum 5 characters." required="required"></textarea><br>
        <input type="hidden" id="sesskey" name="sesskey" value="">
        <script>document.getElementById('sesskey').value = M.cfg.sesskey;</script>
    </fieldset>
    <div>
        <input type="submit" name="submit" id="submit" value="Submit request for this course">
    </div>
</form>

Support request form for Contact Form for Moodle

This form enables students to request help for problems with the website.

<form action="../../local/contact/index.php" method="post" class="support-request-form">
    <fieldset>
        <label for="name" id="namelabel">Your name <strong class="required">(required)</strong></label><br>
        <input id="name" name="name" type="text" size="57" maxlength="45" pattern="[A-zÀ-ž]([A-zÀ-ž\s]){2,}"
                title="Minimum 3 letters/spaces." required="required" value=""><br>
        <label for="email" id="emaillabel">Email address <strong class="required">(required)</strong></label><br>
        <input id="email" name="email" type="email" size="57" maxlength="60" required="required" value=""><br>
        <label for="subject" id="subjectlabel">Subject <strong class="required">(required)</strong></label><br>
        <select id="subject" name="subject" required="required"><br>
            <option label="Choose a subject"></option>
            <option>I can't change my password</option>
            <option>I can't login</option>
            <option value="Suggestion">I have a suggestion</option>
            <option value="Error message">I am getting an error message</option>
            <option value="System error">Something is not working the way it is supposed to</option>
            <option value="Course">I am having difficulty accesssing a course or some course content</option>
            <option value="Other reason">Other (please specify)</option>
        </select><br>
        <label for="specific_subject" id="specifylabel">Specific subject or the name of the course&nbsp;<strong class="required">(required)</strong></label><br>
        <input type="text" id="specific_subject" name="specific_subject" size="57" maxlength="80" required="required"><br>
        <label for="url" id="urllabel">Specify the URL address</label><br>
        <input type="url" id="url" name="url" size="57" maxlength="80"><br>
        <label for="message" id="messagelabel">Description and step-by-step details on how to reproduce the issue&nbsp;<strong class="required">(required)</strong></label><br>
        <textarea id="message" name="message" rows="5" cols="58" minlength="5"
                title="Minimum 5 characters." required="required"></textarea><br>
        <input type="hidden" id="sesskey" name="sesskey" value="">
        <script>document.getElementById('sesskey').value = M.cfg.sesskey;</script>
    </fieldset>
    <div>
        <input type="submit" name="submit" id="submit" value="Submit request for help">
    </div>
</form>

Email Attendance or Check-in

If you don't mind taking attendance by having students email you, template is what you are looking for. Students need just click the "I'm here!" button and an email will be sent off to the site administrator. You can specify a different email address by using the recipient list feature. See Configuring the List of Recipients in the documentation. There is no name or email fields because this particular example assumes that is in a course where students are registered and logged in, not as guest.

<form action="../../local/contact/index.php" method="post" class="template-form">
    <fieldset>
        <input type="hidden" id="subject" name="subject" value="Present!">
        <input type="hidden" id="sesskey" name="sesskey" value="">
        <script>document.getElementById('sesskey').value = M.cfg.sesskey;</script>
    </fieldset>
    <div>
        <input type="submit" name="submit" id="submit" value="I'm here!">
    </div>
</form>

It offers a semi manual process to take attendance but it works in cases where you can't implement an Attendance type plugin like Attendance or Auto Attendance.

Clone this wiki locally