How to access the value in a form field

I would like to access the values in a form field from another section where I inject code. How can I do that? There should be a way to access the field value, like

You want to set a default value, or want to target a field to change style or?

Imagine the user fill the form, I want to get the values from the fields in the form from a javascript that is going to execute in another section in the page.

Here is the code I created. Here I get the values of the checkbox options with, for instance, 

function enviaMessage() {
	var message = "Produtos escolhidos: "
	let checkbox=document.getElementById("tahini");
	if (checkbox.checked){
		message = message + checkbox.value;
	}
	checkbox=document.getElementById("zaatar");
	if (checkbox.checked){
		message = message + ", " + checkbox.value;
	}
	checkbox=document.getElementById("1001");
	if (checkbox.checked){
		message = message + ", " + checkbox.value;
	}
	checkbox=document.getElementById("granola");
	if (checkbox.checked){
		message = message + ", " + checkbox.value;
	}
	nome = document.getElementById("nome").value;
	morada = document.getElementById("morada").value;
	telefone = document.getElementById("telefone").value;
	mensagem = document.getElementById("mensagem").value;
	message = message + " Nome: " + nome + " Morada: " + morada + " Telefone: " + telefone + " mensagem: " + mensagem
	var href = "https://api.whatsapp.com/send?phone=+xxxxxxxxx&text=" + message;
   window.location.href = href;
}

<div id="encomendaProdutos">
<form>
<fieldset id="escolhaProdutos" aria-required="true">
<legend class="title">
Escolha o(s) seu(s) produto(s):
<span class="required" aria-hidden="true">*</span>
</legend>
<label><input type="checkbox" id="tahini" name="escolhaProdutos-field" value="tahini"> Tahini 🌱 (Pasta de Sésamo) 300 Gms</label>
<label><input type="checkbox" id="zaatar" name="escolhaProdutos-field" value="zaatar"> Za'atar 150 Gms</label>
<label><input type="checkbox" id="1001" name="escolhaProdutos-field" value="1001"> Cabaz Gourmet Mil e Uma Noites</label>
<label><input type="checkbox" id="granola" name="escolhaProdutos-field" value="granola"> Granola Max 500 Gms</label>
</fieldset>
  <br><br>
  <label for="nome">Nome:</label><br>
  <input id="nome" name="nome" type="text" spellcheck="false" maxlength="30" data-title="Nome" aria-required="true">
  <br><br>
  <label for="morada">Morada:</label><br>
  <input id="morada" name="morada" type="text" spellcheck="false" maxlength="60" data-title="Morada" aria-required="true">
  <label for="telefone">Telefone:</label><br>
  <input type="number" id="telefone" name="telefone" maxlength="9" data-title="Telefone" aria-required="true"><br><br> 
  <label for="mensagem">Se quiser enviar uma mensagem para o Chef, introduza-a aqui:</label><br>
  <input id="mensagem" name="mensagem" type="text" spellcheck="false" maxlength="150" data-title="mensagem" aria-required="true">
  <input type="button" onclick="enviaMensagem()" value="Pressione aqui para enviar mensagem por whatsapp">
</form>
</div>

If I want to do the same with the form created in squarespace, there is no place when we create the form to set an id for each field. The only way to find out the name / id (some fields have id others only name), I have to request the page in the browser use the Developer tools to see the source and find out the name or id.

Following is the code I copied from a portion of the form related with the checkbox. As you can see they do not use id argument, and the name in all of the options is the same, so it is difficult in a javascript to find out which option were selected.

 <div class="option"><label><input type="checkbox" name="checkbox-6d194b33-6926-428e-855a-eb95df7046b3-field" value="Tahini 🌱 (Pasta de Sésamo) 300 Gms"/> Tahini 🌱 (Pasta de Sésamo) 300 Gms</label></div>
 <div class="option"><label><input type="checkbox" name="checkbox-6d194b33-6926-428e-855a-eb95df7046b3-field" value="Za'atar 150 Gms"/> Za'atar 150 Gms</label></div>
<div class="option"><label><input type="checkbox" name="checkbox-6d194b33-6926-428e-855a-eb95df7046b3-field" value="Cabaz Gourmet Mil e Uma Noites"/> Cabaz Gourmet Mil e Uma Noites</label></div>
<div class="option"><label><input type="checkbox" name="checkbox-6d194b33-6926-428e-855a-eb95df7046b3-field" value="Granola Max 500 Gms"/> Granola Max 500 Gms</label></div>
                

I found a way to do the code:

const checkboxes = document.getElementsByName('checkbox-6d194b33-6926-428e-855a-eb95df7046b3-field');
// loop through all the checkboxes and check if it's checked
for (let i = 0; i < checkboxes.length; i++) {
if (checkboxes[i].checked) { // if the checkbox is checked, log its value console.log(checkboxes[i].value); } }

But what I really would like is a way to set the names/id of the fields when I create the form in squarespace