Mesmo que você use unload
ou beforeunload
o formulário nunca vai ser exibido, isto é porque não tem como prevenir isto, o uso do unload
é voltado para pequenas ações, como por exemplo destruir cookies
ou sessionStorage
, leia esta resposta:
Jquery beforeunload é chamado quando clico em link
No momento que o evento é executado a página já começou a ser "destruída" (leia sobre destruct e GUI em aplicações C/C++ ou C# para entender como funciona as GUIs em sistemas operacionais).
Também entenda que os eventos unload
e beforeunload
não são chamados apenas no fechar janela, mas qualquer página que fizer ele vai se executado, pois o evento não se chama onCloseWindow
(esse evento nem existe), ele se chama onunload
, traduzindo unload
seria como "descarregar", ou seja a página carrega será descarregada (ou destruída), a cada paginação, fechamento de aba ou janela o evento é disparado, ou seja usar estes eventos para chamar formulários é uma péssima ideia em todos sentidos, além de muito difícil de implementar (ou seria impossível).
Recomendo que analise qual a necessidade deste formulário e veja se este é realmente o melhor caminho.
Ainda sim se quiser mesmo fazer da maneira que esta (que eu pessoalmente acho uma péssima experiencia para o usuário) você deve tentar usar o beforeunload
com com return
. Veja esta minha resposta:
Enviar mensagem para navegador
O código deve ficar algo como:
window.addEventListener('beforeunload', (event) => {
// Cancel the event as stated by the standard.
event.preventDefault();
//Para customizar o texto, e é necessário para funcionar no Safari e Chrome, IE e Firefox anterior a versão 4
event.returnValue = '';
});
Esse é o máximo que você vai conseguir impedir o fechamento, se o usuário aceitar, se não, infelizmente não tem como obrigar ou controlar o navegador do usuário, o navegador é dele e se ele quiser fechar tudo não tem o que fazer, levando em consideração que é muito chato algumas limitações que são colocadas em páginas web que só fazem o usuário querer evitar certos sites.
Como alguns site conseguem fazer isso, como o facebook?
Então fui testar, algumas pessoas me disseram que no facebook aparecia um modal customizado quando fechava a janela, mas na verdade isso é uma impressão errada do que ocorre, na verdade quando clicamos em fechar aba ou navegador a tela que aparece é esta (se o campo texto ou comentário tiver com uma mensagem não enviada):

Aquele modal customizado aparece quando clicamos em links dentro do site aonde o script esta sendo executado graças ao window.onpopstate
, ou seja só ocorre se clicar e links dentro do site e não se fechar a página, veja que aqui preenchi o campo "status" do facebook e tentei clicar no link de um outro perfil, a imagem que me apareceu foi esta:

Então na verdade é um engano e é impossível customizar o popup/modal do beforeunload
, pois se não poderíamos controlar os eventos sem solicitar ao usuário o que seria basicamente você controlar as ações do usuário (e isso ninguém quer né).