[FIX] website_form, *: fix new website form

* = website_crm, website_hr_recruitment, website_sale

Changing label position on existing field was replacing the label with
the default one.

Redirection message was not updating the overlay

Going from show message to redirect without hidding the mesage made the
form d-none

When a select field's label's position was changed the select was not
editable anymore.

Some other miscellaneous fixes

task-2191409

closes odoo/odoo#44911

X-original-commit: 3cf87cc1cb179598cecb736728378e330d3b2e22
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>

9 files changed, 264 insertions, 228 deletions

diff --git a/addons/website_crm/views/website_crm_templates.xml b/addons/website_crm/views/website_crm_templates.xml
index 2366a67a114..b32f87af001 100644
--- a/addons/website_crm/views/website_crm_templates.xml
+++ b/addons/website_crm/views/website_crm_templates.xml
@@ -11,72 +11,74 @@
                     'description': request.params.get('description', ''),
                 }</attribute>
             </xpath>
-            <xpath expr="//section[@id='contactus_section']" position="replace">
-                <section class="s_website_form" data-vcss="001">
-                    <div class="container">
-                        <form id="contactus_form" action="/website_form/" method="post" enctype="multipart/form-data" data-model_name="crm.lead" data-success-mode="redirect" data-success-page="/contactus-thank-you" class="o_mark_required" data-mark="*" data-editable-form="false">
-                            <div class="s_website_form_rows row s_col_no_bgcolor">
-                                <div class="form-group col-12 s_website_form_field s_website_form_required" data-type="char">
-                                    <div class="row s_col_no_resize s_col_no_bgcolor">
-                                        <label class="col-form-label col-sm-auto s_website_form_label" style="width: 200px" for="opportunity1">Your Name<span class="s_website_form_mark"> *</span></label>
-                                        <div class="col-sm">
-                                            <input id="opportunity1" type="text" class="form-control s_website_form_input" name="contact_name" required=""/>
+            <xpath expr="//div[@id='contactus_section']" position="replace">
+                <div id="contactus_section">
+                    <section class="s_website_form" data-vcss="001">
+                        <div class="container">
+                            <form id="contactus_form" action="/website_form/" method="post" enctype="multipart/form-data" data-model_name="crm.lead" data-success-mode="redirect" data-success-page="/contactus-thank-you" class="o_mark_required" data-mark="*" data-editable-form="false">
+                                <div class="s_website_form_rows row s_col_no_bgcolor">
+                                    <div class="form-group col-12 s_website_form_field s_website_form_required" data-type="char" data-name="Field">
+                                        <div class="row s_col_no_resize s_col_no_bgcolor">
+                                            <label class="col-form-label col-sm-auto s_website_form_label" style="width: 200px" for="opportunity1">Your Name<span class="s_website_form_mark"> *</span></label>
+                                            <div class="col-sm">
+                                                <input id="opportunity1" type="text" class="form-control s_website_form_input" name="contact_name" required=""/>
+                                            </div>
                                         </div>
                                     </div>
-                                </div>
-                                <div class="form-group col-12 s_website_form_field" data-type="char">
-                                    <div class="row s_col_no_resize s_col_no_bgcolor">
-                                        <label class="col-form-label col-sm-auto s_website_form_label" style="width: 200px" for="opportunity2">Phone Number</label>
-                                        <div class="col-sm">
-                                            <input id="opportunity2" type="text" class="form-control s_website_form_input" name="phone" />
+                                    <div class="form-group col-12 s_website_form_field" data-type="char" data-name="Field">
+                                        <div class="row s_col_no_resize s_col_no_bgcolor">
+                                            <label class="col-form-label col-sm-auto s_website_form_label" style="width: 200px" for="opportunity2">Phone Number</label>
+                                            <div class="col-sm">
+                                                <input id="opportunity2" type="text" class="form-control s_website_form_input" name="phone" />
+                                            </div>
                                         </div>
                                     </div>
-                                </div>
-                                <div class="form-group col-12 s_website_form_field s_website_form_required" data-type="char">
-                                    <div class="row s_col_no_resize s_col_no_bgcolor">
-                                        <label class="col-form-label col-sm-auto s_website_form_label" style="width: 200px" for="opportunity3">Email<span class="s_website_form_mark"> *</span></label>
-                                        <div class="col-sm">
-                                            <input id="opportunity3" type="text" class="form-control s_website_form_input" name="email_from" required="" />
+                                    <div class="form-group col-12 s_website_form_field s_website_form_required" data-type="char" data-name="Field">
+                                        <div class="row s_col_no_resize s_col_no_bgcolor">
+                                            <label class="col-form-label col-sm-auto s_website_form_label" style="width: 200px" for="opportunity3">Email<span class="s_website_form_mark"> *</span></label>
+                                            <div class="col-sm">
+                                                <input id="opportunity3" type="text" class="form-control s_website_form_input" name="email_from" required="" />
+                                            </div>
                                         </div>
                                     </div>
-                                </div>
-                                <div class="form-group col-12 s_website_form_field" data-type="char">
-                                    <div class="row s_col_no_resize s_col_no_bgcolor">
-                                        <label class="col-form-label col-sm-auto s_website_form_label" style="width: 200px" for="opportunity4">Your Company</label>
-                                        <div class="col-sm">
-                                            <input id="opportunity4" type="text" class="form-control s_website_form_input" name="partner_name" />
+                                    <div class="form-group col-12 s_website_form_field" data-type="char" data-name="Field">
+                                        <div class="row s_col_no_resize s_col_no_bgcolor">
+                                            <label class="col-form-label col-sm-auto s_website_form_label" style="width: 200px" for="opportunity4">Your Company</label>
+                                            <div class="col-sm">
+                                                <input id="opportunity4" type="text" class="form-control s_website_form_input" name="partner_name" />
+                                            </div>
                                         </div>
                                     </div>
