From bac4fd27b551370eb838cea2d1045e74b94608e0 Mon Sep 17 00:00:00 2001 From: Mahdi Pourismaiel Date: Sat, 2 May 2020 12:58:46 +0430 Subject: [PATCH 1/5] Allow custom inputs (idea) --- .../content/fragments/contact/contact.md | 12 +++- layouts/partials/fragments/contact.html | 72 ++++++++++--------- 2 files changed, 46 insertions(+), 38 deletions(-) diff --git a/exampleSite/content/fragments/contact/contact.md b/exampleSite/content/fragments/contact/contact.md index 3c9c26e8..e4d04802 100644 --- a/exampleSite/content/fragments/contact/contact.md +++ b/exampleSite/content/fragments/contact/contact.md @@ -26,17 +26,23 @@ button_text = "Send Button" # defaults to theme default error = "Message could not be send. Please contact us at mail@example.com instead." # defaults to theme default # Only defined fields are shown in contact form -[fields.name] +[[fields.inputs]] + name = "name" text = "Your Name *" error = "Please enter your name" # defaults to theme default + required = true -[fields.email] +[[fields.inputs]] + name = "email" text = "Your Email *" error = "Please enter your email address" # defaults to theme default + required = true -[fields.phone] +[[fields.inputs]] + name = "phone" text = "Your Phone *" error = "Please enter your phone number" # defaults to theme default + required = true [fields.message] text = "Your Message *" diff --git a/layouts/partials/fragments/contact.html b/layouts/partials/fragments/contact.html index 9ff8c3c1..17b5a121 100644 --- a/layouts/partials/fragments/contact.html +++ b/layouts/partials/fragments/contact.html @@ -5,6 +5,11 @@ {{- .page_scratch.Add "js" (dict "file" "syna-contact.js") -}} {{- $bg := .self.Scratch.Get "bg" }} +{{- $default_name_input := dict "name" "name" "text" "Your Name *" "error" "Please enter your name" "required" true -}} +{{- $default_email_input := dict "name" "email" "text" "Your Email *" "error" "Please enter your email" "required" true -}} +{{- $default_phone_input := dict "name" "phone" "text" "Your Phone *" "error" "Please enter your phone" "required" true -}} +{{- $default_inputs := slice $default_name_input $default_email_input $default_phone_input -}} + {{ "" | safeHTML }} {{- partial "helpers/container.html" (dict "start" true "in_slot" .in_slot "bg" $bg "Name" .Name "Params" .Params) -}} @@ -26,46 +31,43 @@ {{- end }}>
- {{- with .Params.fields.name }} + {{- range (.Params.fields.inputs | default $default_inputs) }} + {{- $field := . }}
-
-
- {{- end -}} - {{- with .Params.fields.email }} -
- -
-
- {{- end -}} - {{- with .Params.fields.phone }} -
- -
+
{{- end }}
From 74747882905f61fdef22fc92628938d8cf7096f6 Mon Sep 17 00:00:00 2001 From: Mahdi Pourismaiel Date: Mon, 4 May 2020 20:19:31 +0430 Subject: [PATCH 2/5] Revert contact fragment example to previous version --- exampleSite/content/fragments/contact/contact.md | 12 +++--------- 1 file changed, 3 insertions(+), 9 deletions(-) diff --git a/exampleSite/content/fragments/contact/contact.md b/exampleSite/content/fragments/contact/contact.md index e4d04802..3c9c26e8 100644 --- a/exampleSite/content/fragments/contact/contact.md +++ b/exampleSite/content/fragments/contact/contact.md @@ -26,23 +26,17 @@ button_text = "Send Button" # defaults to theme default error = "Message could not be send. Please contact us at mail@example.com instead." # defaults to theme default # Only defined fields are shown in contact form -[[fields.inputs]] - name = "name" +[fields.name] text = "Your Name *" error = "Please enter your name" # defaults to theme default - required = true -[[fields.inputs]] - name = "email" +[fields.email] text = "Your Email *" error = "Please enter your email address" # defaults to theme default - required = true -[[fields.inputs]] - name = "phone" +[fields.phone] text = "Your Phone *" error = "Please enter your phone number" # defaults to theme default - required = true [fields.message] text = "Your Message *" From 89b85c717fc7d8e2b3acf35f9c461c0b38d88ecf Mon Sep 17 00:00:00 2001 From: Mahdi Pourismaiel Date: Mon, 4 May 2020 20:30:49 +0430 Subject: [PATCH 3/5] Revert some changes to contact fragment and add custom inputs --- layouts/partials/fragments/contact.html | 49 ++++++++++++++++++++++--- 1 file changed, 43 insertions(+), 6 deletions(-) diff --git a/layouts/partials/fragments/contact.html b/layouts/partials/fragments/contact.html index 17b5a121..ff7874b3 100644 --- a/layouts/partials/fragments/contact.html +++ b/layouts/partials/fragments/contact.html @@ -5,11 +5,6 @@ {{- .page_scratch.Add "js" (dict "file" "syna-contact.js") -}} {{- $bg := .self.Scratch.Get "bg" }} -{{- $default_name_input := dict "name" "name" "text" "Your Name *" "error" "Please enter your name" "required" true -}} -{{- $default_email_input := dict "name" "email" "text" "Your Email *" "error" "Please enter your email" "required" true -}} -{{- $default_phone_input := dict "name" "phone" "text" "Your Phone *" "error" "Please enter your phone" "required" true -}} -{{- $default_inputs := slice $default_name_input $default_email_input $default_phone_input -}} - {{ "" | safeHTML }} {{- partial "helpers/container.html" (dict "start" true "in_slot" .in_slot "bg" $bg "Name" .Name "Params" .Params) -}} @@ -31,7 +26,49 @@ {{- end }}>
- {{- range (.Params.fields.inputs | default $default_inputs) }} + {{- with .Params.fields.name }} +
+ +
+
+ {{- end -}} + {{- with .Params.fields.email }} +
+ +
+
+ {{- end -}} + {{- with .Params.fields.phone }} +
+ +
+
+ {{- end }} + {{- range (.Params.fields.custom | default slice) }} {{- $field := . }}
Date: Mon, 4 May 2020 20:39:25 +0430 Subject: [PATCH 4/5] Set default error for custom inputs in contact fragment --- i18n/en.yaml | 2 ++ layouts/partials/fragments/contact.html | 2 +- 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/i18n/en.yaml b/i18n/en.yaml index 617805b9..d2cf8536 100644 --- 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 index ff7874b3..feefc86f 100644 --- a/layouts/partials/fragments/contact.html +++ b/layouts/partials/fragments/contact.html @@ -102,7 +102,7 @@ {{ safeHTMLAttr "required" }} {{- end }} - data-validation-error-msg="{{ .error | default (i18n (printf "contact.default%sError" .name)) }}" + data-validation-error-msg="{{ .error | default (i18n (printf "contact.defaultError" .name)) }}" placeholder="{{ with .text }}{{ . | markdownify }}{{ end }}">
From a81c7df24f96d8a2e1f213528f5a928fd2c84dd4 Mon Sep 17 00:00:00 2001 From: Mahdi Pourismaiel Date: Mon, 4 May 2020 20:39:36 +0430 Subject: [PATCH 5/5] Update documentation for the contact fragment --- exampleSite/content/fragments/contact/docs.md | 29 +++++++++++++++++++ 1 file changed, 29 insertions(+) diff --git a/exampleSite/content/fragments/contact/docs.md b/exampleSite/content/fragments/contact/docs.md index 4358d4bb..bcb72f89 100644 --- 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.