PROMOÇÃO - Magazine Luiza - NÃO PERCA!

Publicidade:

Encontre no blog...

17/07/2017

Como inserir um formulário de contato JotForm no Wordpress

JotForm - Visual Dicas

Formulário de Contato JotForm

Já mostramos aqui no Visual Dicas como criar um formulário de contato gratuito a partir do aplicativo JotForm (leia: Como criar um formulário de contato gratuito para colocar no seu blog ou site.

Neste post vamos mostrar como inserir o formulário no Wordpress.

Colocando o JotForm no Wordpress

Neste post vamos mostrar como inserir o formulário no Wordpress. Siga as instruções abaixo:

1- Acesse o painel do Wordpress

Para entrar no painel do Wordrpress digite o endereço:

http://www.SEU SITE/wp-login.php

Entre com o seu nome de usuário (username) e senha (password). Clique em [Log in].

Como inserir um formulário de contato JotForm no Wordpress - Visual Dicas

2) Crie uma página estática

Diferentemente das postagens, as páginas estáticas não possuem uma data de publicação e não permitem comentários. Elas são utilizadas para criar áreas que não precisam de interação com seu leitor, como o índice de artigos, página de contato e a página de informações sobre seu blog.

No menu lateral clique em [Paginas]. Depois clique em [Adicionar nova].

Como inserir um formulário de contato JotForm no Wordpress - Visual Dicas

3) Adicione título e código JotForm

Em Digite o título aqui, insira o nome da página. No nosso exemplo vamos chamá-la de “Contato”.

Como inserir um formulário de contato JotForm no Wordpress - Visual Dicas

Para acrescentar o código HTML do JotForm, clique no botão [Texto] do editor do Wordpress.

Como inserir um formulário de contato JotForm no Wordpress - Visual Dicas

4) Copiando o código do JotForm

Acesse o aplicativo JotForm. Se não estiver conectado faça o login do site.

Como inserir um formulário de contato JotForm no Wordpress - Visual Dicas

No formulário que você criou, clique em More. Depois selecione [Publicar].

Como inserir um formulário de contato JotForm no Wordpress - Visual Dicas

Clique na aba [Incorporar].

Como inserir um formulário de contato JotForm no Wordpress - Visual Dicas

Clique agora no botão [Copiar].

Como inserir um formulário de contato JotForm no Wordpress - Visual Dicas

5) Colando o código HTML na página estática do Wordpress

Volte para o painel do Wordpress e em Texto cole o código que você copiou. Após o código copiado, clique em [Visualizar] para você verificar como vai ficar a sua página de contato.

Como inserir um formulário de contato JotForm no Wordpress - Visual Dicas

Veja como ficou a visualização do nosso exemplo.

Como inserir um formulário de contato JotForm no Wordpress - Visual Dicas

Volte para o painel do Wordpress e clique em [Publicar].

Como inserir um formulário de contato JotForm no Wordpress - Visual Dicas

Pronto, a sua página de contatos está concluída.

Como inserir um formulário de contato JotForm no Wordpress - Visual Dicas

6) Coloque a página no menu do Wordpress.

Se você tem um menu horizontal ou vertical, coloque sua página de contato como mais um elemento para seus usuários.

Para acrescentar a nova página de contatos no seu menu, clique em Aparência no menu lateral. Depois selecione [Menus]. Em Páginas, clique na aba Mais Recentes e selecione a nova página adicionada.

Como inserir um formulário de contato JotForm no Wordpress - Visual Dicas

No nosso exemplo selecionamos “Contato”. Clique em [Salvar menu].

Como inserir um formulário de contato JotForm no Wordpress - Visual Dicas

Observe que a sua nova página de contatos foi adicionada no menu.

Como inserir um formulário de contato JotForm no Wordpress - Visual Dicas'

Se desejar alterar a posição da página, basta arrastá-la para o local desejado.

Como inserir um formulário de contato JotForm no Wordpress - Visual Dicas

Finalizado, clique no botão [Salvar].

Como inserir um formulário de contato JotForm no Wordpress - Visual Dicas

Pronto, sua nova página de contatos está inserida no menu…

Como inserir um formulário de contato JotForm no Wordpress - Visual Dicas

Para conferir nossa página de teste, clique em: Página de Testes Visual Dicas

byALF 

Leia também: Como inserir um formulário de contato JotForm no Blogger

03/07/2017

Como inserir um formulário de contato JotForm no Blogger

image

Formulário de Contato JotForm

Já mostramos aqui no Visual Dicas como criar um formulário de contato gratuito a partir do aplicativo JotForm: Como criar um formulário de contato gratuito para colocar no seu blog ou site.

Neste post vamos mostrar como inserir o formulário no site. Vamos usar como exemplo os 3 CMS mais utilizados no mercado, que são: o Blogger, o Wordpress e o Joomla.

Nesta primeira parte vamos mostrar como inserir formulário de Contato JotForm no Blogger. Nas próximas postagens mostraremos como colocar o JotForm no Wordpress e no Joomla.

Colocando o JotForm no Blogger

1) Crie uma página estática

