Merge pull request #754 from mpourismaiel/refactor/contact/custom-inputs

WIP: Allow custom inputs (idea)
okkur · May 5, 2020 · 6e5c04c · 6e5c04c
2 parents 8bdc869 + a81c7df
commit 6e5c04c
Show file tree

Hide file tree

Showing 3 changed files with 70 additions and 0 deletions.
diff --git a/exampleSite/content/fragments/contact/docs.md b/exampleSite/content/fragments/contact/docs.md
@@ -170,3 +170,32 @@ Any other value for the `name` variable in the `fields.hidden` object will have
 Value of the hidden field. This field will be overridden if `name` is set to `site` or `page`.
 
 [Global variables]({{< ref "global-variables" >}}) are documented as well and have been omitted from this page.
+
+#### fields.custom
+*type: array of objects*
+
+This array is used to define custom inputs. These inputs are displayed in addition to the default inputs of the contact form.
+
+##### fields.custom.name
+*type: string*
+
+##### fields.custom.text
+*type: string*
+
+##### fields.custom.error
+*type: string*  
+*default: i18n contact.defaultError*
+
+##### fields.custom.required
+*type: boolean*
+
+##### fields.custom.validation
+*type: boolean, string*  
+*accepted values: email, regex*
+
+Applies validation rules to the input. If not set or set to false, no validation will be applied.
+
+##### fields.custom.validation_regex
+*type: string*
+
+In case `fields.custom.validation` is set to `regex`, you can specify the regex here.
diff --git a/i18n/en.yaml b/i18n/en.yaml
@@ -9,6 +9,8 @@
   translation: "Read more..."
 
 # Contact Form
+- id: contact.defaultError
+  translation: 'Please fill the field'
 - id: contact.defaultNameError
   translation: "Please enter your name"
 - id: contact.defaultEmailError

diff --git a/layouts/partials/fragments/contact.html b/layouts/partials/fragments/contact.html
@@ -68,6 +68,45 @@
                   <div class="px-2" data-error id="phone-error"></div>
                 </div>
               {{- end }}
+              {{- range (.Params.fields.custom | default slice) }}
+                {{- $field := . }}
+                <div class="form-group">
+                  <input
+                    id="{{- print .name -}}"
+                    name="{{- print .name -}}"
+                    class="form-control"
+                    type="text"
+
+                    {{- if eq .name "name" }}
+                      {{ safeHTMLAttr "data-validation" }}
+                    {{- else if eq .name "email" }}
+                      {{ safeHTMLAttr "data-validation='email'" }}
+                    {{- else if eq .name "phone" }}
+                      {{ safeHTMLAttr "data-validation=regex'" }}
+                      {{ safeHTMLAttr "data-validation-regex='^([0-9,\\+]+)$'" }}
+                    {{- end -}}
+
+                    {{- with .validation -}}
+                      {{- if eq . true }}
+                        {{ safeHTMLAttr "data-validation" }}
+                      {{- else }}
+                        {{ safeHTMLAttr (printf "data-validation='%s'" .) }}
+                      {{- end -}}
+
+                      {{- with $field.validation_regex }}
+                        {{ safeHTMLAttr (printf "data-validation-regex='%s'" .) }}
+                      {{- end -}}
+                    {{- end -}}
+
+                    {{- if .required }}
+                      {{ safeHTMLAttr "required" }}
+                    {{- end }}
+
+                    data-validation-error-msg="{{ .error | default (i18n (printf "contact.defaultError" .name)) }}"
+                    placeholder="{{ with .text }}{{ . | markdownify }}{{ end }}">
+                  <div class="px-2" data-error id="{{- printf "%s-error" .name -}}"></div>
+                </div>
+              {{- end }}
             </div>
             <div class="col-md-6">
               {{- with .Params.fields.message }}