Image Image Image Image Image
Scroll to Top

Topo

formulários

30

mar
2012

Sem Comentários

Em Blog
Rails
Ruby

Por Allison

Segundo release candidate do Ruby on Rails 3.2.3 é lançado

Em 30, mar 2012 | Sem Comentários | Em Blog, Rails, Ruby | Por Allison

Fonte: IMasters

A equipe de desenvolvimento do Ruby on Rails anunciou hoje a chegada do segundo release candidate da versão 3.2.3.

O Rails 3.2.3 trouxe uma nova opção que permite que o usuário controle o comportamento de formulários remotos relacionados à geração authenticity_token. Aqueles que querem fragmentar seus formulários em cache verão que o token de autenticação também serão também serão armazenados em cache, o que não é aceitável. Entretanto, se esses formulários forem usados apenas com Ajax, é possível desabilitar a geração de token, porque ela será buscada com a meta tag.

Com a versão 3.2.3, há a opção de parar de gerar authenticity_token em formulários remotos, configurando config.action_view.embed_authenticity_token_in_remote_forms = false. Essa ação vai impedir o envio desses formulários com o javascript desabilitado. Caso a opção de não gerar o token em formulários remotos seja escolhida por padrão, é possível ainda explicitar :authenticity_token => true ao gerar o formulário para contornar essa configuração.

A opção padrão é true, o que significa que aplicativos já existentes não são afetados.

O RC inclui essa mudança no authenticity_token e duas correções para bugs. Caso não haja maiores impedimentos, a versão final deve ser liberada amanhã.

Detalhes sobre as mudanças que a nova versão traz podem ser encontrados no anúncio de lançamento.

Tags | , ,

07

jan
2012

Sem Comentários

Em Blog
CSS
HTML

Por Allison

Formulário para Captação de Email para Newsletter com CSS

Em 07, jan 2012 | Sem Comentários | Em Blog, CSS, HTML | Por Allison

Com o CSS é possível remover toda a formatação visual do HTML, fazendo com que aumente a velocidade de carregamento das páginas entre outras tantas possibilidades. Com CSS é possível fazer coisas impressionantes, como transformar um simples formulário de captação de email em um formulário mais “convidativo” e combinando com seu Layout.

Definindo as marcações do HTML

Abra o Dreamweaver (ou o bloco de notas), e adicione os seguintes códigos:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<section id="wrapper">
<div id="news">
<h1>Newsletter</h1>
<hr />
<h3>Receba nossas atualizações em seu e-mail! É grátis.</h3>
<form  action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('URL do seu feed', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><p>
<input type="text"  name="email" id="e-mail"/></p>
<input type="submit" class="solid" value="Assinar" />
<input type="hidden" value="Nome do seu Feed" name="uri"/>
<input type="hidden" name="loc" value="pt_BR"/>
</form>
</div>
</section>
</body>
</html>

O código acima irá adicionar à página um campo de texto, um botão e o texto do formulário, neste momento esta é a aparência dele.

Formatação com CSS:

Agora as mudanças começam a aparecer, antes da marcação HTML adicione o seguinte código:

<style type="text/css">
#news {
width: 260px;
height: 270px;
background: #f2f2f2;
padding: 6px 10px;
border: 1px solid #b5b5b5;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.8), inset 0 2px 2px rgba(255, 255, 255, 1), 0 5px 0 #ccc, 0 6px 0 #989898, 0 13px 0 #dfdede;
-webkit-box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.8), inset 0 2px 2px rgba(255, 255, 255, 1), 0 5px 0 #ccc, 0 6px 0 #989898, 0 13px 0 #dfdede;
box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.8), inset 0 2px 2px rgba(255, 255, 255, 1), 0 5px 0 #ccc, 0 6px 0 #989898, 0 13px 0 #dfdede;
}
</style>

O código acima ira dar o formato e cor do formulário, este código só se aplica ao background do formulário, veja o resultado:


Estilizando a caixa de texto:

Para a caixa de texto digite o seguinte código, abaixo da ultima chave ”}” do CSS.

#e-mail {
float: left;
width: 230px;
padding: 15px 5px 5px 5px;
margin-top: 30px;
margin-left: 10px;
border: 1px solid #999999;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.8), inset 0 2px 2px rgba(255, 255, 255, 1), 0 5px 0 #ccc, 0 6px 0 #989898, 0 13px 0 #dfdede;
-webkit-box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.8), inset 0 2px 2px rgba(255, 255, 255, 1), 0 5px 0 #ccc, 0 6px 0 #989898, 0 13px 0 #dfdede;
box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.8), inset 0 2px 2px rgba(255, 255, 255, 1), 0 5px 0 #ccc, 0 6px 0 #989898, 0 13px 0 #dfdede;
}

Este código dará a caixa de texto sombra e aparência de profundidade.

Estilizando o botão Enviar:

O código do botão enviar dará a ele cantos arredondados e sombra, para isso utilize o código a seguir:

