Forms
      Voltar para o início
      1. Central de Ajuda
      2. Ion
      3. Forms

      Formulários de biblioteca: crie formulários HTML personalizados

      Este é um conceito para usuários avançados

      Com um formulário HTML, você oferece o HTML completo para o formulário, as tags ‹form›‹/form› e o resto. Você também pode incluir conteúdo não editável fora das tags ‹form›‹/form›.

      Por padrão, as tags ‹input› e ‹select› serão salvas com os nomes de seus IDs, embora você possa substituí-los e atribuí-los aos campos de coleta de dados se preferir ao editar os campos da próxima página.

      As opções de caixas de seleção, botões de rádio, menus suspensos e caixas de listagem devem ser incluídas em seu HTML. No entanto, você pode substituir as opções nas listas suspensas ‹select› opcionalmente e caixas de listagem atribuindo um conjunto de opções ao editar os campos da página seguinte. Observe que atualmente todas as tags ‹option› em seu HTML devem ter tags de fechamento ‹/option›.

      Os dados coletados em seu formulário HTML personalizado serão salvos no banco de dados do Ion após o envio do formulário. Você também pode exportar os dados coletados em um formulário HTML personalizado usando qualquer formato de exportação compatível com a plataforma Ion. Regras avançadas ao nível de formulário também estarão disponíveis para você usar!

      Você deve incluir seu próprio botão para enviar o formulário.

      Você também pode incluir blocos ‹style› e ‹script›, geralmente na frente da tag ‹form›, para mudar a aparência e o comportamento do formulário. Tenha cuidado para evitar conflitos de CSS e JavaScript com os templates de sua página mestra.

      Comece com estas etapas:

      1. Navegue até a biblioteca "Forms" e selecione a categoria à qual gostaria de adicionar seu formulário personalizado (ou crie uma nova). Adicione um novo formulário selecionando o botão verde "New form".

      2. Dê a ele uma label exclusiva, descrição opcional e selecione "HTML" no menu "Form type". Coloque o código do formulário (certifique-se de incluir as tags ‹form›‹/form›) no campo "Custom HTML".

      NOTA: se você tiver um script e estiver usando o nome do formulário como referência, ele não funcionará porque a plataforma remove o atributo de nome do formulário. Em vez disso, você pode usar o ID do formulário como referência.

      3. Atribua uma classe personalizada (por padrão, a classe é: pf_field_row_bad) para lidar com qualquer tag ‹input› com erros (ou seja, usada para validação).

      4. Clique em "Save" e você será levado à página de configuração do formulário. Você pode visualizar o formulário clicando no botão “Preview” no menu "Form Actions". Para editar o formulário personalizado, clique em “Edit form” no menu "Form Actions".

      NOTA: Se os campos do formulário HTML não estiverem visíveis, será necessário verificar os campos de entrada. Eles devem ter um nome ou um atributo de ID. Se você especificar o nome e a ID do atributo, a ID aparecerá em "Field Name". É uma boa prática garantir que sua ID ou nome seja descritivo para ser mapeado facilmente para seus campos.

      Mapeando campos de formulários HTML personalizados

      O mapeamento de seus campos HTML para campos do Ion permitirá que você direcione os dados coletados de seu formulário HTML personalizado para o campo do Ion para o qual deseja que os dados sejam exportados. Isso será então incluído em seus dados exportados.

      Você precisará mapear seu formulário HTML personalizado para garantir que os dados coletados estejam no lugar certo em seu banco de dados do Ion. Se você tem um campo que não precisa controlar, não há problema em não mapeá-lo para o campo do Ion.

      Siga estas etapas para mapear seu formulário para um campo de dados do Ion:

      1. Clique no link "Save as is" associado ao campo que deseja mapear.

      2. Dentro dos campos do formulário de edição, selecione a opção "Choose category" e, em seguida, escolha o campo de dados que você deseja que o nome do campo seja mapeado.

      3. Se estiver mapeando um campo suspenso (‹select›), você tem a opção de usar o que está em seu formulário HTML personalizado ou em um conjunto de escolhas do Ion. Clique em "Save" e pronto!

      Orientações extras:

      Se você tiver ‹H1›, ‹DIV› e outros elementos HTML no código do formulário HTML personalizado, é recomendável adicionar classes a eles. Isso impedirá a substituição de estilos de elemento dentro do tema do framework.

      Caso você tenha dúvidas, por favor, entre em contato conosco help@rockcontent.com. 😀