Show Menu
TÓPICOS×

Tutorial: Criar um formulário adaptável

Este tutorial é uma etapa da série Criar seu primeiro formulário adaptável. É recomendável seguir a série em sequência cronológica para entender, executar e demonstrar o caso de uso do tutorial completo.

Sobre o tutorial

Formulários adaptáveis são formulários de nova geração que são dinâmicos e responsivos. Você pode usar os formulários adaptativos para fornecer experiências personalizadas. Você também pode integrar formulários adaptáveis ao Adobe Analytics para estatísticas de uso e ao Adobe Campaign para gerenciamento de campanha. Para obter mais informações sobre recursos de formulários adaptáveis, consulte Introdução à criação de formulários adaptáveis.
É mais fácil criar e gerenciar formulários quando um processo adequado é seguido. Neste artigo, você aprenderá a:
Você terá um formulário semelhante ao seguinte no final do artigo: form-preview-mobile.gif

Etapa 1: Criar o formulário adaptativo

  1. Faça logon na instância do autor do AEM e navegue até Adobe Experience Manager > Formulários > Formulários e documentos . O URL padrão é http://localhost:4502/aem/forms.html/content/dam/formsanddocuments .
  2. Toque em Criar e selecione Formulário ​adaptável. Uma opção para selecionar um modelo é exibida. Toque no modelo em branco para selecioná-lo e toque em Avançar .
  3. Uma opção para Adicionar propriedades é exibida. Os campos Título e Nome são obrigatórios:
    • ​Título: Especifique Add new or update shipping address no campo Título. O campo de título especifica o nome de exibição do formulário. O título ajuda a identificar o formulário na interface do usuário do AEM Forms.
    • ​Nome: Especifique shipping-address-add-update-form no campo Nome. O campo Nome especifica o nome do formulário. Um nó com o nome especificado é criado no repositório. À medida que você digita um título, o valor do campo de nome é gerado automaticamente. Você pode alterar o valor sugerido. O campo de nome pode incluir somente caracteres alfanuméricos, hífens e sublinhados. Todas as entradas inválidas são substituídas por um hífen.
  4. Toque em Criar . Um formulário adaptável é criado e uma caixa de diálogo para abrir o formulário para edição é exibida. Toque em Abrir para abrir o formulário recém-criado em uma nova guia. O formulário é aberto para edição. Ela também exibe a barra lateral para personalizar o formulário recém-criado de acordo com as necessidades.
    Para obter informações sobre a interface adaptativa de criação de formulários e os componentes disponíveis, consulte Introdução à criação de formulários adaptáveis.

Etapa 3: Adicionar componentes para capturar e exibir informações

Os componentes são blocos componentes de um formulário adaptável. O AEM Forms fornece vários componentes para capturar e exibir informações em um formulário adaptável. É possível arrastar os componentes de para um formulário. Para saber mais sobre os componentes disponíveis e a funcionalidade correspondente, consulte Introdução à criação de formulários adaptáveis.
  1. Arraste o componente Caixa numérica para o formulário adaptável. Coloque-o antes do componente de rodapé. Abra as propriedades do componente, altere o Título do componente para Customer ID , altere o Nome do elemento para customer_ID , ative a opção Campo ​obrigatório, ative a opção Usar tipo de entrada de número HTML5 e toque em aem_6_3_forms_save.
  2. Arraste três componentes da caixa de texto para o formulário adaptável. Coloque-os antes do componente de rodapé. Defina as seguintes propriedades para essas caixas de texto.:
Propriedade Text Box 1 Text Box 2 Caixa de Texto 3
Título Nome Endereço de envio Estado
Nome do elemento customer_Name customer_Shipping_Address customer_State
Campo obrigatório Ativado Ativado Ativado
Allow multiple lines Desativado Ativado Desativado
  1. Arraste um componente Caixa ​numérica antes do componente de rodapé. Abra as propriedades do componente, defina os valores listados na tabela abaixo, Toque em .
    Propriedade
    Valor
    Título
    CEP
    Nome do elemento
    customer_ZIPCode
    Número máximo de dígitos
    6
    Campo obrigatório
    Ativado
    Tipo de padrão de exibição
    Sem padrão
  2. Arraste um componente de email antes do componente de rodapé. Abra as propriedades do componente, defina os valores listados na tabela abaixo e toque em .
    Propriedade
    Valor
    Título
    E-mail
    Nome do elemento
    customer_Email
    Campo obrigatório
    Ativado
  3. Arraste um componente Anexo de arquivo antes do componente de rodapé. Abra as propriedades do componente, defina os valores listados na tabela abaixo e toque em .
