Adotar o design do BrandStudio
Cada novo formulário usa as cores e o tipo de letra da tua marca do BrandStudio — incluindo os criados a partir de um modelo ou pelo Kenji. No passo «Design», encontras para isso, no topo, o cartão «Marca» com o interruptor «Adotar o design do BrandStudio». Enquanto estiver ligado, os controlos por baixo ficam bloqueados; se alterares algo no BrandStudio, o formulário acompanha automaticamente.
Se desligares o interruptor, o formulário mantém o aspeto que tem nesse momento e, a partir daí, és tu que o desenhas; o cartão mostra «design próprio». Se o voltares a ligar, segue novamente a marca — o teu design próprio é posto de lado, e «Anular: design próprio de …» recupera-o. Se a tua marca ainda não tiver cores, aplica-se até lá o tema simples com o tipo de letra da marca.
O cartão «Marca» só aparece se a tua conta tiver uma marca. O interruptor tem efeito imediato, sem «Guardar».
- Abre o formulário no passo «Design».
- Desliga «Adotar o design do BrandStudio» se quiseres criar o design tu próprio.
- Define as cores, o tipo de letra e os campos e clica em «Guardar».
Logótipo e dados da empresa
Com «Mostrar o logótipo e os dados da empresa da marca» no mesmo cartão, aparecem por cima do formulário o logótipo e o nome da tua marca e, por baixo, o nome da empresa, o e-mail, o telefone, o site e os ícones dos teus canais nas redes sociais que guardaste no SocialStudio. A notificação, a cópia e a cópia em PDF incluem os mesmos dados, e o título da página no navegador passa a ser, por exemplo, «Reservar mesa · Café Lumen».
O interruptor está ligado por predefinição e não depende do design: quem cria o seu próprio design continua a mostrar o logótipo. Se faltarem dados da empresa na marca, o formulário usa o remetente do Invoice. Aplica-se depois de «Guardar»; «Pré-visualização no navegador» mostra o aspeto.
- Abre o passo «Design».
- No cartão «Marca», liga ou desliga «Mostrar o logótipo e os dados da empresa da marca».
- Clica em «Guardar» e verifica com «Pré-visualização no navegador».
Ambientes e cores
Se criares o design tu próprio, um clique em «Ambientes» define tudo de uma vez: Simples, Meia-noite, Salva, Areia, Rosa, Oceano, Tinta ou Céu. Depois, afinas um a um em «Cores»: «Fundo», «Cartão» — a superfície onde estão os campos —, «Cor do texto» e «Botões e destaque».
Para «Fundo» e «Cartão» existe ainda o controlo «Opacidade», para que uma imagem de fundo possa transparecer. O texto e o destaque ficam totalmente opacos: um texto semitransparente dependeria do que está por baixo e poderia ficar ilegível sem ninguém dar por isso. Escolhe uma cor de texto e uma cor de cartão bem distintas — são elas que garantem a legibilidade do teu formulário.
- No passo «Design», desliga a adoção do design do BrandStudio.
- Clica num ambiente, por exemplo «Areia».
- Ajusta cores individuais e a opacidade e clica em «Guardar».
Tipo de letra
Em «Tipo de letra», escolhes um de onze tipos de letra livres — «Sistema», Inter, DM Sans, Poppins, Space Grotesk, Karla, Lora, Playfair Display, Fraunces, Manrope ou IBM Plex Mono. A pré-visualização mostra-o de imediato.
Um tipo de letra próprio é carregado como ficheiro: «Carregar o teu ficheiro de tipo de letra (woff2, no máx. 2 MB)». O nome do ficheiro passa a ser o seu nome, e «Remover» volta a retirá-lo. Se o teu tipo de letra estiver alojado num serviço de tipos de letra, abre «Tipo de letra próprio por ligação» e introduz a ligação para o ficheiro CSS (https) e o nome da família tipográfica — a pré-visualização mostra se ambos correspondem. O tipo de letra é então carregado a partir do local para onde a ligação aponta. Um ficheiro carregado tem prioridade sobre a ligação e a seleção.
- No passo «Design», desliga a adoção do design do BrandStudio.
- Escolhe um tipo de letra em «Tipo de letra» — ou carrega um ficheiro woff2.
- Clica em «Guardar».
Estilo dos campos e arredondamento
Em «Campos», defines o aspeto dos campos de introdução: «Contorno» com um rebordo fino, «Superfície» com um fundo ligeiramente colorido ou «Linha» apenas com uma linha de base — a forma mais sóbria. O controlo «Arredondamento» torna o cartão, os campos e os botões mais angulosos ou mais arredondados.
Como todos os controlos deste passo, isto só tem efeito se tiveres desligado a adoção do design do BrandStudio e aplica-se depois de «Guardar».
Imagem de fundo
Por trás do cartão pode ficar uma imagem. Em «Imagem de fundo» há três fontes: um ficheiro teu (PNG, JPEG ou WebP até 3 MB), a pesquisa «Ou procurar imagens livres …» e «Ou escolher das minhas imagens» do teu MediaStudio. Em qualquer caso, a imagem é copiada para o teu formulário e servida a partir do teu endereço — não há nenhum serviço externo envolvido.
O cartão com os campos continua legível por cima; quanto da imagem transparece, defines com a opacidade de «Cartão». «Remover imagem» volta a retirá-la. Uma imagem escolhida fica guardada de imediato. Carregar, pesquisar e a tua própria biblioteca ficam bloqueados enquanto o formulário seguir a tua marca.
- No passo «Design», desliga a adoção do design do BrandStudio.
- Em «Imagem de fundo», escreve um termo como «café» e clica em «Pesquisar».
- Clica numa imagem — fica de imediato por trás do formulário.
Pré-visualização e teste
No centro de «Design», o teu formulário aparece tal como os teus clientes o veem — com as mesmas cores, tipos de letra e linhas que na página de preenchimento. Com «Computador», «Tablet» e «Telemóvel» mudas a largura; na largura de telemóvel, as linhas passam a ficar umas por baixo das outras, exatamente como para o cliente. À esquerda está a estrutura: um clique num campo leva-te a «Construir», com o campo já selecionado.
«Testar» torna a pré-visualização preenchível: as condições funcionam e nada é guardado. «Pré-visualização» volta atrás. «Pré-visualização no navegador» guarda primeiro e depois abre a verdadeira página de preenchimento num novo separador — aí vês também o logótipo e os dados da empresa, o valor de referência e o total da encomenda. Isto também funciona enquanto o formulário ainda estiver fechado; uma faixa no topo diz «Pré-visualização», e nada é enviado a partir daí.
No passo «Construir», o formulário aparece propositadamente neutro; é este passo que mostra o aspeto.
- Abre o passo «Design» e escolhe «Telemóvel».
- Clica em «Testar» e preenche o formulário a título de teste.
- Clica em «Pré-visualização no navegador» para veres a página real.