-                                </div>
-                                <div class="form-group col-12 s_website_form_field s_website_form_model_required" data-type="char">
-                                    <div class="row s_col_no_resize s_col_no_bgcolor">
-                                        <label class="col-form-label col-sm-auto s_website_form_label" style="width: 200px" for="opportunity5">Subject</label>
-                                        <div class="col-sm">
-                                            <input id="opportunity5" type="text" class="form-control s_website_form_input" name="name" required="" />
+                                    <div class="form-group col-12 s_website_form_field s_website_form_model_required" data-type="char" data-name="Field">
+                                        <div class="row s_col_no_resize s_col_no_bgcolor">
+                                            <label class="col-form-label col-sm-auto s_website_form_label" style="width: 200px" for="opportunity5">Subject</label>
+                                            <div class="col-sm">
+                                                <input id="opportunity5" type="text" class="form-control s_website_form_input" name="name" required="" />
+                                            </div>
                                         </div>
                                     </div>
-                                </div>
-                                <div class="form-group col-12 s_website_form_field s_website_form_required" data-type="text">
-                                    <div class="row s_col_no_resize s_col_no_bgcolor">
-                                        <label class="col-form-label col-sm-auto s_website_form_label" style="width: 200px" for="opportunity6">Your Question<span class="s_website_form_mark"> *</span></label>
-                                        <div class="col-sm">
-                                            <textarea id="opportunity6" class="form-control s_website_form_input" name="description" required=""></textarea>
+                                    <div class="form-group col-12 s_website_form_field s_website_form_required" data-type="text" data-name="Field">
+                                        <div class="row s_col_no_resize s_col_no_bgcolor">
+                                            <label class="col-form-label col-sm-auto s_website_form_label" style="width: 200px" for="opportunity6">Your Question<span class="s_website_form_mark"> *</span></label>
+                                            <div class="col-sm">
+                                                <textarea id="opportunity6" class="form-control s_website_form_input" name="description" required=""></textarea>
+                                            </div>
                                         </div>
                                     </div>
-                                </div>
-                                <div class="form-group col-12 s_website_form_submit">
-                                    <div class="row s_col_no_resize s_col_no_bgcolor">
-                                        <div style="width: 200px" class="col-sm-auto s_website_form_label"/>
-                                        <div class="col-sm">
-                                            <a href="#" role="button" class="btn btn-primary btn-lg s_website_form_send">Submit</a>
-                                            <span id="s_website_form_result"></span>
+                                    <div class="form-group col-12 s_website_form_submit">
+                                        <div class="row s_col_no_resize s_col_no_bgcolor">
+                                            <div style="width: 200px" class="col-sm-auto s_website_form_label"/>
+                                            <div class="col-sm">
+                                                <a href="#" role="button" class="btn btn-primary btn-lg s_website_form_send">Submit</a>
+                                                <span id="s_website_form_result"></span>
+                                            </div>
                                         </div>
                                     </div>
                                 </div>
-                            </div>
-                        </form>
-                    </div>
-                </section>
+                            </form>
+                        </div>
+                    </section>
+                </div>
 			</xpath>
 		</template>
 
