Como criar um formulário

Insira formulários no seu site Cloud Site e tenha os dados do formulário enviados para o seu email ou armazenados online para serem baixados mais tarde.

Arraste o widget de Formulário para a sua página

?name=media_1329155435429.png

Clique na aba de widgets (1) e depois clique em Formulário (2). Arraste o widget Formulário (3) para a sua página.

Dê um nome para o seu Formulário

?name=media_1329155696976.png

Dê um nome para o seu Formulário (1)é importante não ter dois fomulários com o mesmo nome pois isso pode causar problemas com a captura dos dados.

As configurações de email, link interno e link externo são opcionais e seu formulário irá funcionar sem elas. Você não precisa fazer essas configurações agora, pode fazê-las mais tarde.

Para criar um link da página com o site atual, selecione uma página a partir do menu Link Interno (3). Para criar um link da página com um site diferente digite a URL (incluindo http://www) no campo Link Externo (4). Para ter os dados do formulário enviados para um email use o campo Email (2).

Clique em Criar Formulário para continuar.

O widget Formulário ficará visível na sua página

?name=media_1349866557514.png

Arraste um Campo do Formulário para dentro do widget Formulário

?name=media_1329157217490.png

Arraste os widget da sua aba Formulário (caixa de texto, área de texto, estrelas de avaliação etc) para dentro do seu Widget de Formulário.

Nota: Você não pode arrastar um Widget de Formulário dentro de outro Widget de Formulário.

Clique no botão de configurações para editar o Formulário

?name=media_1329157558351.png

No modo editar, passe o cursor sobre os campos do seu Formulário para ver os controles de cada campo

?name=media_1329157661927.png

Clique e escreva sobre os Nomes e Descrições (1) dos campos do Formulário para alterá-los.
Clique no botão configurações (2) para configurar a validação do seu Formulário, entre outras opções.
Use o ícone arrastar (3) para mover o campo dentro do widget Formulário.
Clique no botão excluir (4) para remover o campo.

Configure a Validação do campo do Formulário (opcional)

?name=media_1329842446946.png

Clique no botão de configurações (veja passo anterior) e selecione a aba de Validação. Escolha o tipo de validação e mensagem de erro.

Painel do Formulário

?name=media_1329842827567.png

1. Escolha um título para o seu formulário (isto é muito útil se você planeja ter mais de um formulário no seu site)
2. Escolha uma descrição para o seu formulário
3. Este é o texto que aparecerá no botão de enviar o formulário
4. Se você quiser que uma Mensagem apareça depois que o usuário enviar o fomulário, você não deve modificar as configurações da Página Interna. Se você modificá-la a mensagem ão irá aparecer.
5. Esta é a página de resultado que o usuário irá ver depois de clicar no botão enviar (opcional).
6. Digite seu email no campo email para: se você quiser que os dados sejam enviados para o seu email.
7. Para baixar os dados do formulário em uma planilha, clique na aba Banco de Dados e então clique em Exportar. Você pode ver seu banco de dados aqui ou no painel Gerenciar.

Caixa de Seleção (lista com múltiplas opções)

?name=media_1329844971264.png

Clique no ícone de configurações (1) e depois dê um duplo-clique no ícone de configurações do campo (2).

?name=media_1338481240587.png

Escolha um título (1) para o menu e uma descrição (opcional).

Na coluna da esquerda (2) entre com os valores que você quer no seu banco de dados e na coluna da direita (3) entre com os valores que você quer que o usuário veja. Clique em Adicionar uma nova lista de valores (4) para adicionar valores.

Quando acabar, clique em OK (5).

Editando o estilo de um Formulário

?name=media_1349867045359.png

Clique na aba de Esilos (1) e então selecione o elemento do Formulário que você deseja editar (2).

Mude a aparência do botão enviar

?name=media_1338482155669.png

Se você quer mudar a aparência do botão enviar do seu formulário, você pode adicionar alguns códigos em CSS:

.widget-formarea-button {   background: url("#") darkviolet;  /*You can use an URL to show an image or you can use a color*/   height: 25px;   /*This is the height of your button*/   width: 100px;    /*This is the width of your button*/   margin: 0px;   border: 0px;       text-align: center;    /*The label in your button will be aligned to the center*/   color: white;    /*This changes the colour of your text*/   border-radius: 5px;    /*Add some rounded corners to your button*/ } .widget-formarea-button:hover   /*This is the state of your button when hovered*/ {   background: url("#") black;   /*I changed the color so when I hover, the violet changes to black*/   height: 25px;   width: 100px;   margin: 0px;   border: 0px;   text-align: center;   color: white;   border-radius: 5px; }

Se você já tem a imagem do botão, você pode fazer um upload da imagem para o editor, pegar a URL daquela imagem e substituir o símbolo # no código por essa URL.
Tenha certeza que a largura e altura no código são as mesmas do tamanho da sua imagem.

Quando usar cores, você pode digitar o nome da cor ou usar o código HEX. Você pode ver os nomes das cores AQUI.