Diferentemente das postagens, as páginas estáticas não possuem uma data de publicação e não permitem comentários. Elas são utilizadas para criar áreas que não precisam de interação com seu leitor, como o índice de artigos, página de contato e a página de informações sobre seu blog.

Acesse o site: Blogger 

Após fazer o login, entre no painel do blog onde será criada a página estática de contato. Selecione [Páginas] e clique no botão [Nova página].

image

Digite o nome da sua página, como “Contatos”, por exemplo. Depois clique no botão [HTML].

image

2) Copiando o código do JotForm

Acesse o aplicativo JotForm. Se não estiver conectado faça o login do site.

image

No formulário que você criou, clique em More. Depois selecione [Publicar].

image

Clique na aba [Incorporar].

image

Clique no botão [Copiar].

image

3) Colando o código na página estática do Blogger

Volte para o Blogger e em HTML cole o código que você copiou. Após o código copiado, clique em [ Visualizar] para você verificar como vai ficar a sua página de contato.

image

Veja como ficou a visualização do nosso exemplo.

image

Volte para o painel do Blogger e clique em [Publicar].

image

Pronto, a sua página de contatos está concluída.

image

4) Coloque a página no menu do Blogger.

Se você tem um menu horizontal ou vertical, coloque sua página de contato como mais um elemento para seus usuários.

Caso você não saiba como criar um menu, leia: Como criar um menu simples na nova interface do Blogger (2015).

Para acrescentar a nova página de contatos no seu menu, localize o Gadget Páginas.

image

Clique em [Editar].

image

Marque a caixa de seleção da sua nova página, que no nosso exemplo é Contatos.

image

Se desejar, arraste a página até uma nova posição no menu. No nosso exemplo vamos manter a página na última posição do menu.

image

Depois de tudo definido, não esqueça de clicar no botão [Salvar].

image

Pronto, sua nova página de contatos está inserida no menu…

image

Para conferir nossa página de teste, clique em: Página de Testes Visual Dicas

byALF

27/06/2017

Série Arduino Básico #22 - Efeito de fogo com LEDs

5 projetos bem legais para quem está começando aprender Arduino - Visual DicasSérie Arduino Básico

Continuando nossa Série Arduino básico, hoje mostraremos um projeto bem legal para você criar um efeito aleatório de cintilação, utilizando novamente os recursos do PWM para imitar uma chama cintilante.

Observação: Este efeito poderá ser utilizado em modelos de ferromodelismo, imitando que uma casa esteja pegando fogo. Também pode se utilizar este efeito como recurso de uma lareira, efeitos especiais para filmes, teatro e maquetes.

Tudo para o seu Arduino!

No Squids Arduino você vai poder construir este projeto e aprender como ele funciona. Muito legal!!!

Obs.: Todos projetos foram testados pelo site www.squids.com.br/arduino que traz um tutorial completo para cada montagem com a lista de componentes, código do programa (sketch), simulação online, montagem do circuito e explicação detalhada do projeto.

Para ver todos projetos básicos publicados no Squids, acesse: projetos básicos

Gerar efeito de fogo

Acesse o link: Projeto 22 - Efeito de fogo com LEDs

Este projeto cria uma um efeito cintilante a partir de 3 LEDs (dois amarelos e um vermelho). A mistura de cores e intensidade de brilho dos LEDs ira gerar um efeito que imita uma chama.

Este efeito se dá ajustando-se aleatoriamente o brilho de cada um dos 3 LED, graças ao PWM (Pulse Width Modulation, em português, modulação por largura de pulso) para que resultem brilhos com valores diferentes.  Difundindo a luz com o cilindro de papel (folha A4), você visualiza o efeito das cores vermelho e amarelo de forma uniforme e agradável.

image

Veja abaixo o vídeo do projeto em ação:

Veja o tutorial completo em: Projeto 22 - Efeito de fogo com LEDs

byALF

22/06/2017

Como criar um formulário de contato gratuito para colocar no seu blog ou site

Resultado de imagem para jotform logo

Formulário de contato gratuito

Neste artigo vamos mostrar como criar um formulário de contato com os seus leitores para você inserir este formulário no blog ou site que você administra.

O formulário de contato é um elemento essencial para o seu blog. Com ele você cria um canal direto com os seus leitores, podendo receber sugestões, críticas e  informações que podem ajudar você a melhorar o conteúdo, layout e navegabilidade do seu blog.

Veja a seguir como criar um formulário de contato simples com o aplicativo JotForm:

Criando um formulário simples com JotForm

Acesse o site: JotForm

Clique [SIGN UP] para fazer o cadastro gratuito.

image

Preencha o formulário e clique no botão [CREAT MY ACCOUNT].

image

Clique no botão [SKIP].

image

Entre no seu navegador de e-mail e na mensagem do JotForm clique no botão [Verify Now].

image

Clique em [Let’s go!].

image

Você será redirecionado para a página de criação do formulário.

image

Clique em [Adicionar Elemento] para inserir os elementos do seu formulário…

image

Como nosso formulário será o mais simples possível, vamos acrescentar somente os campos Nome Completo, E-mail, Assunto, Mensagem e Código Captcha (código de segurança).

