[Google Sheets] liste déroulante dans formulaire latéral

Bonjour,
Je suis vraiment novice en terme de script.
Je souhaiterais ajouter une liste déroulante dans un formulaire latéral sur google sheet.
Voici mon code actuel pour la partie script

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 
function onOpen() {
  SpreadsheetApp.getUi()
    .createMenu('Ajouter un prospect')
    .addItem('Formulaire (barre latérale)', 'formulaire')
    .addToUi();
}
 
function formulaire() {
  const html = HtmlService.createHtmlOutputFromFile('form').setTitle('Ajouter un utilisateur');
  SpreadsheetApp.getUi().showSidebar(html);
}
 
function ajouterLigne(tab) {
  SpreadsheetApp.getActiveSheet().appendRow(tab);
}

et la partie form.html

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
<!DOCTYPE html>
<html>
  <head>
    <style>
      body {
        padding: 0 0.5rem; /* à remplacer par "margin: 0;" si affiché dans une boîte de dialogue */
        color: #333;
        font-family: Roboto, Arial, sans-serif;
        overflow: hidden;
      }
      p {
        margin: 0.8rem 0 0.3rem;
      }
      .annuler {
        display: inline-block;
        margin-top: 1rem;
        font-size: 0.88rem;
        color: #888;
        cursor: pointer;
      }
      .annuler:hover {
        text-decoration: underline;
      }
      input[type="text"] {
        display: block;
        width: 100%;
        box-sizing: border-box;
        margin-bottom: 1rem;
        padding: 0.6rem 0.7rem;
        background: #f3f3f3;
        color: #444;
        border: none;
        font-size: 1.08rem;
        border-radius: 0.4rem;
      }
      input[type="button"] {
        display: block;
        width: 100%;
        padding: 0.7rem 0 0.6rem;
        border: none;
        background: #30a392;
        color: #fff;
        font-size: 1.15rem;
        cursor: pointer;
        border-radius: 0.4rem;
      }
      input[type="button"]:hover {
        background: #40ad96;
      }
    </style>
  </head>
  <body>
    <p>Nom</p>
    <input type="text" name="nom" value="">
    <p>Prénom</p>
    <input type="text" name="prenom" value="">
    <p>Tel</p>
    <input type="text" name="tel" value="">
    <p>Email</p>
    <input type="text" name="email" value="">
    <p>Type de contact</p>
    <input type="text" name="type_contact" value="">
    <input type="button" value="Ajouter" onclick="ajouter()">
    <span class="annuler" onclick="google.script.host.close()">Annuler</span>
    <script>
      function ajouter() {
        const inputs = document.querySelectorAll('input[type="text"]');
        let tab = [];
 
        for (const input of inputs) {
          tab.push(input.value);
        }
 
        if (tab.join('') == '') {
          alert('Le formulaire est vide !');
          return;
        }
 
        inputs.forEach(input => input.value = '');
 
        google.script.run.ajouterLigne(tab);
      }
    </script>
  </body>
</html>

Sauriez-vous m'indiquer comment faire?
Merci d'avance