input[type="submit"].solid {
float: left;
cursor: pointer;
width: 130px;
padding: 8px 6px;
margin-top:20px;
margin-left: 60px;
background-color: #d5d5d5;
color:#2c2c2c;
text-transform: uppercase;
font-weight: bold;
border: 1px solid #adadad;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.8), inset 0 2px 2px rgba(255, 255, 255, 1), 0 5px 0 #ccc, 0 6px 0 #989898, 0 13px 0 #dfdede;
-webkit-box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.8), inset 0 2px 2px rgba(255, 255, 255, 1), 0 5px 0 #ccc, 0 6px 0 #989898, 0 13px 0 #dfdede;
box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.8), inset 0 2px 2px rgba(255, 255, 255, 1), 0 5px 0 #ccc, 0 6px 0 #989898, 0 13px 0 #dfdede;
}
input[type="submit"].solid:active {
background: #d5d5d5;
position:relative;
top: 5px;
border: 1px solid #adadad;
-moz-box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.8), inset 0 2px 2px rgba(255, 255, 255, 1), 0 5px 0 #ccc, 0 6px 0 #989898, 0 13px 0 #dfdede;
-webkit-box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.8), inset 0 2px 2px rgba(255, 255, 255, 1), 0 5px 0 #ccc, 0 6px 0 #989898, 0 13px 0 #dfdede;
box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.8), inset 0 2px 2px rgba(255, 255, 255, 1), 0 5px 0 #ccc, 0 6px 0 #989898, 0 13px 0 #dfdede;
-moz-box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.6), inset 0 1px 2px rgba(255, 255, 255, 1), 0 3px 0 #dfdede, 0 4px 0 #593a11, 0 8px 0 #ccc;
-webkit-box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.6), inset 0 1px 2px rgba(255, 255, 255, 1), 0 3px 0 #dfdede, 0 4px 0 #593a11, 0 8px 0 #ccc;
box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.6), inset 0 1px 2px rgba(255, 255, 255, 1), 0 3px 0 #dfdede, 0 4px 0 #593a11, 0 8px 0 #ccc;}

Estilizando o texto:


Para as tags H1 e H3 utilizaremos este código:

 
h1 {
font:26px Verdana, Arial, Helvetica, sans-serif; color:#999999;
font-weight:bold;
margin-left:50px;
margin-top:15px;
}
h3 {
font:15px Verdana, Arial, Helvetica, sans-serif; color:#999999;
margin-left:5px;
margin-top:3px
}

Modificando os dados do formulário:

Substitua o “URL do seu feed” pelo seu endereço de feed.

EX.:

“uri=Url do seu feed” troque por

http://feedburner.google.com/fb/a/mailverify?uri=RcTutoriais&loc=pt_BR

Procure por “URI=”Nome do seu feed”” e substitua pelo nome do seu feed.

EX.:

uri=”nome do seu feed” troque por “RcTutoriais”

Teste o código no seu navegador, caso esteja funcionando copie o código que está entre as tags “<body> e </body>” e adicione como um widget no seu blog.

Este formulário foi testado no WordPress.org, Blogger e Webnode utilizando os navegadores Google Chrome, Firefox e Safari.

Lembre-se de realizar o backup do seu blog e tema antes de adicionar qualquer código.

Por que só utilizamos o conteúdo da tag “<body>” ?

Só utilizamos as outras tags para que você possa visualizar todas as etapas da construção do formulário no navegador antes de adicionar no blog. Assim ficará mais fácil de corrigir algum erro ou fazer alguma modificação.

Créditos: Escola Criatividade – Como criar um campo de pesquisa estilizado com CSS3!

Este é um guest post escrito por Rhenan Cardozo que escreve no RC Tutoriais

Fonte: CriarSites

Tags |

23

nov
2011

Sem Comentários

Em Blog
PHP

Por Allison

phpFormGenerator – Desenvolva formulários de contato para seu site sem saber programar

Em 23, nov 2011 | Sem Comentários | Em Blog, PHP | Por Allison

O phpFormGenerator é uma ferramenta utilizada para desenvolvimento de formulários em PHP sem que você precise fazer qualquer tipo de codificação! Aqueles formulários com várias opções para marcar, listas de opções e outros controles que você possa imaginar, são adicionadas de forma automática com essa ferramenta.

Está ferramenta utiliza uma interface web para guiar os usuários pelos passos a serem seguidos para chegar ao resultado: o formulário. É uma ferramenta muito completa, gratuita e além de você poder enviar a mensagem do formulário para um e-mail, você pode também salvá-la em um banco de dados!

COMO FUNCIONA

Primeiramente, você precisa ter o script em mãos para poder instalá-lo em seu servidor. Você pode baixá-lo no site do projeto: http://sourceforge.net/projects/phpformgen/ . Lembrando: você precisa de um serviço de hospedagem com suporte a PHP e com a função mail() do PHP ativada. Após fazer o download você deve descompactar o arquivo utilizando o Winrar ou similar e em seguida fazer o upload da pasta descompactada para o servidor.

Após isso acesse a pasta que foi enviada para o seu servidor: www.seusite.com/phpform

OBS: para você ter acesso a interface e poder criar os seus formulários você deve atribuir permissão de leitura/escrita para as seguintes pastas:

  • forms
  • forms/admin
  • use
  • forms/admin/config.inc.php
  • forms/admin/data.dat
  • forms/form1.html
  • forms/process.php

Informações postadas por Fábio Almeida do blog Criar Programas

Fonte: CriarSites

Tags | , , ,