Propriedade Valor
Título Prova de endereços aprovada pelo governo
Nome do elemento customer_Address_Proof
Campo obrigatório Ativado
  1. Arraste um componente Botão Enviar para o formulário adaptável. Coloque-o antes do componente de rodapé. Abra as propriedades do componente, altere Nome do elemento para address_add_update_submit , toque em . O layout do formulário está completo e o formulário tem a seguinte aparência:

Etapa 4: Configurar ação de envio para o formulário adaptável

Uma ação de envio é acionada quando um usuário toca no botão Enviar em um formulário adaptável. É possível usar uma ação de envio para salvar dados de formulário no repositório local, enviar dados de formulário para um terminal REST, enviar dados de formulário como email e muito mais. Formulários adaptáveis fornecem mais algumas ações de envio prontas para uso. Para obter informações detalhadas, consulte Configuração da ação Enviar.
Usando as etapas a seguir, é possível configurar a ação de envio por email e a ação de envio de demonstração do formulário:
  1. Configure o servidor de email. Para obter detalhes, consulte Configuração de notificação por email.
  2. Toque em Contêiner de formulário no navegador Conteúdo e toque em . O navegador de propriedades é aberto à esquerda.
  3. Vá até Enviar > Enviar ação . Selecione Enviar email . Especifique os seguintes valores e toque em .
    Propriedade
    Valor
    De
    Para
    ${customer_Email}
    Assunto
    Confirmação: Você adicionou o endereço de envio no site We.Retail.
    Modelo do e-mail
    Oi ${customer_Name} , o seguinte endereço é adicionado como endereço de entrega da sua conta:
    ${customer_Name} , ${customer_Shipping_Address} , ${customer_State} , ${customer_ZIPCode}
    Regardes, We.Retail
    Incluir anexos
    Ativado
    Seu formulário está pronto. Agora, você pode visualizar o formulário e testar a funcionalidade. Se você tiver usado o nome mencionado no tutorial e acessado o formulário na máquina que executa o servidor do AEM Forms, o formulário estará disponível em http://localhost:4502/editor.html/content/forms/af/shipping-address-add-update-form.html .

Etapa 5: Visualizar e enviar o formulário adaptativo

Você pode usar a opção ​Visualizar para avaliar a aparência e o comportamento de um formulário. É possível enviar um formulário no modo de visualização e também verificar as validações aplicadas a um formulário. Por exemplo, se um erro for exibido quando um campo obrigatório for deixado em branco.
Formulários adaptáveis também oferecem uma opção para emular a experiência de um formulário para vários dispositivos. Por exemplo, iPhone, iPad e Desktop. Você pode usar as opções Visualizar e Emulador de em conjunto para visualizar um formulário para dispositivos de tamanhos de tela diferentes.
  1. Toque na opção Visualizar no lado direito do editor de formulário. O formulário é aberto no modo de visualização. Se você tiver usado o nome mencionado no tutorial, o URL de visualização do formulário será http://localhost:4502/content/dam/formsanddocuments/shipping-address-add-update-form/jcr:content?wcmmode=disabled
  2. Use a para exibir a aparência do formulário em vários dispositivos.
  3. Preencha os campos do formulário e toque em Enviar . O formulário é enviado e você é redirecionado para a página Agradecimentos padrão. Você também pode especificar uma página de agradecimento personalizada. Para obter detalhes, consulte Configuração da página de redirecionamento.
O formulário adaptável para adicionar um endereço está pronto. Se você tiver usado o nome mencionado no tutorial e acessado o formulário na máquina que executa o servidor do AEM Forms, o formulário estará disponível em http://localhost:4502/editor.html/content/forms/af/shipping-address-add-update-form.html .