Formulário
Aqui você conferi as alteração do seu site personalizado e as possibilidades que irá encontrar.
Last updated
Aqui você conferi as alteração do seu site personalizado e as possibilidades que irá encontrar.
Last updated
O design dos formulários e entradas do seu site de evonext depende de configurações avançadas de cor e estilo. Em cada etapa, a personalização do design de seus formulários de reserva permitirá que você ajuste o evonext para corresponder a qualquer marca corporativa, estilos de cores e temas do seu site.
Conteúdo
O acesso à seção Personalizar é feito através do menu seu site – evonext » Configurações » Formulário.
Tudo o que é necessário para personalizar o formulário está localizado no menu lateral direito.
O menu é dividido em três partes:
As configurações (onde você configura fontes e cores globais)
Seção (onde, atualmente, você só pode configurar a visibilidade da barra lateral e seus rótulos)
Os Passos (onde você pode configurar individualmente as cores, etiquetas, ordem dos campos, traduções, e se alguns campos serão obrigatórios ou não).
Para alguns elementos, você pode escolher se eles serão mostrados no seu site ou não, e para algumas seleções como Locais ou colaboradores, você pode escolher se eles serão obrigatórios no processo de reserva ou não. Todas as alterações são visíveis em tempo real, portanto, você verá as alterações na visualização assim que forem feitas.
Em cada etapa, no canto inferior direito do menu lateral, você poderá acessar as cores e ver quais cores globais afetam qual seção da etapa selecionada. Por exemplo, na etapa “Serviços”:
Nas Configurações Globais da seção Personalizar, você poderá escolher a fonte que usará no formulário (você pode selecionar uma das padrão ou usar sua própria fonte personalizada) e modificar as cores que serão aplicadas ao longo do Formato.
Roboto
Latim
Merriweather
Montserrat
Nunito
Asap Condensed
Open Sans
Barlow
Oswald
Amargo
Poppins
Outras
Aqui, você pode definir as cores primárias e de estado, a cor da barra lateral, o conteúdo, os campos de entrada, os menus suspensos, o calendário e os botões do formulário.
Como mencionado anteriormente, se você não gostar de algumas cores ao seguir as etapas, lembre-se de clicar no botão “Alterar cores” no canto inferior direito do menu lateral.
Este menu é composto pelas cores “Primary”, “Success”, “Warning” e “Error” que podem ser encontradas em todo o formulário.
Nesta etapa, a cor “Primária” define o círculo da etapa atual na barra lateral, a categoria sobre a qual você está passando o mouse ao clicar no menu suspenso “Serviço”, a cor do preço do serviço e a cor do preço de cada colaborador no menu suspenso “Empregados” (não se esqueça que o preço dos Serviços pode ser diferente por colaborador).
A cor “Sucesso” define a cor da miniatura do colaborador (a menos que o colaborador tenha uma foto de perfil – nesse caso, a foto será exibida no menu suspenso “colaboradores”).
A cor “Erro” (neste passo) é utilizada para o asterisco do campo obrigatório ( * ), e para um aviso que é exibido caso o cliente tente continuar sem selecionar o campo obrigatório (Serviço, neste exemplo).
As cores padrão na seção “Cores primárias e de estado” são:
Primário: rgba (18, 70, 214, 1)
Sucesso: rgba (1, 151, 25, 1)
Aviso: rgba (204, 162, 12, 1)
Erro: rgba (180, 25, 15, 1)
Você pode colocar o por Código de cores para facilitar (ex.: #0000000, recomendamos o uso da extensão ColorZilla do Google Chrome para você identificar o código das suas cores.
As cores “Sidebar” e “Content” são bem básicas. Aqui você define a cor de fundo da barra lateral e do conteúdo principal, juntamente com as cores do texto na barra lateral, o conteúdo principal e o texto do título.
Observe que as cores de fundo das etapas da barra lateral são um tom da cor de fundo da barra lateral.
As cores padrão nas seções “Barra lateral” e “Conteúdo” são:
Fundo da barra lateral: rgba(23, 41, 90, 1)
Texto da barra lateral: rgba(255, 255, 255, 1)
Plano de fundo do conteúdo principal: rgba(255, 255, 255, 1)
Texto do cabeçalho do conteúdo principal: rgba(51, 67, 76, 1)
Texto do conteúdo principal: rgba(26, 44, 55, 1)
Isso define as cores dos menus suspensos, suas cores de borda, as cores de texto do espaço reservado e as cores de entrada selecionadas.
As cores padrão na seção “Campos de entrada ” são:
Plano de fundo: rgba(255, 255, 255, 1)
Borda: rgba(209, 213, 215, 1)
Texto: rgba(26, 44, 55, 1)
Espaço reservado: rgba(128, 138, 144, 1)
Por mais simples que pareça, esta seção permite que você defina as cores de fundo, borda e texto de todas as suas seleções suspensas.
As cores padrão na seção “Campos de entrada ” são:
Plano de fundo: rgba(255, 255, 255, 1)
Borda: rgba(255, 255, 255, 1)
Texto: rgba(14, 25, 32, 1)
Como a visualização do calendário não pode ser exibida na primeira etapa, sairemos da seção "Cores" nas "Configurações gerais" e passaremos para "Passos" (acessaremos a seção "Data hora” passo).
Dica: você pode navegar de volta ao menu principal da barra lateral direita clicando no símbolo < na parte superior da barra lateral, ao lado do nome da seção.
A exibição padrão da etapa “Data e hora” mostra o calendário e as opções disponíveis para esta etapa. Na captura de tela abaixo, você pode ver que a cor “Sucesso” de “Cores primárias e de estado” é aplicada ao fundo do círculo da barra lateral, mostrando que todas as seleções e entradas dessa etapa foram atendidas.
Conforme mencionado anteriormente, no canto inferior direito do menu do lado direito, você pode acessar as configurações de cores para ver as cores que se aplicam à etapa em que você está (Data e hora).
Ao clicar no botão “Alterar cores”, você notará que o mesmo menu de Configurações Gerais é aberto. Aqui, você poderá navegar até a seção “Calendário” e configurar as cores do calendário.
Alterar as cores da etapa “Calendário” permite modificar as cores das células do calendário (essas cores se aplicam tanto ao calendário quanto aos intervalos de tempo e, portanto, os intervalos de tempo disponíveis não são visíveis na visualização da seção “Personalizar” ).
Init Cell é o fundo e a cor da borda das células disponíveis. Essa cor também se aplica ao campo “Fuso horário atual” localizado acima do calendário.
Texto inicial da célula configura a cor do texto das datas disponíveis.
Plano de fundo selecionado da célula define o plano de fundo de uma célula selecionada.
Texto selecionado da célula define a cor do texto de uma célula selecionada.
Plano de fundo da célula desativada aplica-se a datas não disponíveis (dias de folga, dias totalmente reservados).
Texto de célula desativada configura a cor do texto nas células desativadas.
As cores padrão na seção “Calendário ” são:
Célula inicial: rgba(38, 92, 242, 1)
Texto inicial da célula: rgba(18, 70, 214, 1)
Plano de fundo selecionado da célula: rgba(18, 70, 214, 1)
Texto selecionado da célula: rgba(255, 255, 255, 1)
Plano de fundo da célula desativada: rgba(180, 25, 15, 0,05)
Célula desativada texto: rgba(140, 149, 154, 1)
Para ver o que as “Cores dos Botões” fazem, voltaremos novamente ao menu principal do menu lateral direito e acessaremos a etapa “Serviços”.
Como você já percebeu, as cores dentro dos formulários se aplicam a vários lugares. Não queremos que você se perca em nossa documentação, então cobrimos apenas alguns exemplos onde você pode ver as cores que aplicou, mas sinta-se à vontade para brincar com o formulário e verificar várias etapas para ver qual cor se aplica onde.
Cada etapa do formulário de reserva passo a passo pode ser configurada individualmente por meio da seção Personalizar. As opções disponíveis são:
Alterar a ordem nas etapas “Serviços” e “Suas informações”
Configurando os campos para que sejam obrigatórios ou não
Escolhendo os tipos de botão
Modificando os rótulos padrão para todas as etapas
Acessando subetapas e configurando suas opções e rótulos (quando aplicável)
Não abordaremos cada etapa, pois as opções dentro delas são semelhantes.
Na seção “Pedido”, você poderá alterar a ordem dos campos (por padrão, o menu suspenso “Serviço” é o primeiro campo, “colaboradores” é o segundo campo e “Locais” é o terceiro campo).
Você pode reordenar os campos com uma função simples de arrastar e soltar.
A seção “Opções” permite alterar o estilo do botão “Continuar”, ocultar os menus suspensos “colaboradores” e “Locais” e torná-los obrigatórios.
Se um campo for definido como obrigatório, você não poderá ocultá-lo.
Nas configurações de “Rótulos” de cada etapa, você poderá alterar todos os rótulos padrão nessa etapa, além de fornecer traduções para esses rótulos para outros idiomas adicionados ao evonext.
Os rótulos de idioma oferecidos serão extraídos das Configurações gerais de evonext, portanto, se você adicionar apenas o idioma alemão, apenas esse idioma aparecerá quando você acessar cada rótulo.
A captura de tela a seguir lhe dará uma ideia de como a edição de rótulos funciona na nova seção Personalizar.
O título de cada seção é definido acima dos campos de rótulo, portanto, no exemplo abaixo, a “Seleção de serviço” é o título do rótulo que você está modificando. Se o campo ao lado da caixa de entrada “Rótulo padrão” estiver vazio, o título do rótulo será aplicado como rótulo (neste caso – “Seleção de serviço”).
Modificaremos alguns rótulos aqui, para que você veja como eles são aplicados. Sempre que alterar um rótulo, você o verá sendo modificado em tempo real na janela de visualização à esquerda.
A partir de agora, você poderá alterar o rótulo de cada botão em cada etapa.
Para alterar a aparência, os rótulos e as opções do formulário Pacotes, primeiro você precisa alterar as etapas de "Serviço" para "Pacote" no canto superior esquerdo, acima da visualização do formulário.
No menu do lado direito, você notará que as etapas são um pouco diferentes das etapas ao personalizar as etapas do serviço.
Para alterar o rótulo dessa mensagem, acesse o formulário “Pacote” acima da visualização do formulário e acesse a etapa “Pacote” / Rótulos / Título da Sub-etapa.
O fluxo é exatamente o mesmo – você pode navegar pelo menu lateral e ajustar as cores, opções, botões e a ordem da seção “Suas informações”.
Basta percorrer cada seção e verificar se as cores globais são as que você deseja no formulário de compra do pacote.
Ao acessar a etapa “ Serviços”, você verá as configurações “Pedido”, “Opções” e “Etiquetas”, e abaixo disso você poderá acessar as sub-etapas “Trazendo alguém com você” e “Pacotes” (lembre-se de que o não está incluído no plano de licença básica da evonext).
