Formulários de Contato em Web Apps com Streamlit
Streamlit é uma biblioteca Python para a criação de web apps de forma rápida e muito simplificada. Sua estrutura é totalmente compatível com as melhores bibliotecas de análise de dados, inteligência artificial, machine learning e visualização de dados. Mas, para criar web apps funcionais e profissionais, precisamos de recursos adicionais. Entre eles estão formulários de contato.
Formulários de contato são elementos essenciais de qualquer aplicação web. Eles possibilitam interações com os usuários dos nossos aplicativos, o que é fundamental. Neste post, faremos um passo a passo explicando como integrar formulários de contato ao seu app Streamlit.
Esse post assume que você já possui Streamlit instalado. Você pode saber mais sobre Streamlit aqui, aqui e aqui.
Código
Crie um código Python chamado app.py. Nele, importaremos o Streamlit e definiremos um título (header) para nosso app:
import streamlit as st
st.header(":mailbox: Entre em Contato")
Para garantir que tudo está funcionando bem, salve o arquivo e o execute com o comando: streamlit run app.py. Se tudo estiver correto em seu código, você devera ver esse layout no seu navegador.
Formulários de Contato
Em seguida, copiaremos o formulário de contato de uma API. Acesse esse link. Copie o formulário disponível logo na entrada da página e o cole no seu código logo abaixo do header definido anteriormente. O formulário precisa ser inserido como markdown. Veja o código abaixo.
contact_form = """
<form action="https://formsubmit.co/your@email.com" method="POST">
<input type="text" name="name" placeholder="Nome" required>
<input type="email" name="email" placeholder="E-mail" required>
<button type="submit">Enviar</button>
</form>
"""
st.markdown(contact_form, unsafe_allow_html=True)
Note que adicionamos dois placeholders ao formulário, um no nome e outro no e-mail, e alteramos o texto do botão de submit para enviar. No trecho acima, onde está escrito your@email.com, adicione o seu e-mail corretamente. Salve o código. Com a adição do formulário, o layout do seu aplicativo deve estar assim:
Agora precisamos tornar o formulário funcional. Use o formulário no seu app para enviar uma mensagem para qualquer email, pode ser teste@gmail.com. Isso fará a API do formulário enviar para o seu e-mail um link de ativação. O link será enviado para o e-mail que você inseriu no código do app, portanto, não use um e-mail falso. Ative o link e o formulário se tornará totalmente funcional.
Textarea para Mensagens
Na página da API do formulário (clique aqui), existem várias opções de elementos que podemos adicionar no nosso formulário de contato. Adicionaremos uma área de texto (textarea) para possibilitar o envio de mensagens. Com isso, nosso código completo está assim:
import streamlit as st
st.header(":mailbox: Entre em Contato")
contact_form = """
<form action="https://formsubmit.co/your@email.com" method="POST">
<input type="text" name="name" placeholder="Nome" required>
<input type="email" name="email" placeholder="E-mail" required>
<textarea name="message" placeholder="Deixe sua mensagem"></textarea>
<button type="submit">Enviar</button>
</form>
"""
st.markdown(contact_form, unsafe_allow_html=True)
Com a adição da área de textos, nosso formulário já pode enviar mensagens direto para o e-mail especificado. O layout dele, por enquanto, está assim:
Estilização
Para terminar, adicionaremos configurações de estilo para tornar nosso formulário mais atraente. Na mesma pasta onde está seu arquivo Python, crie um arquivo chamado style.css. Dentro dele, copie o código abaixo e salve o arquivo. Ele contém as configurações de estilo dos elementos do formulário.
/* Inputs and textarea */
input[type="text"],
input[type="email"],
textarea {
width: 100%;
padding: 12px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
margin-top: 6px;
margin-bottom: 16px;
resize: vertical;
}
/* submit button*/
button[type="submit"] {
background-color: #04aa6d;
color: white;
padding: 12px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
&:hover {
border: 2px #04aa6d solid;
color: #04aa6d;
background-color: #fff;
}
}
Configurações Finais
De volta ao código app.py, precisamos informar ao Streamlit para usar as configurações de estilo definidas anteriormente. Isso é feito com o seguinte trecho:
with open('style.css') as f:
st.markdown(f"<style>{f.read()}</style>", unsafe_allow_html=True)
Copie esse trecho no final do seu código app.py. Salve tudo e veja seu formulário para contatos completamente estilizado e funcional como mostrado na imagem abaixo.