diff --git a/addons/website_form/static/src/js/website_form_editor_registry.js b/addons/website_form/static/src/js/website_form_editor_registry.js
index 93b183a9be8..82c5f500fab 100644
--- a/addons/website_form/static/src/js/website_form_editor_registry.js
+++ b/addons/website_form/static/src/js/website_form_editor_registry.js
@@ -50,6 +50,7 @@ FormEditorRegistry.add('send_mail', {
         type: 'char',
         required: true,
         string: _t('Recipient Email'),
+        defaultValue: 'info@yourcompany.example.com',
     }],
 });
 
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 2e9e48930d2..4bd19093345 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
@@ -28,8 +28,19 @@ const FormEditor = options.Class.extend({
         // in qweb js to avoid duplicating this in the templates
         field.required = field.required ? 1 : null;
 
-        // Fetch possible values for relation fields
-        if (!field.records && field.relation && field.relation !== 'ir.attachment') {
+        if (field.records) {
+            return field.records;
+        }
+        // Set selection as records to avoid added conplexity
+        if (field.type === 'selection') {
+            field.records = [];
+            field.selection.forEach(el => {
+                field.records.push({
+                    id: el[0],
+                    display_name: el[1],
+                });
+            });
+        } else if (field.relation && field.relation !== 'ir.attachment') {
             field.records = await this._rpc({
                 model: field.relation,
                 method: 'search_read',
@@ -55,7 +66,7 @@ const FormEditor = options.Class.extend({
             string: name,
             custom: true,
             type: type,
-            // Default values for x2many fields
+            // Default values for x2many fields and selection
             records: [{
                 id: _t('Option 1'),
                 display_name: _t('Option 1'),
@@ -66,17 +77,6 @@ const FormEditor = options.Class.extend({
                 id: _t('Option 3'),
                 display_name: _t('Option 3'),
             }],
-            // Default values for selection fields
-            selection: [[
-                _t('Option 1'),
-                _t('Option 1'),
-            ], [
-                _t('Option 2'),
-                _t('Option 2'),
-            ], [
-                _t('Option 3'),
-                _t('Option 3'),
-            ]],
         };
     },
     /**
@@ -116,7 +116,6 @@ const FormEditor = options.Class.extend({
      */
     _isRequiredMark: function () {
         return this.$target[0].classList.contains('o_mark_required');
-
     },
     /**
      * @private
@@ -152,12 +151,14 @@ const FieldEditor = FormEditor.extend({
      */
     _getActiveField: function () {
         let field;
+        const labelText = this.$target.find('.s_website_form_label_content').text();
         if (this._isFieldCustom()) {
-            const name = this.$target[0].querySelector('.s_website_form_label').firstChild.textContent.trim();
-            field = this._getCustomField(this.$target[0].dataset.type, name);
+            field = this._getCustomField(this.$target[0].dataset.type, labelText);
         } else {
             field = this.fields[this._getFieldName()];
+            field.string = labelText;
         }
+        field.records = this._getListItems();
         this._setActiveProperties(field);
         return field;
     },
@@ -170,7 +171,7 @@ const FieldEditor = FormEditor.extend({
      */
     _getFieldFormat: function () {
         let requiredMark, optionalMark;
-        const mark = this.$target[0].querySelector('span.s_website_form_mark');
+        const mark = this.$target[0].querySelector('.s_website_form_mark');
         if (mark) {
             requiredMark = this._isFieldRequired();
             optionalMark = !requiredMark;
@@ -270,7 +271,8 @@ const FieldEditor = FormEditor.extend({
      */
     _setActiveProperties(field) {
         field.placeholder = this._getPlaceholder();
-        field.required = this._isFieldRequired();
+        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.formatInfo = this._getFieldFormat();
     },
@@ -361,7 +363,7 @@ options.registry.WebsiteFormEditor = FormEditor.extend({
         if (model) {
             // we may be re-whitelisting already whitelisted fields. Doesn't
             // really matter.
-            const fields = [...this.$target[0].querySelectorAll('.s_website_form_field:not(.s_website_form_custom) input')].map(el => el.name);
+            const fields = [...this.$target[0].querySelectorAll('.s_website_form_field:not(.s_website_form_custom) .s_website_form_input')].map(el => el.name);
             if (fields.length) {
                 // ideally we'd only do this if saving the form
                 // succeeds... but no idea how to do that
@@ -399,6 +401,7 @@ options.registry.WebsiteFormEditor = FormEditor.extend({
     updateUIEndMessage: function () {
         this.$target.toggleClass("d-none", this.showEndMessage);
         this.$message.toggleClass("d-none", !this.showEndMessage);
+        this.$el.find(".toggle-edit-message").toggleClass('text-primary', this.showEndMessage);
     },
     /**
      * @override
@@ -430,20 +433,11 @@ options.registry.WebsiteFormEditor = FormEditor.extend({
      * ie: The Job you apply for if the form is on that job's page.
      */
     addActionField: function (previewMode, value, params) {
-        let fieldName = params.fieldName;
+        const fieldName = params.fieldName;
         if (params.isSelect === 'true') {
             value = parseInt(value);
         }
-        this.$target.find(`.s_website_form_field.d-none:has(input[name="${params.fieldName}"])`).remove();
-        if (value) {
-            const hiddenField = qweb.render('website_form.field_hidden', {
-                field: {
-                    name: fieldName,
-                    value: value,
-                },
-            });
-            this.$target.find('.s_website_form_submit').before(hiddenField);
-        }
+        this.addHiddenField(value, fieldName);
     },
     /**
      * Changes the onSuccess event.
@@ -456,6 +450,7 @@ options.registry.WebsiteFormEditor = FormEditor.extend({
             }
             this.$target.after(this.$message);
         } else {
+            this.showEndMessage = false;
             this.$message.remove();
         }
     },
@@ -541,11 +536,33 @@ options.registry.WebsiteFormEditor = FormEditor.extend({
                         option = this._buildInput(field);
                         break;
                 }
+                if (field.required) {
+                    // Get default value or for many2one fields the first option.
+                    const defaultValue = field.defaultValue || field.records[0].id;
+                    this.addHiddenField(defaultValue, field.name);
+                }
                 uiFragment.insertBefore(option, firstOption);
             });
         });
     },
-
+    /**
+     * Add a hidden field to the form
+     *
+     * @param {string} value
+     * @param {string} fieldName
+     */
+    addHiddenField: function (value, fieldName) {
+        this.$target.find(`.s_website_form_field.d-none:has(input[name="${fieldName}"])`).remove();
+        if (value) {
+            const hiddenField = qweb.render('website_form.field_hidden', {
+                field: {
+                    name: fieldName,
+                    value: value,
+                },
+            });
+            this.$target.find('.s_website_form_submit').before(hiddenField);
+        }
+    },
     /**
      * Returns a we-input element from the field
      *
@@ -574,10 +591,12 @@ options.registry.WebsiteFormEditor = FormEditor.extend({
         selectEl.dataset.fieldName = field.name;
         selectEl.dataset.isSelect = 'true';
         selectEl.setAttribute('string', field.string);
-        const noneButton = document.createElement('we-button');
-        noneButton.textContent = 'None';
-        noneButton.dataset.addActionField = 0;
-        selectEl.append(noneButton);
+        if (!field.required) {
+            const noneButton = document.createElement('we-button');
+            noneButton.textContent = 'None';
+            noneButton.dataset.addActionField = 0;
+            selectEl.append(noneButton);
+        }
         field.records.forEach(el => {
             const button = document.createElement('we-button');
             button.textContent = el.display_name;
@@ -634,7 +653,7 @@ options.registry.WebsiteFormEditor = FormEditor.extend({
      * @private
      */
     _setLabelsMark: function () {
-        this.$target[0].querySelectorAll('span.s_website_form_mark').forEach(el => el.remove());
+        this.$target[0].querySelectorAll('.s_website_form_mark').forEach(el => el.remove());
         const mark = this._getMark();
         if (!mark) {
             return;
@@ -664,8 +683,10 @@ options.registry.WebsiteFormEditor = FormEditor.extend({
      */
     _onToggleEndMessageClick: function () {
         this.showEndMessage = !this.showEndMessage;
-        this.$el.find(".toggle-edit-message").toggleClass('text-primary', this.showEndMessage);
         this.updateUIEndMessage();
+        this.trigger_up('activate_snippet', {
+            $snippet: this.showEndMessage ? this.$message : this.$target,
+        });
     },
 });
 
@@ -794,7 +815,7 @@ options.registry.WebsiteFieldEditor = FieldEditor.extend({
      * Set the name of the field on the label
      */
     setLabelText: function (previewMode, value, params) {
-        this.$target[0].querySelector('.s_website_form_label').firstChild.textContent = value;
+        this.$target.find('.s_website_form_label_content').text(value);
         if (this._isFieldCustom()) {
             const multiple = this.$target[0].querySelector('.s_website_form_multiple');
             if (multiple) {
@@ -816,7 +837,7 @@ options.registry.WebsiteFieldEditor = FieldEditor.extend({
         const field = this._getActiveField();
         field.formatInfo.labelPosition = value;
         await this._replaceField(field);
-        this._renderListItems();
+        this.rerender = true;
     },
     /**
      * Select the display of the multicheckbox field (vertical & horizontal)
@@ -859,7 +880,7 @@ options.registry.WebsiteFieldEditor = FieldEditor.extend({
             case 'existingField':
                 return this._isFieldCustom() ? '' : this._getFieldName();
             case 'setLabelText':
-                return this.$target[0].querySelector('.s_website_form_label').firstChild.textContent.trim();
+                return this.$target.find('.s_website_form_label_content').text();
             case 'setPlaceholder':
                 return this._getPlaceholder();
             case 'selectLabelPosition':
@@ -943,7 +964,7 @@ options.registry.WebsiteFieldEditor = FieldEditor.extend({
             listTitle = multipleInputs.querySelector('.radio') ? 'Radio List' : 'Checkbox List';
             addItemTitle = 'Add new Checkbox';
             multipleInputs.querySelectorAll('.checkbox, .radio').forEach(opt => {
-                this._addItemToTable(opt.querySelector('input').value, opt.querySelector('span').textContent.trim());
+                this._addItemToTable(opt.querySelector('input').value, opt.querySelector('.s_website_form_check_label').textContent.trim());
             });
         } else {
             return;
@@ -988,18 +1009,11 @@ options.registry.WebsiteFieldEditor = FieldEditor.extend({
             selectMenu.innerHTML = '';
             const field = this.fields[this._getFieldName()];
             this._fetchFieldRecords(field).then(() => {
-                let buttonItems, availableRecords;
-                if (field.selection) {
-                    availableRecords = field.selection.map(el => {
-                        return {id: el[0], display_name: el[1]};
-                    });
-                } else if (field.records) {
-                    availableRecords = field.records;
-                }
+                let buttonItems;
                 const optionIds = Array.from(this.listTable.querySelectorAll('input')).map(opt => {
                     return field.type === 'selection' ? opt.name : parseInt(opt.name);
                 });
-                availableRecords = (availableRecords || []).filter(el => !optionIds.includes(el.id));
+                const availableRecords = (field.records || []).filter(el => !optionIds.includes(el.id));
                 if (availableRecords.length) {
                     buttonItems = availableRecords.map(el => {
                         const option = document.createElement('we-button');
@@ -1079,31 +1093,22 @@ options.registry.WebsiteFieldEditor = FieldEditor.extend({
     _renderListItems: function () {
         const multiInputsWrap = this._getMultipleInputs();
         const selectWrap = this.$target[0].querySelector('#editable_select');
-        const isCustomField = this._isFieldCustom();
         const isRequiredField = this._isFieldRequired();
         const name = this._getFieldName();
         if (multiInputsWrap) {
             const type = multiInputsWrap.querySelector('.radio') ? 'radio' : 'checkbox';
             multiInputsWrap.innerHTML = '';
-            this.listTable.querySelectorAll('input').forEach(el => {
-                const params = {
-                    field: {
-                        name: name,
-                        required: isRequiredField,
-                        formatInfo: {
-                            multiPosition: multiInputsWrap.dataset.display,
-                        }
+            const params = {
+                field: {
+                    name: name,
+                    required: isRequiredField,
+                    formatInfo: {
+                        multiPosition: multiInputsWrap.dataset.display,
                     }
-                };
-                const id = isCustomField ? el.value : el.name;
-                if (type === 'radio') {
-                    params.record = [id, el.value];
-                } else {
-                    params.record = {
-                        id: id,
-                        display_name: el.value,
-                    };
                 }
+            };
+            this._getListItems().forEach(record => {
+                params.record = record;
                 const template = document.createElement('template');
                 template.innerHTML = qweb.render(`website_form.${type}`, params);
                 multiInputsWrap.appendChild(template.content.firstElementChild);
@@ -1120,6 +1125,26 @@ options.registry.WebsiteFieldEditor = FieldEditor.extend({
         }
     },
     /**
+     * Returns an array based on the we-list containing the field's records
+     *
+     * @returns {Array}
+     */
+    _getListItems: function () {
+        if (!this.listTable) {
+            return null;
+        }
+        const isCustomField = this._isFieldCustom();
+        const records = [];
+        this.listTable.querySelectorAll('input').forEach(el => {
+            const id = isCustomField ? el.value : el.name;
+            records.push({
+                id: id,
+                display_name: el.value,
+            });
+        });
+        return records;
+    },
+    /**
      * Returns the select element if it exist else null
      *
      * @private
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 70c90f55593..f191edc8f39 100644
--- a/addons/website_form/static/src/xml/website_form_editor.xml
+++ b/addons/website_form/static/src/xml/website_form_editor.xml
@@ -26,9 +26,9 @@
     <t t-name="website_form.field">
         <div t-attf-class="form-group s_website_form_field #{field.formatInfo.col or 'col-12'} #{field.custom and 's_website_form_custom' or ''} #{(field.required and 's_website_form_required' or '') or (field.modelRequired and 's_website_form_model_required' or '')} #{field.hidden and 's_website_form_field_hidden' or ''} #{field.dnone and 'd-none' or ''}"
             t-att-data-type="field.type"
-            t-att-data-name="Field">
+            data-name="Field">
             <div t-if="field.formatInfo.labelPosition != 'none' and field.formatInfo.labelPosition != 'top'" class="row s_col_no_resize s_col_no_bgcolor">
-                <label t-attf-class="col-form-label col-sm-auto s_website_form_label #{field.formatInfo.labelPosition == 'right' and 'text-right' or ''}" t-attf-style="width: #{field.formatInfo.labelWidth or '200px'}" t-att-for="field.id">
+                <label t-attf-class="#{!field.isCheck and 'col-form-label' or ''} col-sm-auto s_website_form_label #{field.formatInfo.labelPosition == 'right' and 'text-right' or ''}" t-attf-style="width: #{field.formatInfo.labelWidth or '200px'}" t-att-for="field.id">
                      <t t-call="website_form.label_content"/>
                 </label>
                 <div class="col-sm">
@@ -46,7 +46,7 @@
 
     <t t-name="website_form.label_content">
         <t t-if="field.custom" t-set="field.string" t-value="field.name"/>
-        <t t-esc="field.string"/>
+        <span class="s_website_form_label_content" t-esc="field.string"/>
         <t t-if="field.required or field.modelRequired">
             <span class="s_website_form_mark" t-if="field.formatInfo.requiredMark" t-esc="' ' + field.formatInfo.mark"/>
         </t>
@@ -198,25 +198,25 @@
 
     <!-- Boolean Field -->
     <t t-name="website_form.field_boolean">
+        <t t-set="field.isCheck" t-value="true"/>
         <t t-call="website_form.field">
-            <div class="col-form-label">
-                <input
-                    type="checkbox"
-                    value="Yes"
-                    class="s_website_form_input"
-                    t-att-name="field.name"
-                    t-att-required="field.required || field.modelRequired || None"
-                    t-att-id="field.id"
-                />
-            </div>
+            <input
+                type="checkbox"
+                value="Yes"
+                class="s_website_form_input"
+                t-att-name="field.name"
+                t-att-required="field.required || field.modelRequired || None"
+                t-att-id="field.id"
+            />
         </t>
     </t>
 
     <!-- Selection Field -->
     <t t-name="website_form.field_selection">
+        <t t-set="field.isCheck" t-value="true"/>
         <t t-call="website_form.field">
             <div class="row s_col_no_resize s_col_no_bgcolor s_website_form_multiple" t-att-data-name="field.name" t-att-data-display="field.formatInfo.multiPosition">
-                <t t-if="!field.selection">
+                <t t-if="!field.records">
                     <input
                         class="s_website_form_input"
                         t-att-name="field.name"
@@ -225,7 +225,7 @@
                         placeholder="No matching record !"
                     />
                 </t>
-                <t t-foreach="field.selection" t-as="record">
+                <t t-foreach="field.records" t-as="record">
                     <t t-call="website_form.radio"/>
                 </t>
             </div>
@@ -234,19 +234,21 @@
 
     <!-- Radio -->
     <t t-name="website_form.radio">
+        <t t-set="recordId" t-value="field.id + record_index"/>
         <div t-attf-class="radio col-12 #{field.formatInfo.multiPosition === 'horizontal' and 'col-lg-4 col-md-6' or ''}">
-            <label class="col-form-label">
+            <div class="form-check">
                 <input
                     type="radio"
-                    class="s_website_form_input"
+                    class="s_website_form_input form-check-input"
+                    t-att-id="recordId"
                     t-att-name="field.name"
-                    t-att-value="record[0]"
+                    t-att-value="record.id"
                     t-att-required="field.required || field.modelRequired || None"
                 />
-                <span>
-                    <t t-esc="record[1]"/>
-                </span>
-            </label>
+                <label class="form-check-label s_website_form_check_label" t-att-for="recordId">
+                    <t t-esc="record.display_name"/>
+                </label>
+            </div>
         </div>
     </t>
 
@@ -280,6 +282,7 @@
         </t>
         <!-- Generic one2many -->
         <t t-if="field.relation != 'ir.attachment'">
+            <t t-set="field.isCheck" t-value="true"/>
             <t t-call="website_form.field">
                 <div class="row s_col_no_resize s_col_no_bgcolor s_website_form_multiple" t-att-data-name="field.name" t-att-data-display="field.formatInfo.multiPosition">
                     <t t-if="!field.records">
@@ -301,19 +304,21 @@
 
     <!-- Checkbox -->
     <t t-name="website_form.checkbox">
+        <t t-set="recordId" t-value="field.id + record_index"/>
         <div t-attf-class="checkbox col-12 #{field.formatInfo.multiPosition === 'horizontal' and 'col-lg-4 col-md-6' or ''}">
-            <label class="col-form-label">
+            <div class="form-check">
                 <input
                     type="checkbox"
-                    class="s_website_form_input"
+                    class="s_website_form_input form-check-input"
+                    t-att-id="recordId"
                     t-att-name="field.name"
                     t-att-value="record.id"
                     t-att-required="field.required || field.modelRequired || None"
                 />
-                <span>
+                <label class="form-check-label s_website_form_check_label" t-att-for="recordId">
                     <t t-esc="record.display_name"/>
-                </span>
-            </label>
+                </label>
+            </div>
         </div>
     </t>
 
@@ -324,6 +329,7 @@
 
     <!-- Binary Field -->
     <t t-name="website_form.field_binary">
+        <t t-set="field.isCheck" t-value="true"/>
         <t t-call="website_form.field">
             <input
                 type="file"
diff --git a/addons/website_form/static/tests/tours/website_form_editor.js b/addons/website_form/static/tests/tours/website_form_editor.js
index 60723cb4118..10ad3b996de 100644
--- a/addons/website_form/static/tests/tours/website_form_editor.js
+++ b/addons/website_form/static/tests/tours/website_form_editor.js
@@ -136,10 +136,10 @@ odoo.define('website_form_editor.tour', function (require) {
             content: "Check the resulting field",
             trigger: ".s_website_form_field.s_website_form_custom.s_website_form_required" +
                         ":has(.s_website_form_multiple[data-display='horizontal'])" +
-                        ":has(.checkbox label:contains('Iphone'):has(input[type='checkbox'][required]))" +
-                        ":has(.checkbox label:contains('Galaxy S'):has(input[type='checkbox'][required]))" +
-                        ":has(.checkbox label:contains('Xperia'):has(input[type='checkbox'][required]))" +
-                        ":has(.checkbox label:contains('Wiko Stairway'):has(input[type='checkbox'][required]))",
+                        ":has(.checkbox:has(label:contains('Iphone')):has(input[type='checkbox'][required]))" +
+                        ":has(.checkbox:has(label:contains('Galaxy S')):has(input[type='checkbox'][required]))" +
+                        ":has(.checkbox:has(label:contains('Xperia')):has(input[type='checkbox'][required]))" +
+                        ":has(.checkbox:has(label:contains('Wiko Stairway')):has(input[type='checkbox'][required]))",
             run: function () {},
         },
         ...selectButtonByData('data-multi-checkbox-display="vertical"'),
@@ -147,10 +147,10 @@ odoo.define('website_form_editor.tour', function (require) {
             content: "Check the resulting field",
             trigger: ".s_website_form_field.s_website_form_custom.s_website_form_required" +
                         ":has(.s_website_form_multiple[data-display='vertical'])" +
-                        ":has(.checkbox label:contains('Iphone'):has(input[type='checkbox'][required]))" +
-                        ":has(.checkbox label:contains('Galaxy S'):has(input[type='checkbox'][required]))" +
-                        ":has(.checkbox label:contains('Xperia'):has(input[type='checkbox'][required]))" +
-                        ":has(.checkbox label:contains('Wiko Stairway'):has(input[type='checkbox'][required]))",
+                        ":has(.checkbox:has(label:contains('Iphone')):has(input[type='checkbox'][required]))" +
+                        ":has(.checkbox:has(label:contains('Galaxy S')):has(input[type='checkbox'][required]))" +
+                        ":has(.checkbox:has(label:contains('Xperia')):has(input[type='checkbox'][required]))" +
+                        ":has(.checkbox:has(label:contains('Wiko Stairway')):has(input[type='checkbox'][required]))",
             run: function () {},
         },
 
@@ -180,10 +180,10 @@ odoo.define('website_form_editor.tour', function (require) {
         }, {
             content: "Check the resulting field",
             trigger: ".s_website_form_field.s_website_form_custom:not(.s_website_form_required)" +
-                        ":has(.radio label:contains('After-sales Service'):has(input[type='radio']:not([required])))" +
-                        ":has(.radio label:contains('Invoicing Service'):has(input[type='radio']:not([required])))" +
-                        ":has(.radio label:contains('Development Service'):has(input[type='radio']:not([required])))" +
-                        ":has(.radio label:contains('Management Service'):has(input[type='radio']:not([required])))",
+                        ":has(.radio:has(label:contains('After-sales Service')):has(input[type='radio']:not([required])))" +
+                        ":has(.radio:has(label:contains('Invoicing Service')):has(input[type='radio']:not([required])))" +
+                        ":has(.radio:has(label:contains('Development Service')):has(input[type='radio']:not([required])))" +
+                        ":has(.radio:has(label:contains('Management Service')):has(input[type='radio']:not([required])))",
             run: function () {},
         },
 
diff --git a/addons/website_form/views/snippets/s_website_form.xml b/addons/website_form/views/snippets/s_website_form.xml
index 9a4a28fe6db..5f0544f8e1a 100644
--- a/addons/website_form/views/snippets/s_website_form.xml
+++ b/addons/website_form/views/snippets/s_website_form.xml
@@ -1,7 +1,7 @@
 <?xml version="1.0" encoding="utf-8"?>
 <odoo>
 
-<template id="s_website_form" name="Form">
+<template id="s_website_form" name="Form Builder">
     <section class="s_website_form" data-vcss="001">
         <div class="container">
             <form action="/website_form/" method="post" enctype="multipart/form-data" class="o_mark_required" data-mark="*">
@@ -40,7 +40,7 @@
                     <we-button data-on-success="redirect" data-name="show_redirect_opt">Redirect</we-button>
                     <we-button data-on-success="message" data-name="show_message_opt">Show Message</we-button>
                 </we-select>
-                <we-button class="fa fa-fw fa-edit align-self-end toggle-edit-message" title="Edit Message" data-name="message_opt" data-dependencies="show_message_opt"/>
+                <we-button class="fa fa-fw fa-eye align-self-end toggle-edit-message" title="Edit Message" data-name="message_opt" data-dependencies="show_message_opt"/>
             </we-row>
             <we-urlpicker string="URL" data-select-data-attribute="/contactus-thank-you" data-attribute-name="successPage" data-name="url_opt" data-dependencies="show_redirect_opt"/>
         </div>
diff --git a/addons/website_form/views/website_form_templates.xml b/addons/website_form/views/website_form_templates.xml
index 256a9ad81f7..d991956ea29 100644
--- a/addons/website_form/views/website_form_templates.xml
+++ b/addons/website_form/views/website_form_templates.xml
@@ -4,12 +4,12 @@
     <template id="contactus_form" name="Contact Form" inherit_id="website.contactus" customize_show="True">
         <xpath expr="//div[@name='mail_button']" position="replace">
             <span class="hidden" data-for="contactus_form" t-att-data-values="{'email_to': res_company.email}" />
-            <div>
-                <section id="contactus_section" class="s_website_form" data-vcss="001">
+            <div id="contactus_section">
+                <section class="s_website_form" data-vcss="001">
                     <div class="container">
                         <form id="contactus_form" action="/website_form/" method="post" enctype="multipart/form-data" class="o_mark_required" data-mark="*" data-model_name="mail.mail" data-success-mode="redirect" data-success-page="/contactus-thank-you">
                             <div class="s_website_form_rows row s_col_no_bgcolor">
-                                <div class="form-group col-12 s_website_form_field s_website_form_custom s_website_form_required" data-type="char">
+                                <div class="form-group col-12 s_website_form_field s_website_form_custom s_website_form_required" data-type="char" data-name="Field">
                                     <div class="row s_col_no_resize s_col_no_bgcolor">
                                         <label class="col-form-label col-sm-auto s_website_form_label" style="width: 200px" for="contact1">Your Name<span class="s_website_form_mark"> *</span></label>
                                         <div class="col-sm">
@@ -17,7 +17,7 @@
                                         </div>
                                     </div>
                                 </div>
-                                <div class="form-group col-12 s_website_form_field s_website_form_custom" data-type="char">
+                                <div class="form-group col-12 s_website_form_field s_website_form_custom" data-type="char" data-name="Field">
                                     <div class="row s_col_no_resize s_col_no_bgcolor">
                                         <label class="col-form-label col-sm-auto s_website_form_label" style="width: 200px" for="contact2">Phone Number</label>
                                         <div class="col-sm">
@@ -25,7 +25,7 @@
                                         </div>
                                     </div>
                                 </div>
-                                <div class="form-group col-12 s_website_form_field s_website_form_required" data-type="email">
+                                <div class="form-group col-12 s_website_form_field s_website_form_required" data-type="email" data-name="Field">
                                     <div class="row s_col_no_resize s_col_no_bgcolor">
                                         <label class="col-form-label col-sm-auto s_website_form_label" style="width: 200px" for="contact3">Email<span class="s_website_form_mark"> *</span></label>
                                         <div class="col-sm">
@@ -33,7 +33,7 @@
                                         </div>
                                     </div>
                                 </div>
-                                <div class="form-group col-12 s_website_form_field s_website_form_custom" data-type="char">
+                                <div class="form-group col-12 s_website_form_field s_website_form_custom" data-type="char" data-name="Field">
                                     <div class="row s_col_no_resize s_col_no_bgcolor">
                                         <label class="col-form-label col-sm-auto s_website_form_label" style="width: 200px" for="contact4">Your Company</label>
                                         <div class="col-sm">
@@ -41,7 +41,7 @@
                                         </div>
                                     </div>
                                 </div>
-                                <div class="form-group col-12 s_website_form_field s_website_form_required" data-type="char">
+                                <div class="form-group col-12 s_website_form_field s_website_form_required" data-type="char" data-name="Field">
                                     <div class="row s_col_no_resize s_col_no_bgcolor">
                                         <label class="col-form-label col-sm-auto s_website_form_label" style="width: 200px" for="contact5">Subject<span class="s_website_form_mark"> *</span></label>
                                         <div class="col-sm">
@@ -49,7 +49,7 @@
                                         </div>
                                     </div>
                                 </div>
-                                <div class="form-group col-12 s_website_form_field s_website_form_custom s_website_form_required" data-type="text">
+                                <div class="form-group col-12 s_website_form_field s_website_form_custom s_website_form_required" data-type="text" data-name="Field">
                                     <div class="row s_col_no_resize s_col_no_bgcolor">
                                         <label class="col-form-label col-sm-auto s_website_form_label" style="width: 200px" for="contact6">Your Question</label>
                                         <div class="col-sm">
diff --git a/addons/website_hr_recruitment/views/website_hr_recruitment_templates.xml b/addons/website_hr_recruitment/views/website_hr_recruitment_templates.xml
index beba5e518e5..257d415cadc 100644
--- a/addons/website_hr_recruitment/views/website_hr_recruitment_templates.xml
+++ b/addons/website_hr_recruitment/views/website_hr_recruitment_templates.xml
@@ -135,79 +135,81 @@
                 <span t-field="job.name"/>
             </h2>
             <span class="hidden" data-for="hr_recruitment_form" t-att-data-values="{'department_id': job and job.department_id.id or '', 'job_id': job and job.id or ''}" />
-            <section id="forms" class="s_website_form" data-vcss="001">
-                <div class="container">
-                    <form id="hr_recruitment_form" action="/website_form/" method="post" enctype="multipart/form-data" class="o_mark_required" data-mark="*" data-model_name="hr.applicant" data-success-mode="redirect" data-success-page="/job-thank-you" hide-change-model="true">
-                        <div class="s_website_form_rows row s_col_no_bgcolor">
-                            <div class="form-group col-12 s_website_form_field s_website_form_required s_website_form_model_required" data-type="char">
-                                <div class="row s_col_no_resize s_col_no_bgcolor">
-                                    <label class="col-form-label col-sm-auto s_website_form_label" style="width: 200px" for="recruitment1">Your Name<span class="s_website_form_mark"> *</span></label>
-                                    <div class="col-sm">
-                                        <input id="recruitment1" type="text" class="form-control s_website_form_input" name="partner_name" required=""/>
+            <div id="jobs_section">
+                <section id="forms" class="s_website_form" data-vcss="001">
+                    <div class="container">
+                        <form id="hr_recruitment_form" action="/website_form/" method="post" enctype="multipart/form-data" class="o_mark_required" data-mark="*" data-model_name="hr.applicant" data-success-mode="redirect" data-success-page="/job-thank-you" hide-change-model="true">
+                            <div class="s_website_form_rows row s_col_no_bgcolor">
+                                <div class="form-group col-12 s_website_form_field s_website_form_required s_website_form_model_required" data-type="char" data-name="Field">
+                                    <div class="row s_col_no_resize s_col_no_bgcolor">
+                                        <label class="col-form-label col-sm-auto s_website_form_label" style="width: 200px" for="recruitment1">Your Name<span class="s_website_form_mark"> *</span></label>
+                                        <div class="col-sm">
+                                            <input id="recruitment1" type="text" class="form-control s_website_form_input" name="partner_name" required=""/>
+                                        </div>
                                     </div>
                                 </div>
-                            </div>
-                            <div class="form-group col-12 s_website_form_field s_website_form_required" data-type="email">
-                                <div class="row s_col_no_resize s_col_no_bgcolor">
-                                    <label class="col-form-label col-sm-auto s_website_form_label" style="width: 200px" for="recruitment2">Your Email<span class="s_website_form_mark"> *</span></label>
-                                    <div class="col-sm">
-                                        <input id="recruitment2" type="email" class="form-control s_website_form_input" name="email_from" required=""/>
+                                <div class="form-group col-12 s_website_form_field s_website_form_required" data-type="email" data-name="Field">
+                                    <div class="row s_col_no_resize s_col_no_bgcolor">
+                                        <label class="col-form-label col-sm-auto s_website_form_label" style="width: 200px" for="recruitment2">Your Email<span class="s_website_form_mark"> *</span></label>
+                                        <div class="col-sm">
+                                            <input id="recruitment2" type="email" class="form-control s_website_form_input" name="email_from" required=""/>
+                                        </div>
                                     </div>
                                 </div>
-                            </div>
-                            <div class="form-group col-12 s_website_form_field s_website_form_required" data-type="char">
-                                <div class="row s_col_no_resize s_col_no_bgcolor">
-                                    <label class="col-form-label col-sm-auto s_website_form_label" style="width: 200px" for="recruitment3">Your Phone Number<span class="s_website_form_mark"> *</span></label>
-                                    <div class="col-sm">
-                                        <input id="recruitment3" type="text" class="form-control s_website_form_input" name="partner_phone" required=""/>
+                                <div class="form-group col-12 s_website_form_field s_website_form_required" data-type="char" data-name="Field">
+                                    <div class="row s_col_no_resize s_col_no_bgcolor">
+                                        <label class="col-form-label col-sm-auto s_website_form_label" style="width: 200px" for="recruitment3">Your Phone Number<span class="s_website_form_mark"> *</span></label>
+                                        <div class="col-sm">
+                                            <input id="recruitment3" type="text" class="form-control s_website_form_input" name="partner_phone" required=""/>
+                                        </div>
                                     </div>
                                 </div>
-                            </div>
-                            <div class="form-group col-12 s_website_form_field" data-type="text">
-                                <div class="row s_col_no_resize s_col_no_bgcolor">
-                                    <label class="col-form-label col-sm-auto s_website_form_label" style="width: 200px" for="recruitment4">Short Introduction</label>
-                                    <div class="col-sm">
-                                        <textarea id="recruitment4" class="form-control s_website_form_input" name="description"></textarea>
+                                <div class="form-group col-12 s_website_form_field" data-type="text" data-name="Field">
+                                    <div class="row s_col_no_resize s_col_no_bgcolor">
+                                        <label class="col-form-label col-sm-auto s_website_form_label" style="width: 200px" for="recruitment4">Short Introduction</label>
+                                        <div class="col-sm">
+                                            <textarea id="recruitment4" class="form-control s_website_form_input" name="description"></textarea>
+                                        </div>
                                     </div>
                                 </div>
-                            </div>
-                            <div class="form-group col-12 s_website_form_field s_website_form_custom" data-type="binary">
-                                <div class="row s_col_no_resize s_col_no_bgcolor">
-                                    <label class="col-form-label col-sm-auto s_website_form_label" style="width: 200px" for="recruitment5">Resume</label>
-                                    <div class="col-sm">
-                                        <input id="recruitment5" type="file" class="form-control s_website_form_input" name="Resume"/>
+                                <div class="form-group col-12 s_website_form_field s_website_form_custom" data-type="binary" data-name="Field">
+                                    <div class="row s_col_no_resize s_col_no_bgcolor">
+                                        <label class="col-form-label col-sm-auto s_website_form_label" style="width: 200px" for="recruitment5">Resume</label>
+                                        <div class="col-sm">
+                                            <input id="recruitment5" type="file" class="form-control s_website_form_input" name="Resume"/>
+                                        </div>
                                     </div>
                                 </div>
-                            </div>
-                            <div class="form-group col-12 s_website_form_field d-none">
-                                <div class="row s_col_no_resize s_col_no_bgcolor">
-                                    <label class="col-form-label col-sm-auto s_website_form_label" style="width: 200px" for="recruitment6">Job</label>
-                                    <div class="col-sm">
-                                        <input id="recruitment6" type="hidden" class="form-control s_website_form_input" name="job_id"/>
+                                <div class="form-group col-12 s_website_form_field d-none">
+                                    <div class="row s_col_no_resize s_col_no_bgcolor">
+                                        <label class="col-form-label col-sm-auto s_website_form_label" style="width: 200px" for="recruitment6">Job</label>
+                                        <div class="col-sm">
+                                            <input id="recruitment6" type="hidden" class="form-control s_website_form_input" name="job_id"/>
+                                        </div>
                                     </div>
                                 </div>
-                            </div>
-                            <div class="form-group col-12 s_website_form_field d-none">
-                                <div class="row s_col_no_resize s_col_no_bgcolor">
-                                    <label class="col-form-label col-sm-auto s_website_form_label" style="width: 200px" for="recruitment7">Department</label>
-                                    <div class="col-sm">
-                                        <input id="recruitment7" type="hidden" class="form-control s_website_form_input" name="department_id"/>
+                                <div class="form-group col-12 s_website_form_field d-none">
+                                    <div class="row s_col_no_resize s_col_no_bgcolor">
+                                        <label class="col-form-label col-sm-auto s_website_form_label" style="width: 200px" for="recruitment7">Department</label>
+                                        <div class="col-sm">
+                                            <input id="recruitment7" type="hidden" class="form-control s_website_form_input" name="department_id"/>
+                                        </div>
                                     </div>
                                 </div>
-                            </div>
-                            <div class="form-group col-12 s_website_form_submit">
-                                <div class="row s_col_no_resize s_col_no_bgcolor">
-                                    <div style="width: 200px" class="col-sm-auto s_website_form_label"/>
-                                    <div class="col-sm">
-                                        <a href="#" role="button" class="btn btn-primary btn-lg s_website_form_send">Submit</a>
-                                        <span id="s_website_form_result"></span>
+                                <div class="form-group col-12 s_website_form_submit">
+                                    <div class="row s_col_no_resize s_col_no_bgcolor">
+                                        <div style="width: 200px" class="col-sm-auto s_website_form_label"/>
+                                        <div class="col-sm">
+                                            <a href="#" role="button" class="btn btn-primary btn-lg s_website_form_send">Submit</a>
+                                            <span id="s_website_form_result"></span>
+                                        </div>
                                     </div>
                                 </div>
                             </div>
-                        </div>
-                    </form>
-                </div>
-            </section>
+                        </form>
+                    </div>
+                </section>
+            </div>
             <div class="oe_structure mt-2"/>
         </div>
     </t>
diff --git a/addons/website_sale/views/templates.xml b/addons/website_sale/views/templates.xml
index f13469443d3..c39a0777f1e 100644
--- a/addons/website_sale/views/templates.xml
+++ b/addons/website_sale/views/templates.xml
@@ -750,7 +750,7 @@
                                 <div class="container">
                                     <form action="/website_form/" method="post" enctype="multipart/form-data" class="o_mark_required" data-mark="*" data-force_action="shop.sale.order" data-model_name="sale.order" data-success-mode="redirect" data-success-page="/shop/payment" hide-change-model="true">
                                         <div class="s_website_form_rows row s_col_no_bgcolor">
-                                            <div class="form-group col-12 s_website_form_field" data-type="char">
+                                            <div class="form-group col-12 s_website_form_field" data-type="char" data-name="Field">
                                                 <div class="row s_col_no_resize s_col_no_bgcolor">
                                                     <label class="col-form-label col-sm-auto s_website_form_label" style="width: 200px" for="sale1">Your Reference</label>
                                                     <div class="col-sm">
@@ -758,7 +758,7 @@
                                                     </div>
                                                 </div>
                                             </div>
-                                            <div class="form-group col-12 s_website_form_field s_website_form_custom" data-type="text">
+                                            <div class="form-group col-12 s_website_form_field s_website_form_custom" data-type="text" data-name="Field">
                                                 <div class="row s_col_no_resize s_col_no_bgcolor">
                                                     <label class="col-form-label col-sm-auto s_website_form_label" style="width: 200px" for="sale2">Give us your feedback</label>
                                                     <div class="col-sm">
@@ -766,7 +766,7 @@
                                                     </div>
                                                 </div>
                                             </div>
-                                            <div class="form-group col-12 s_website_form_field s_website_form_custom" data-type="binary">
+                                            <div class="form-group col-12 s_website_form_field s_website_form_custom" data-type="binary" data-name="Field">
                                                 <div class="row s_col_no_resize s_col_no_bgcolor">
                                                     <label class="col-form-label col-sm-auto s_website_form_label" style="width: 200px" for="sale3">A document to provide</label>
                                                     <div class="col-sm">