diff --git a/packages/cli/templates/form-trigger.handlebars b/packages/cli/templates/form-trigger.handlebars index a54168d2af..a4d0e6be97 100644 --- a/packages/cli/templates/form-trigger.handlebars +++ b/packages/cli/templates/form-trigger.handlebars @@ -59,6 +59,9 @@ margin-bottom: 16px; } + .n8n-link { + padding-bottom: 24px; + } .n8n-link a { color: #7e8186; font-weight: 600; @@ -103,11 +106,12 @@ border-radius: 6px; width: 100%; font-size: 14px; - color: #909399; + color: #71747A; font-weight: 400; padding: 12px; } + form textarea:focus, form input:focus { outline: none; border-color: rgb(90, 76, 194); @@ -128,7 +132,7 @@ border-radius: 6px; width: 100%; font-size: 14px; - color: #909399; + color: #71747A; font-weight: 400; background-color: white; padding: 12px; @@ -141,6 +145,10 @@ sans-serif; } + ::placeholder { + opacity: 0.5; + } + #submit-btn { width: 100%; height: 48px; @@ -225,9 +233,77 @@ height: 18px; cursor: pointer; } - + /* required field ----------------------------- */ .form-required { } + label.form-required::after { + content: ' *'; + color: #ff6d5a; + } + + hr { + border: 0; + height: 1px; + border-top: 1px solid #dbdfe7; + margin-top: 24px; + margin-bottom: 24px; + display: none; + } + + .file-input-wrapper { + position: relative; + display: inline-block; + width: 100%; + } + input[type="file"] { + } + .clear-button { + position: absolute; + right: 5px; + top: 50%; + transform: translateY(-65%); + background-color: #7e8186; + border: none; + border-radius: 50%; + font-size: 14px; + font-weight: 600; + font-family: + Open Sans, + sans-serif; + color: white; + width: 20px; + height: 20px; + text-align: center; + line-height: 20px; + cursor: pointer; + display: none; + } + input[type="file"]:not(:empty) + .clear-button { + display: inline-block; + } + + @media only screen and (max-width: 400px) { + hr { + display: block; + } + .container { + width: 95%; + min-height: 100vh; + padding: 24px; + background-color: white; + border: 1px solid #dbdfe7; + border-radius: 8px; + box-shadow: 0px 4px 16px 0px #634dff0f; + } + .card { + padding: 0px; + background-color: white; + border: 0px solid #dbdfe7; + border-radius: 0px; + box-shadow: 0px 0px 10px 0px #634dff0f; + margin-bottom: 0px; + } + } @@ -238,20 +314,23 @@

This is test version of your form. Use it only for testing your Form Trigger.

+
{{/if}} + + {{#if validForm}}

{{formTitle}}

-

{{formDescription}}

+

{{formDescription}}

{{#each formFields}} {{#if isMultiSelect}}
- +
{{#each multiSelectOptions}}
@@ -268,7 +347,7 @@ {{#if isSelect}}
- +
+ placeholder="{{placeholder}}" + >{{defaultValue}} +

+ This field is required +

+
+ {{/if}} + + {{#if isFileInput}} +
+ + +

This field is required

@@ -299,12 +398,14 @@ {{#if isInput}}
- +

This field is required @@ -355,9 +456,13 @@

{{#if appendAttribution}} +
{{/if}} + + {{#if redirectUrl}} {{/if}} @@ -396,10 +504,13 @@