contact.html 5.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144
  1. {{ $ := .root }}
  2. {{ $page := .page }}
  3. {{ $autolink := default true $page.Params.autolink }}
  4. {{ $data := site.Params }}
  5. <!-- Contact widget -->
  6. <div class="row contact-widget">
  7. <div class="col-12 col-lg-4 section-heading">
  8. <h1>{{ with $page.Title }}{{ . | markdownify }}{{ end }}</h1>
  9. {{ with $page.Params.subtitle }}<p>{{ . | markdownify }}</p>{{ end }}
  10. </div>
  11. <div class="col-12 col-lg-8">
  12. {{ with $page.Content }}{{ . }}{{ end }}
  13. {{ if $page.Params.email_form }}
  14. {{ $post_action := "" }}
  15. {{ if eq $page.Params.email_form 1 }}
  16. {{ $post_action = "netlify" }}
  17. {{ else }}
  18. {{ if not $data.email }}
  19. {{ errorf "Please set an email address for the contact form using the `email` parameter in `params.toml`. Otherwise, set `email_form = 0` to disable the contact form." }}
  20. {{ end }}
  21. {{ $post_action = printf "action=\"https://formspree.io/%s\"" $data.email }}
  22. {{end}}
  23. <div class="mb-3">
  24. <form name="contact" method="POST" {{ $post_action | safeHTMLAttr }}>
  25. <div class="form-group form-inline">
  26. <label class="sr-only" for="inputName">{{ i18n "contact_name" }}</label>
  27. <input type="text" name="name" class="form-control w-100" id="inputName" placeholder="{{ i18n "contact_name" | default "Name" }}" required>
  28. </div>
  29. <div class="form-group form-inline">
  30. <label class="sr-only" for="inputEmail">{{ i18n "contact_email" }}</label>
  31. <input type="email" name="email" class="form-control w-100" id="inputEmail" placeholder="{{ i18n "contact_email" | default "Email" }}" required>
  32. </div>
  33. <div class="form-group">
  34. <label class="sr-only" for="inputMessage">{{ i18n "contact_message" }}</label>
  35. <textarea name="message" class="form-control" id="inputMessage" rows="5" placeholder="{{ i18n "contact_message" | default "Message" }}" required></textarea>
  36. </div>
  37. <button type="submit" class="btn btn-outline-primary px-3 py-2">{{ i18n "contact_send" | default "Send" }}</button>
  38. </form>
  39. </div>
  40. {{end}}
  41. <ul class="fa-ul">
  42. {{ if and $data.email (not $page.Params.email_form) }}
  43. <li>
  44. <i class="fa-li fas fa-envelope fa-2x" aria-hidden="true"></i>
  45. <span id="person-email">
  46. {{- if $autolink }}<a href="mailto:{{ $data.email }}">{{ $data.email }}</a>{{ else }}{{ $data.email }}{{ end -}}
  47. </span>
  48. </li>
  49. {{ end }}
  50. {{ with $data.phone }}
  51. <li>
  52. <i class="fa-li fas fa-phone fa-2x" aria-hidden="true"></i>
  53. <span id="person-telephone">
  54. {{- if $autolink }}<a href="tel:{{ . }}">{{ . }}</a>{{ else }}{{ . }}{{ end -}}
  55. </span>
  56. </li>
  57. {{ end }}
  58. {{ $addr_formatted := "" }}{{/* Scoping for maps. */}}
  59. {{ if $data.address.street | or $data.address.city | or $data.address.region | or $data.address.postcode | or $data.address.country }}
  60. {{ $addr := slice }}
  61. {{with $data.address.street}}{{$addr = $addr | append .}}{{end}}
  62. {{with $data.address.city}}{{$addr = $addr | append .}}{{end}}
  63. {{with $data.address.region}}{{$addr = $addr | append .}}{{end}}
  64. {{with $data.address.postcode}}{{$addr = $addr | append .}}{{end}}
  65. {{with $data.address.country}}{{$addr = $addr | append .}}{{end}}
  66. {{ $addr_formatted = delimit $addr (site.Params.list_delimiter | default ", ") }}
  67. <li>
  68. <i class="fa-li fas fa-map-marker fa-2x" aria-hidden="true"></i>
  69. <span id="person-address">{{ $addr_formatted }}</span>
  70. </li>
  71. {{ end }}
  72. {{ with $data.directions }}
  73. <li>
  74. <i class="fa-li fas fa-compass fa-2x" aria-hidden="true"></i>
  75. <span>{{ . | markdownify | emojify }}</span>
  76. </li>
  77. {{ end }}
  78. {{ with $data.office_hours }}
  79. <li>
  80. <i class="fa-li fas fa-clock fa-2x" aria-hidden="true"></i>
  81. <span>
  82. {{- if not (reflect.IsSlice .)}}{{/* Support legacy string format. */}}
  83. {{- . | markdownify | emojify -}}
  84. {{else}}
  85. {{- delimit . "<br>" | markdownify | emojify -}}
  86. {{end -}}
  87. </span>
  88. </li>
  89. {{ end }}
  90. {{ with $data.appointment_url }}
  91. <li>
  92. <i class="fa-li fas fa-calendar-check fa-2x" aria-hidden="true"></i>
  93. <a href="{{ . }}" target="_blank" rel="noopener">{{ i18n "book_appointment" | default "Book an appointment" }}</a>
  94. </li>
  95. {{ end }}
  96. {{/* Contact links. */}}
  97. {{ range $data.contact_links }}
  98. {{ $pack := or .icon_pack "fas" }}
  99. {{ $pack_prefix := $pack }}
  100. {{ if in (slice "fab" "fas" "far" "fal") $pack }}
  101. {{ $pack_prefix = "fa" }}
  102. {{ end }}
  103. {{ $link := .link }}
  104. {{ $scheme := (urls.Parse $link).Scheme }}
  105. {{ $target := "" }}
  106. {{ if not $scheme }}
  107. {{ $link = .link | relLangURL }}
  108. {{ else if in (slice "http" "https") $scheme }}
  109. {{ $target = "target=\"_blank\" rel=\"noopener\"" }}
  110. {{ end }}
  111. <li>
  112. <i class="fa-li {{ $pack }} {{ $pack_prefix }}-{{ .icon }} fa-2x" aria-hidden="true"></i>
  113. <a href="{{ $link | safeURL }}" {{ $target | safeHTMLAttr }}>{{.name|markdownify|emojify|safeHTML}}</a>
  114. </li>
  115. {{ end }}
  116. </ul>
  117. {{ if and site.Params.map.engine $data.coordinates.latitude }}
  118. <div class="d-none">
  119. <input id="map-provider" value="{{ site.Params.map.engine }}">
  120. <input id="map-lat" value="{{ $data.coordinates.latitude }}">
  121. <input id="map-lng" value="{{ $data.coordinates.longitude }}">
  122. <input id="map-dir" value="{{ $addr_formatted }}">
  123. <input id="map-zoom" value="{{ site.Params.map.zoom | default "15" }}">
  124. <input id="map-api-key" value="{{ site.Params.map.api_key }}">
  125. </div>
  126. <div id="map"></div>
  127. {{ end }}
  128. </div>
  129. </div>