Passo 1: Acessar a seção de Páginas
No painel de controle do seu blog, localize a seção "Páginas" no menu à esquerda e clique nela. Isso abrirá a lista de páginas existentes no seu blog.
Passo 2: Criar uma nova página
No canto superior direito da lista de páginas, você encontrará o botão "Nova página". Clique nele para começar a criar uma nova página.
Passo 3: Preencher os detalhes da página
Uma nova janela será aberta, onde você poderá preencher os detalhes da sua página. Insira um título para a página no campo "Título da página". Este será o texto exibido na barra de título da página.
Passo 4: Ativar a visualização de HTML
Agora, para ativar a visualização de HTML, clique no botão "Visualizar" na parte superior da janela de criação da página. Ao clicar no botão "Visualizar", a janela mudará para a visualização de HTML, e cole o codigo abaixo:
<html lang="pt-br">
<head>
<style>
.form-container {
width: 400px;
background: linear-gradient(#212121, #212121) padding-box,
linear-gradient(145deg, transparent 35%,#e81cff, #40c9ff) border-box;
border: 2px solid transparent;
padding: 32px 24px;
font-size: 14px;
font-family: inherit;
color: white;
display: flex;
flex-direction: column;
gap: 20px;
box-sizing: border-box;
border-radius: 16px;
}
.form-container button:active {
scale: 0.95;
}
.form-container .form {
display: flex;
flex-direction: column;
gap: 20px;
}
.form-container .form-group {
display: flex;
flex-direction: column;
gap: 2px;
}
.form-container .form-group label {
display: block;
margin-bottom: 5px;
color: #717171;
font-weight: 600;
font-size: 12px;
}
.form-container .form-group input {
width: 100%;
padding: 12px 16px;
border-radius: 8px;
color: #fff;
font-family: inherit;
background-color: transparent;
border: 1px solid #414141;
}
.form-container .form-group textarea {
width: 100%;
padding: 12px 16px;
border-radius: 8px;
resize: none;
color: #fff;
height: 96px;
border: 1px solid #414141;
background-color: transparent;
font-family: inherit;
}
.form-container .form-group input::placeholder {
opacity: 0.5;
}
.form-container .form-group input:focus {
outline: none;
border-color: #e81cff;
background-color: transparent;
}
.form-container .form-group textarea:focus {
outline: none;
border-color: #e81cff;
background-color: transparent;
}
.form-container .form-submit-btn {
display: flex;
align-items: flex-start;
justify-content: center;
align-self: flex-start;
font-family: inherit;
color: #717171;
font-weight: 600;
width: 40%;
background: #313131;
border: 1px solid #414141;
padding: 12px 16px;
font-size: inherit;
gap: 8px;
margin-top: 8px;
cursor: pointer;
border-radius: 6px;
}
.form-container .form-submit-btn:hover {
background-color: #fff;
border-color: #fff;
}
</style>
</head>
<body>
<div class="form-container">
<form class="form">
<div class="form-group">
<label for="email">Email</label>
<input id="email" name="email" required="true" type="text" />
</div>
<div class="form-group">
<label for="textarea">Mensagem</label>
<textarea cols="50" id="textarea" name="textarea" required="true" rows="10"></textarea>
</div>
<button class="form-submit-btn" type="submit">Enviar</button>
</form>
</div>
</body>
</html>
Na visualização de HTML, você pode editar o código HTML da sua página conforme necessário. Você pode adicionar ou modificar elementos. Certifique-se de ter conhecimento em HTML antes de fazer alterações nesta visualização.
Passo 5: Salvar as alterações
Após concluir as edições na visualização de HTML, clique no botão "Salvar" ou "Publicar" para salvar as alterações e criar a nova página. Agora sua página de contacto está criada e pronta para ser exibida no seu blog.
Para que este formulário funcione corretamente, é necessário configurá-lo com o formsubmit. Para aqueles que não sabem como configurar o formulário, basta deixar um comentário neste post indicando que não sabe, e eu irei ajudar com as instruções de configuração.
Por que é importante ter um formulário de contato personalizado em um site?
Ter um formulário de contato personalizado em um site é importante porque oferece uma maneira conveniente para os visitantes entrarem em contato com o proprietário do site. Ele permite que os usuários enviem mensagens diretamente, sem precisar recorrer a outros métodos de comunicação, como e-mail ou telefone. Um formulário de contato personalizado também pode solicitar informações específicas, facilitando a organização e a resposta eficiente às consultas dos usuários.
Quais são os benefícios de um formulário de contato personalizado para a experiência do usuário?
Um formulário de contato personalizado melhora a experiência do usuário ao oferecer uma interface amigável e direta para entrar em contato com o proprietário do site. Os visitantes podem preencher os campos necessários de forma fácil e rápida, sem a necessidade de copiar e colar endereços de e-mail ou alternar entre aplicativos de mensagens. Além disso, um formulário de contato personalizado pode incluir recursos como validação de dados em tempo real, confirmações automáticas de envio e mensagens de sucesso, garantindo uma interação suave e sem problemas.
Como um formulário de contato personalizado pode aumentar as taxas de conversão ou leads?
Um formulário de contato personalizado pode aumentar as taxas de conversão ou leads, pois fornece uma maneira direta e conveniente para os usuários expressarem seu interesse ou fazerem perguntas sobre produtos, serviços ou outras informações relevantes. Ao otimizar o formulário com campos relevantes e intuitivos, é possível coletar informações valiosas sobre os visitantes, permitindo o acompanhamento posterior e a criação de oportunidades de negócios.
Como um formulário de contato personalizado pode contribuir para a imagem de marca de um site?
Um formulário de contato personalizado pode contribuir para a imagem de marca de um site ao refletir os valores e a identidade visual da marca. Ele pode ser projetado com cores, fontes e elementos gráficos que estejam em consonância com a identidade visual da marca, transmitindo uma aparência profissional e consistente. Além disso, a personalização do formulário, como incluir campos específicos relacionados aos produtos ou serviços oferecidos, demonstra atenção aos detalhes e um compromisso em fornecer uma experiência personalizada aos usuários, o que fortalece a percepção da marca como confiável e orientada ao cliente.
Postar um comentário