68 lines
2.8 KiB
Plaintext
68 lines
2.8 KiB
Plaintext
{{define "content"}}
|
|
{{- if not (eq .HTMX.Request.Target "contact")}}
|
|
<article class="message is-link">
|
|
<div class="message-body">
|
|
<p>This is an example of a form with inline, server-side validation and HTMX-powered AJAX submissions without writing a single line of JavaScript.</p>
|
|
<p>Only the form below will update async upon submission.</p>
|
|
</div>
|
|
</article>
|
|
{{- end}}
|
|
|
|
{{template "form" .}}
|
|
{{end}}
|
|
|
|
{{define "form"}}
|
|
{{- if .Form.IsDone}}
|
|
<article class="message is-large is-success">
|
|
<div class="message-header">
|
|
<p>Thank you!</p>
|
|
</div>
|
|
<div class="message-body">
|
|
No email was actually sent but this entire operation was handled server-side and degrades without JavaScript enabled.
|
|
</div>
|
|
</article>
|
|
{{- else}}
|
|
<form id="contact" method="post" hx-post="{{url "contact.submit"}}">
|
|
<div class="field">
|
|
<label for="email" class="label">Email address</label>
|
|
<div class="control">
|
|
<input id="email" name="email" type="email" class="input {{.Form.GetFieldStatusClass "Email"}}" value="{{.Form.Email}}">
|
|
</div>
|
|
{{template "field-errors" (.Form.GetFieldErrors "Email")}}
|
|
</div>
|
|
|
|
<div class="control">
|
|
<label class="label">Department</label>
|
|
<label class="radio">
|
|
<input type="radio" name="department" value="sales" {{if eq .Form.Department "sales"}}checked{{end}}/>
|
|
Sales
|
|
</label>
|
|
<label class="radio">
|
|
<input type="radio" name="department" value="marketing" {{if eq .Form.Department "marketing"}}checked{{end}}/>
|
|
Marketing
|
|
</label>
|
|
<label class="radio">
|
|
<input type="radio" name="department" value="hr" {{if eq .Form.Department "hr"}}checked{{end}}/>
|
|
HR
|
|
</label>
|
|
{{template "field-errors" (.Form.GetFieldErrors "Department")}}
|
|
</div>
|
|
|
|
<div class="field">
|
|
<label for="message" class="label">Message</label>
|
|
<div class="control">
|
|
<textarea id="message" name="message" class="textarea {{.Form.GetFieldStatusClass "Message"}}">{{.Form.Message}}</textarea>
|
|
</div>
|
|
{{template "field-errors" (.Form.GetFieldErrors "Message")}}
|
|
</div>
|
|
|
|
<div class="field is-grouped">
|
|
<div class="control">
|
|
<button class="button is-link">Submit</button>
|
|
</div>
|
|
</div>
|
|
|
|
{{template "csrf" .}}
|
|
</form>
|
|
{{- end}}
|
|
{{end}} |