When rendering the Contact page from the server-side, we will use the contact_page template (found in the shared/templates/contact_page.tmpl file):

{{ define "pagecontent" }}
{{template "contact_content" . }}
{{end}}
{{template "layouts/webpage_layout" . }}

Recall that because we include the layouts/webpage_layout template, and this will print the markup that generates the doctype, html, and body tags of the page. This template will be used exclusively on the server-side.

Using the define template action, we demarcate the "pagecontent" block, where the content of the contact page will be rendered. The content of the contact page is defined inside the contact_content template (found in the shared/template/contact_content.tmpl file):

<h1>Contact</h1>

{{template "partials/contactform_partial" .}}

Recall that in addition to the server-side application, the client-side application will be using the contact_content template to render the contact form in the primary content area.

Inside the contact_content template, we include the contact form partial template (partials/contactform_partial) that contains the markup for the contact form:

<div class="formContainer">
<form id="contactForm" name="contactForm" action="/contact" method="POST" class="pure-form pure-form-aligned">
  <fieldset>
{{if .Form }}
    <div class="pure-control-group">
      <label for="firstName">First Name</label>
      <input id="firstName" type="text" placeholder="First Name" name="firstName" value="{{.Form.Fields.firstName}}">
      <span id="firstNameError" class="formError pure-form-message-inline">{{.Form.Errors.firstName}}</span>
    </div>

    <div class="pure-control-group">
      <label for="lastName">Last Name</label>
      <input id="lastName" type="text" placeholder="Last Name" name="lastName" value="{{.Form.Fields.lastName}}">
      <span id="lastNameError" class="formError pure-form-message-inline">{{.Form.Errors.lastName}}</span>
    </div>

    <div class="pure-control-group">
      <label for="email">E-mail Address</label>
      <input id="email" type="text" placeholder="E-mail Address" name="email" value="{{.Form.Fields.email}}">
      <span id="emailError" class="formError pure-form-message-inline">{{.Form.Errors.email}}</span>
    </div>

    <fieldset class="pure-control-group">
      <textarea id="messageBody" class="pure-input-1-2" placeholder="Enter your message for us here." name="messageBody">{{.Form.Fields.messageBody}}</textarea>
      <span id="messageBodyError" class="formError pure-form-message-inline">{{.Form.Errors.messageBody}}</span>
    </fieldset>

    <div class="pure-controls">
      <input id="contactButton" name="contactButton" class="pure-button pure-button-primary" type="submit" value="Contact" />
    </div>
{{end}}
  </fieldset>
</form>
</div>

This partial template contains the HTML markup necessary to implement the wireframe design depicted in Figure 7.3. The template actions that access the form field values and their corresponding errors are shown in bold. The reason that we populate the value attribute for a given input field is in case the user makes a mistake filling out the form, these values will be prepopulated with the values the user entered in the previous form submission attempt. There is a <span> tag directly after each input field, which will house the corresponding error message for that particular field.

The very last <input> tag is a submit button. By clicking this button, the user will be able to submit the form contents to the web server.