[IMP] website_form: add/rename form options

Add a height option on textarea
Rename some fields
Add margin on default form

part of: https://github.com/odoo/odoo/pull/45397

task-2197008

3 files changed, 13 insertions, 6 deletions

diff --git a/addons/website_form/static/src/snippets/s_website_form/options.js b/addons/website_form/static/src/snippets/s_website_form/options.js
index 44c66f9fe24..f21f3e11ef2 100644
--- a/addons/website_form/static/src/snippets/s_website_form/options.js
+++ b/addons/website_form/static/src/snippets/s_website_form/options.js
@@ -266,10 +266,13 @@ const FieldEditor = FormEditor.extend({
      * @param {Object} field Field to complete with the active field info
      */
     _setActiveProperties(field) {
+        const classList = this.$target[0].classList;
+        const textarea = this.$target[0].querySelector('textarea');
         field.placeholder = this._getPlaceholder();
-        field.required = this.$target[0].classList.contains('s_website_form_required');
-        field.modelRequired = this.$target[0].classList.contains('s_website_form_model_required');
-        field.hidden = this.$target[0].classList.contains('s_website_form_field_hidden');
+        field.rows = textarea && textarea.rows;
+        field.required = classList.contains('s_website_form_required');
+        field.modelRequired = classList.contains('s_website_form_model_required');
+        field.hidden = classList.contains('s_website_form_field_hidden');
         field.formatInfo = this._getFieldFormat();
     },
     /**
diff --git a/addons/website_form/static/src/xml/website_form_editor.xml b/addons/website_form/static/src/xml/website_form_editor.xml
index 0d718178300..895c66d616b 100644
--- a/addons/website_form/static/src/xml/website_form_editor.xml
+++ b/addons/website_form/static/src/xml/website_form_editor.xml
@@ -97,6 +97,7 @@
                 t-att-required="field.required || field.modelRequired || None"
                 t-att-placeholder="field.placeholder"
                 t-att-id="field.id"
+                t-att-rows="field.rows || 3"
             />
         </t>
     </t>
diff --git a/addons/website_form/views/snippets/s_website_form.xml b/addons/website_form/views/snippets/s_website_form.xml
index 4a40732ad6f..f26570541d7 100644
--- a/addons/website_form/views/snippets/s_website_form.xml
+++ b/addons/website_form/views/snippets/s_website_form.xml
@@ -2,7 +2,7 @@
 <odoo>
 
 <template id="s_website_form" name="Form Builder">
-    <section class="s_website_form" data-vcss="001">
+    <section class="s_website_form pt16 pb16" data-vcss="001">
         <div class="container">
             <form action="/website_form/" method="post" enctype="multipart/form-data" class="o_mark_required" data-mark="*">
                 <div class="s_website_form_rows row s_col_no_bgcolor">
@@ -21,12 +21,12 @@
     <xpath expr="//div" position="after">
         <!-- Form -->
         <div data-js="WebsiteFormEditor" data-selector=".s_website_form" data-target="form">
-            <we-select string="Display Fields Mark" data-name="field_mark_select" data-no-preview="true">
+            <we-select string="Marked Fields" data-name="field_mark_select" data-no-preview="true">
                 <we-button data-select-class="">None</we-button>
                 <we-button data-select-class="o_mark_required" data-name="form_required_opt">Required</we-button>
                 <we-button data-select-class="o_mark_optional" data-name="form_optional_opt">Optional</we-button>
             </we-select>
-            <we-input data-set-mark="" data-dependencies="form_required_opt, form_optional_opt"/>
+            <we-input string="Mark Text" data-set-mark="" data-dependencies="form_required_opt, form_optional_opt"/>
             <we-input string="Labels Width"
                 data-select-style="" data-css-property="width"
                 data-unit="px" data-apply-to=".s_website_form_label"/>
@@ -75,6 +75,9 @@
                 <we-button data-custom-field="datetime">Date &amp; Time</we-button>
                 <we-button data-custom-field="binary">File Upload</we-button>
             </we-select>
+            <t t-set="unit_textarea_height">rows</t>
+            <we-input string="Height" data-step="1" t-attf-data-select-attribute="3#{unit_textarea_height}" t-att-data-unit="unit_textarea_height"
+                data-attribute-name="rows" data-apply-to="textarea"/>
             <we-select string="Display" data-name="multi_check_display_opt" data-no-preview="true">
                 <we-button data-multi-checkbox-display="horizontal">Horizontal</we-button>
                 <we-button data-multi-checkbox-display="vertical">Vertical</we-button>