Observe que o aplicativo permite itens BÁSICOS, PAGAMENTOS e WIDGETS. No nosso exemplo vamos utilizar apenas elementos básicos. Depois, você poderá testar elementos mais avançados no seu formulário de contato.

image

Para criar o nosso primeiro elemento, “Nome Completo”, arraste o elemento Entrada de Texto Curta para o campo “Arraste sua primeira pergunta da esquerda para cá”.

image

Clique no ícone para configurar o elemento…

image

Na guia Geral, digite o nome do campo em Texto da Pergunta, defina o alinhamento em Alinhamento do Rótulo e se o campo é obrigatório deixando Obrigatório como SIM.

image

Depois na guia OPÇÕES, defina o tamanho do campo. Se desejar, clique em Largura para definir o número máximo de caracteres permitido.

image

Na guia AVANÇADO, você poderá ainda inserir outros recursos como Controle de Conteúdo, Texto Ajuda, Valor Pré-definido e opção para Somente Leitura.

image

Depois de configurado o nosso primeiro elemento, volte para o menu [Adicionar Elemento].

image

Da mesma forma que o elemento anterior, arraste e configure os elementos E-mail e Entrada de Texto Longa.

Obs.: Se você inseriu um elemento fora de posição, não se preocupe. Basta arrastar o elemento para a posição desejada…

Obs.: Não esqueça de deixar todos campos como obrigatório.

image

Finalmente, vamos colocar o último elemento do nosso último elemento, o código de segurança Captcha.

image

Se deseja, altere o nome do Cabeçalho.

image

Se desejar, clique em [+Add Your Logo] para inserir o logo do seu site.

image

Carregue o arquivo da logomarca,

image

Veja como está ficando nosso formulário.

image

Alterando o layout do formulário

Para alterar o layout do formulário, clique no ícone com um rolo de pintura.

image

Você poderá alterar as Cores, Estilo, CSS (Folha de estilo para HTML) e Temas.

image

No nosso exemplo vamos adicionar o tema Brick Wall que aparece em Feature Themes.

image

Para remover o tema, passe o mouse sobre Tema Atual e clique em [Remover Tema].

image

Observe que quando você altera o tema do layout, é necessário inserir novamente a logomarca. Clique novamente em [+Add Your Logo] e carregue o arquivo da logomarca.

image

Visualizando o seu Formulário

Clique no botão Pré-visualizar formulário.

image

Na figura abaixo, veja como ficou o nosso formulário:

image

Para voltar ao editor, clique novamente Pré-visualizar formulário. Faça as alterações que desejar.

image

Outras Configurações

Você poderá fazer configurações do formulário como status, condições, e-mails, integrações e página de agradecimento.

image

Para alterar os e-mails para o recebimento dos dados, clique em [EMAILS].

Observe que o e-mail de NOTIFICAÇÃO1 é o e-mail que você cadastrou no site. Para alterar clique no ícone com formato de lápis. Para acrescentar outros e-mails, clique no botão [ + ].

image

Teste os recursos para conhecê-los melhor.

Publicando o formulário no blog ou site

No menu superior, clique em [PUBLICAR].

image

Na guia lateral acesse [INCORPORAR]. Em INCORPORAR, clique no botão [COPIAR]. Depois cole o código no blog ou site.

image

Se desejar, teste antes o código como mostramos a seguir…

Testando o formulário no Squids Editor

Abra o Squids Editor: Squids Editor

Cole o código que você copiou no lado esquerdo do editor. Clique no botão [Executar].

image

Preencha os dados do formulário e envie para verificar se você está recebendo as informações.

image

Depois de enviar a mensagem, abra o seu e-mail e verifique se recebeu os dados.

image

Verificado seu formulário, copie e cole o código no seu blog ou site.

Veja abaixo como ficou o nosso formulário. Aproveite para mandar uma mensagem para nós…

Editando seu formulário de contato

Acesse o site: JotForm

Se você não estiver logado, faça o login. Vá em [Meus Formulários] e clique sobre o formulário que deseja editar.

image

Clique em [Editar].

image

Faça as alterações desejadas.

Observação: Não é necessário copiar e colar novamente o código do formulário. Toda alteração no formulário é realizada em tempo real onde o código foi inserido.

Criando um novo formulário

Em Meus Formulários, clique no botão [Criar formulário].

Obs.: Se você não foi direcionado para a página abaixo, acesse o link: www.jotform.com/myforms

image

Clique no botão [Criar].

Observação: Se desejar, você poderá utilizar um modelo pronto clicando  [Selecionar].

image

Dê um nome para o seu formulário. Clique em [Continue].

image

Aguarde alguns instantes. Clique em [Add Form Element] para inserir os elementos do seu formulário como já mostramos antes..

image

Preços e Planos

Se você deseja algo mais, veja todos os planos do JotFom: JotForm Preços.

O Plano FREE permite a criação de até 5 formulários com no máximo 1.000 visualizações.

image

byALF

Gostou do Post? Então espalhe!

Quem está curtindo...

Encontre no blog...

Gostou? Então espalhe!

Twitter Delicious Facebook Digg Stumbleupon Favorites More