diff --git a/addons/web/static/src/legacy/js/widgets/name_and_signature.js b/addons/web/static/src/legacy/js/widgets/name_and_signature.js
index d133f17d17e..84e4c74085e 100644
--- a/addons/web/static/src/legacy/js/widgets/name_and_signature.js
+++ b/addons/web/static/src/legacy/js/widgets/name_and_signature.js
@@ -6,7 +6,6 @@ var config = require('web.config');
 var utils = require('web.utils');
 var Widget = require('web.Widget');
 
-var _t = core._t;
 
 /**
  * This widget allows the user to input his name and to draw his signature.
@@ -72,11 +71,13 @@ var NameAndSignature = Widget.extend({
         this.fontColor = options.fontColor || 'DarkBlue';
         this.displaySignatureRatio = options.displaySignatureRatio || 3.0;
         this.signatureType = options.signatureType || 'signature';
-        this.signMode = options.mode || 'draw';
+        // default mode should be auto except when noInputName is true and no default name
+        this.signMode = options.mode || (options.noInputName && !this.defaultName ? 'draw' : 'auto');
         this.noInputName = options.noInputName || false;
         this.currentFont = 0;
         this.drawTimeout = null;
         this.drawPreviewTimeout = null;
+        this.signatureAreaHidden = false;
     },
     /**
      * Loads the fonts.
@@ -143,6 +144,8 @@ var NameAndSignature = Widget.extend({
                 this.$autoButton.hide();
             }
             this.$nameInputGroup.hide();
+        } else if (this.defaultName === "") {
+            this._hideSignatureArea();
         }
 
         // Resize the signature area if it is resized
@@ -356,7 +359,7 @@ var NameAndSignature = Widget.extend({
      */
     _getCleanedName: function () {
         var text = this.getName();
-        if (this.signatureType === 'initial') {
+        if (this.signatureType === 'initial' && text) {
             return (text.split(' ').map(function (w) {
                 return w[0];
             }).join('.') + '.');
@@ -469,7 +472,7 @@ var NameAndSignature = Widget.extend({
             for (var i = 0; i < self.fonts.length; i++) {
                 var imgSrc = self._getSVGText(
                     self.fonts[i],
-                    self._getCleanedName() || _t("Your name"),
+                    self._getCleanedName(),
                     width,
                     height
                 );
@@ -501,6 +504,19 @@ var NameAndSignature = Widget.extend({
         return def;
     },
 
+    _hideSignatureArea: function () {
+        this.$signatureField.hide();
+        this.$signatureGroup.hide();
+        this.signatureAreaHidden = true;
+    },
+
+    _showSignatureArea: function () {
+        this.$signatureField.show();
+        this.$signatureGroup.show();
+        this.signatureAreaHidden = false;
+        this.resetSignature();
+    },
+
     //----------------------------------------------------------------------
     // Handlers
     //----------------------------------------------------------------------
@@ -632,6 +648,9 @@ var NameAndSignature = Widget.extend({
      * @param {Event} ev
      */
     _onInputSignName: function (ev) {
+        if (this.signatureAreaHidden && this._getCleanedName()) {
+            this._showSignatureArea();
+        }
         if (this.signMode !== 'auto') {
             return;
         }
diff --git a/addons/web/static/src/legacy/xml/name_and_signature.xml b/addons/web/static/src/legacy/xml/name_and_signature.xml
index 55d4b27c005..05148f251e4 100644
--- a/addons/web/static/src/legacy/xml/name_and_signature.xml
+++ b/addons/web/static/src/legacy/xml/name_and_signature.xml
@@ -41,7 +41,7 @@
         <div class="o_web_sign_name_and_signature">
             <div class="o_web_sign_name_group form-group">
                 <label class="col-form-label" t-att-for="'o_web_sign_name_input_' + widget.htmlId">Full Name</label>
-                <input type="text" name="signer" t-att-id="'o_web_sign_name_input_' + widget.htmlId" class="o_web_sign_name_input form-control" t-att-value="widget.defaultName" placeholder="Your name" required=""/>
+                <input type="text" name="signer" t-att-id="'o_web_sign_name_input_' + widget.htmlId" class="o_web_sign_name_input form-control" t-att-value="widget.defaultName" placeholder="Type your name to sign" required=""/>
             </div>
 
             <!--
@@ -53,13 +53,13 @@
                 <div class="card-header">
                     <div class="row no-gutters">
                         <div class="col-auto">
-                            <a role="button" href="#" t-attf-class="o_web_sign_draw_button mr-2 btn btn-light {{ widget.signMode === 'draw' ? 'active': '' }}">
-                                Draw
+                            <a role="button" href="#" t-attf-class="o_web_sign_auto_button mr-2 btn btn-light {{ widget.signMode === 'auto' ? 'active': '' }}">
+                                Auto
                             </a>
                         </div>
                         <div class="col-auto">
-                            <a role="button" href="#" t-attf-class="o_web_sign_auto_button mr-2 btn btn-light {{ widget.signMode === 'auto' ? 'active': '' }}">
-                                Auto
+                            <a role="button" href="#" t-attf-class="o_web_sign_draw_button mr-2 btn btn-light {{ widget.signMode === 'draw' ? 'active': '' }}">
+                                Draw
                             </a>
                         </div>
                         <div class="col-auto">
diff --git a/addons/web/static/tests/legacy/widgets/name_and_signature_tests.js b/addons/web/static/tests/legacy/widgets/name_and_signature_tests.js
new file mode 100644
index 00000000000..615dd473f31
--- /dev/null
+++ b/addons/web/static/tests/legacy/widgets/name_and_signature_tests.js
@@ -0,0 +1,80 @@
+odoo.define('web.name_and_signature_tests', function (require) {
+    "use strict";
+
+    const { NameAndSignature } = require("web.name_and_signature");
+    const testUtils = require("web.test_utils");
+    const MockedNameAndSignature = NameAndSignature.extend({
+        events: {
+            ...NameAndSignature.prototype.events,
+            'signature_changed': () => {},
+        },
+        _onChangeSignature: () => {},
+        _drawCurrentName: () => {},
+    });
+
+    async function MockedNameAndSignatureGenerator (options) {
+        const parent = $("#qunit-fixture");
+        const mockedNameAndSignature = new MockedNameAndSignature(parent, options);
+        await testUtils.mock.addMockEnvironment(mockedNameAndSignature, {
+            mockRPC: function (route, args) {
+                if (route == "/web/sign/get_fonts/") {
+                    return Promise.resolve();
+                }
+            }
+        });
+        await mockedNameAndSignature.appendTo(parent);
+        await mockedNameAndSignature.resetSignature();
+        return mockedNameAndSignature;
+    }
+
+    QUnit.module('widgets', {}, function () {
+        QUnit.module('name_and_signature', {
+            beforeEach: function () {
+                this.defaultName = 'Don Toliver'
+            },
+        }, function () {
+            QUnit.test("test name_and_signature widget", async function (assert) {
+                assert.expect(5);
+                const nameAndSignature = await MockedNameAndSignatureGenerator({
+                    defaultName: this.defaultName
+                });
+                assert.equal(nameAndSignature.signMode, 'auto');
+                const nameInput = nameAndSignature.$el.find('.o_web_sign_name_input');
+                assert.ok(nameInput.length);
+                assert.equal(this.defaultName, nameInput.val());
+                const drawButton = nameAndSignature.$el.find('.o_web_sign_draw_button');
+                assert.ok(drawButton.length);
+                await drawButton.click();
+                assert.equal(nameAndSignature.signMode, 'draw');
+            });
+
+            QUnit.test("test name_and_signature widget without name", async function (assert) {
+                assert.expect(4);
+                const nameAndSignature = await MockedNameAndSignatureGenerator({});
+                assert.equal(nameAndSignature.signMode, 'auto');
+                assert.ok(nameAndSignature.signatureAreaHidden);
+                const nameInput = nameAndSignature.$el.find('.o_web_sign_name_input');
+                assert.ok(nameInput.length);
+                await nameInput.val(this.defaultName).trigger('input');
+                assert.notOk(nameAndSignature.signatureAreaHidden);
+            });
+
+            QUnit.test("test name_and_signature widget with noInputName and default name", async function (assert) {
+                assert.expect(1);
+                const nameAndSignature = await MockedNameAndSignatureGenerator({
+                    noInputName: true,
+                    defaultName: this.defaultName
+                });
+                assert.equal(nameAndSignature.signMode, 'auto');
+            });
+
+            QUnit.test("test name_and_signature widget with noInputName", async function (assert) {
+                assert.expect(1);
+                const nameAndSignature = await MockedNameAndSignatureGenerator({
+                    noInputName: true,
+                });
+                assert.equal(nameAndSignature.signMode, 'draw');
+            });
+        });
+    });
+});