Nesta seção iremos ensinar como criar um formulário personalizado para acessar o webmail de sua conta.
Para tal, três arquivos serão criados: Um contendo o HTML onde estará o formulário de acesso, outro contendo uma folha de estilo para personalizar sua página e por último um código javascript para auxiliar no preenchimento, validação e comportamento de sua página.
Você também pode optar pelo download dos arquivos compactados no fim desta página ou clicando aqui.
Passo 1
Nosso primeiro passo é criarmos o arquivo php no qual estará nosso formulário de login.
Recomenda-se que o campo de nome _retorno seja o endereço completo de onde está situado o arquivo php.
Em nosso exemplo iremos dar o nome deste arquivo de formulario.php.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Login - Webmail</title>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body onLoad="carregaDados();">
<div id="webmail-login">
<!--
Não é necessário alterar este endereço.
Caso você não tenha uma logo, a padrão da DialHost irá aparecer no local
-->
<img
src="http://www.dialhost.com.br/dialclient/v2/Dialclient/Mail/covers/testedevel.dialhost.com.br.png"
alt="Logo"
>
<!-- A imagem sempre será em PNG -->
<?php
/**
* Retornos possíveis de sucesso e erro:
* $_GET['type'] = 'error' OU 'success'
* $_GET['mensagem'] = Será uma mensagem ou de erro ou de sucesso
* dependendo da variável $_GET['type']
* $_GET['user'] = Será o email que o usuário digitou
*/
if(isset($_GET['type']) && $_GET['type']) {
if($_GET['type'] == 'success')
echo "<div id=\"notificacao\" class=\"success\">".$_GET['mensagem']."</div>";
elseif($_GET['type'] == 'error')
echo "<div id=\"notificacao\" class=\"error\">".$_GET['mensagem']."</div>";
}
?>
<form
name="form"
action="https://dialmail.dialhost.com.br/"
method="post"
>
<input
type="hidden"
name="_task"
value="login"
>
<input
type="hidden"
name="_action"
value="login"
>
<input
type="hidden"
name="_timezone"
value="_default_"
>
<!-- Adicione uma URL para onde seus usuários irão retornar
caso errem os dados de entrada ou saiam do sistema após o uso.
O ideal é o mesmo endereço (URL) onde está este arquivo php. -->
<input
type="hidden"
name="_retorno"
value="http://exemplo.com/formulario.php"
>
<label for="user">E-mail:</label>
<input
name="_user"
id="user"
size="40"
autocapitalize="off"
autocomplete="off"
type="text"
value="<?php if(isset($_GET['user']) && $_GET['user']) echo $_GET['user']; ?>"
>
<label for="pass">Senha:</label>
<input
name="_pass"
id="pass"
size="40"
autocapitalize="off"
autocomplete="off"
type="password"
>
<input
type="submit"
class="button mainaction"
value="Entrar"
onClick="return validaCampos();"
/>
<div id="lembrar-me">
<input
id="lembrar"
type="checkbox"
name="_lembrar"
value="1"
>
<label for="lembrar">Lembrar-me</label>
</div>
</form>
</div>
</body>
</html>
Passo 2
No próximo passo iremos criar um arquivo em CSS onde estará a folha de estilo que altera a visualização do tema do formulário.
Vamos dar o nome deste arquivo como style.css
#webmail-login{
font-family: Arial, Sans-serif;
width: 300px;
height: 300px;
position: absolute;
margin: -150px 0px 0px -150px;
top: 50%;
left: 50%;
color: #666666;
font-size: 14px;
}
#webmail-login img{
max-height: 60px;
margin-bottom: 30px;
}
#webmail-login #notificacao{
display: none;
color: #747474;
background-color: #EEEEEE;
border-left: 5px solid #747474;
padding: 13px 5px 13px 10px;
position: relative;
top: -15px;
font-size: 12px;
}
#webmail-login #notificacao.success{
color: #46AC00;
border-color: #46AC00;
}
#webmail-login #notificacao.error{
color: #E95F00;
border-color: #E95F00;
}
#webmail-login label{
margin-bottom: 5px;
display: block;
}
#webmail-login input[type="text"], #webmail-login input[type="password"]{
font-family: Arial, Sans-serif;
color: #666666;
background-color: #F5F5F5;
border: 1px solid #DDDDDD;
border-radius: 3px;
width: 278px;
padding: 13px 10px;
margin-bottom: 15px;
font-size: 13px;
}
#webmail-login input[type="submit"]{
font-family: Arial, Sans-serif;
color: #FFFFFF;
background-color: #46AC00;
border: none;
border-radius: 3px;
width: 130px;
height: 29px;
font-size: 15px;
float: left;
}
#webmail-login #lembrar-me{
font-size: 14px;
margin: 5px 0px 0px 20px;
float: left;
}
#webmail-login #lembrar-me label{
display: inline;
}
Passo 3
Por último iremos adicionar algumas funções em javascript para validação de campos, tratamento de erros e funcionalidades de persistência de dados no formulário. Em nosso exemplo iremos dar o nome deste arquivo de script.js.
function validaCampos(){
var email = eval("document.forms[0]._user");
var senha = eval("document.forms[0]._pass");
var lembrar = document.forms[0]._lembrar;
if(!(email.value).length || !(senha.value).length){
alert('Todos os campos devem ser preenchidos!');
return false;
}
var expressao = /^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/i;
if(!expressao.test(email.value)){
alert('Digite um e-mail válido!');
return false;
}
if(lembrar.checked)
setCookie('lembrar_email',email.value,30);
else
setCookie('lembrar_email','',-1);
}
function carregaDados(){
var mensagem = getUrlVars()['mensagem'];
if(mensagem){
mensagem = decode(getUrlVars()['mensagem']);
usuario = decode(getUrlVars()['user']);
tipo = decode(getUrlVars()['type']);
var notificacao = document.getElementById('notificacao');
notificacao.innerHTML = mensagem;
notificacao.className = tipo;
notificacao.style.display = 'block';
setTimeout(function(){
notificacao.style.display = 'none';
},10000);
}
var email = getCookie('lembrar_email');
if(email){
document.forms[0]._user.value = email;
document.forms[0]._lembrar.checked = true;
} else {
if(typeof usuario != "undefined" && usuario)
document.forms[0]._user.value = usuario;
}
}
function getUrlVars() {
var vars = {};
var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) {
vars[key] = value;
});
return vars;
}
function decode(content) {
var encoded = content;
return decodeURIComponent(encoded.replace(/\+/g, " "));
}
function setCookie(c_name,value,exdays){
var exdate = new Date();
exdate.setDate(exdate.getDate() + exdays);
var c_value = escape(value) + ((exdays==null) ? "" : "; expires=" + exdate.toUTCString());
document.cookie = c_name + "=" + c_value;
}
function getCookie(c_name){
var c_value = document.cookie;
var c_start = c_value.indexOf(" " + c_name + "=");
if (c_start == -1)
c_start = c_value.indexOf(c_name + "=");
if (c_start == -1){
c_value = null;
} else{
c_start = c_value.indexOf("=", c_start) + 1;
var c_end = c_value.indexOf(";", c_start);
if (c_end == -1)
c_end = c_value.length;
c_value = unescape(c_value.substring(c_start,c_end));
}
return c_value;
}
Esse artigo te ajudou?
Por favor, nos informe se este artigo te ajudou a resolver seu problema. Essa é a única maneira de melhorarmos.