Criador de Formulário CSS com
Opções de Personalização Completa

Crie grátis atrativos formulários online e questionários
tão fácil quanto 1-2-3 usando o Criador de Formulário CSS 123ContactForm

Criador de Formulário CSS

123ContactForm é um criador de formulário online simples que te ajuda a criar formulários online atrativos com a simplicidade de arrastar e soltar. Uma vez que os formulários são criados eles podem ser facilmente personalizados usando nossos temas de formulário CSS já prontos, ou o simples editor CSS.

Quando você usa o Criador de Formulários CSS 123ContactForm para criar formulários online para seu website, você pode querer enfatizar alguns campos, alterando seu visual. Isto é facilmente feito usando código CSS para estilizar elementos do formulário. Você pode personalizar todos os campos de um tipo (todas as caixas de textos por exemplo), ou apenas um único campo. Formulários online criados com o Criador de Formulário CSS 123ContactForm são construidos de uma forma que cada elemento tenha uma ID única, e usando isto você pode personalizar o modo como se vê cada item.

Personalização de Elementos do Formulário com CSS

Personalização completa de formulários online criados com o Criador de Formulários CSS 123ContactForm

Vamos pegar esse formulário como exemplo (clique para visualizar). Usando menos de 15 linhas de código CSS, podemos personalizar os elementos do formulario CSS exatamente como queremos. Para seguir com o exemplo, digamos que você queira que se pareça assim (clique para visualizar).

Você tem que criar um arquivo CSS, meuestilo.css por exemplo, personalizá-lo como descrito abaixo, carregar o arquivo em seu site, configurar o URL a ser usado na página de Configurações do Formulário. Ou você pode adicionar o código CSS diretamente da interface do 123ContactForm.

Exemplo de personalização de formulário CSS em menos de 15 linhas de código - clique para ampliar

+ Se você olhar o código fonte do formulário, verá que a maioria dos elementos possui classes e IDs, como abaixo:

<select id="id123-control4346747" name="control4346747" class="class123-select">
Este campo de seleção (suspenso) pertence ao class denominado class123-select e tem o ID id123-control4346747. Modificando o class class123-select usando CSS as mudanças serão aplicadas em todos os campos de seleção. Modificando o ID id123-control4346747 usando CSS apenas a aparência deste campo de seleção em particular mudará. Vamos adicionar um borda esquerda vermelha em todos os controles suspensos (de seleção) e uma botão de borda azul apenas a este controle suspenso:
.class123-select { border-left:3px solid #FF0000; }
#id123-control4346747 { border-bottom:3px solid #0000FF; }

+ Vamos fazer todo o texto nesta página ser azul:

.class123-label, class123-select { color:#0066CC; }

+ Vamos fazer que todos os controles e etiquetas no formulário usem Verdana 12px como fonte:

label.descr, p.descr, .class123-radio, .class123-checkbox, .class123-select
{ font-family: Verdana; font-size: 12px; }

+ Vamos adicionar uma borda esquerda verde em todas as checkboxes:

.class123-checkbox { border-left:3px solid #336633; }

+ Vamos adicionar um fundo laranja em todas as opções suspensas (de seleção):

.class123-select option { background: #FF6600; }

+ Vamos mudar o visutal de uma certa etiqueta adicionando uma borda esquerda roxa:

#id123-title4290919 { border-left:3px solid #660066; }

+ Vamos personalizar a aparência da área de texto:

#id123-control4290921
{ border: 1px solid red ; border-radius: 10px ; -moz-border-radius: 10px ; -webkit-border-radius: 10px ; }

+ Vamos personalizar o botão Enviar:

#id123-button-send { color: yellow; }
border-left:3px solid #FF00FF

+ Você até pode personalizar a aparência dos campos de carregamento de arquivo ou a caixa de verificação de número (Captcha):

.swfupload { border-style: dashed; color: #00FF33; }
#id123-captcha
{ background: #FF6600; border-left:3px solid #FF00FF; }

Os exemplos dos elementos de formulário CSS que foram usados para personalizar este formulário podem ser encontrados aqui. Se, após ler esse tutorial, você não souber como personalizar elementos do formulário com CSS, por favor fale conosco.

Obtenha mais funções e opções de personalização com nosso criador de formulário online de arrastar e soltar


Isso foi tudo, nós adicionamos código CSS puro aos elementos do formulário gerado através do Criador de Formulário CSS 123ContactForm. Se você deseja adicionar mais funcionalidade ao seu formulário e aproveitar nossas opções de personalização, você pode usar nosso simples criador de formulários online que não requer qualquer conhecimento técnico avançado. Aqui está uma lista das funções e personalizações mais usadas:
Criador de Formulários CSS 123ContactForm - Funções