Como personalizar a tela de login do webmail

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;
}	

Download

  • Este artigo foi útil para você?
  • Sim   Não

Tags relacionadas

formulario

php

webmail