Tutorial: Criar um formulário adaptável

Este tutorial é uma etapa da série Create Your First Adaptive Form. É recomendável seguir a série em sequência cronológica para entender, executar e demonstrar o caso de uso tutorial completo.

Sobre o tutorial

Os 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 adaptáveis para fornecer experiências personalizadas. Você também pode integrar formulários adaptáveis com Adobe Analytics para estatísticas de uso e 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 ao seguir um processo adequado. Neste artigo, você aprenderá a:

• Crie um formulário adaptável que permita ao cliente adicionar um endereço de envio

• Campos de layout de um formulário adaptável para exibir e aceitar informações de um cliente

• Criar ação de envio para enviar um email contendo conteúdo de formulário

• Visualizar e enviar um formulário adaptável

Você terá um formulário semelhante ao seguinte no final do artigo:

Etapa 1: Crie o formulário adaptável

1. Faça logon na instância do autor do AEM e navegue até Adobe Experience Manager > Forms > Forms & Documents. 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 Próximo.

3. Uma opção para Adicionar propriedades é exibida. Os campos Title e Name são obrigatórios:

   • Título: especifique Add new or update shipping address no ​​campo Título. O campo title 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 Name especifica o nome do formulário. Um nó com o nome especificado é criado no repositório. À medida que você começa a digitar 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, hifens 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. 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 de criação de formulários adaptáveis e os componentes disponíveis, consulte Introdução à criação de formulários adaptáveis.

   

Etapa 2: Adicionar cabeçalho e rodapé

AEM Forms fornece muitos componentes para exibir informações em um formulário adaptável. Os componentes Cabeçalho e Rodapé ajudam a fornecer uma aparência consistente a um formulário. Um cabeçalho normalmente inclui o logotipo de uma corporação, o título do formulário e o resumo. Um rodapé normalmente inclui informações de direitos autorais e links para outras páginas.

1. Toque em > . O navegador de componentes é aberto. Arraste o componente Header do navegador de componentes para o formulário adaptável.

2. Toque em Logo. A barra de ferramentas é exibida. Toque em na barra de ferramentas, digite We.Retail e toque em .

3. Toque em Imagem. A barra de ferramentas é exibida. Toque em . O navegador de propriedades é aberto à esquerda da tela. ​​Navegue e faça upload da imagem do logotipo. Toque em . A imagem aparece no cabeçalho.

   Você pode tocar em Obter arquivo para baixar o logotipo usado neste artigo se não tiver um.

   Obter arquivo

4. Arraste o componente Footer de para o formulário adaptável. Nesse estágio, o formulário tem a seguinte aparência:

   

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

Os componentes são blocos de construção de um formulário adaptável. AEM Forms fornece muitos componentes para capturar e exibir informações em um formulário adaptável. Você pode 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 Título do componente para Customer ID, altere Nome do Elemento para customer_ID, ative a opção Campo Obrigatório, ative a opção Usar Tipo de Entrada do Número HTML5 e toque em .

2. Arraste três componentes de 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	Caixa de Texto 1	Caixa de Texto 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
   Permitir várias linhas	Desativado	Ativado	Desativado

3. Arraste um componente Caixa numérica antes do componente do rodapé. Abra as propriedades do componente, defina os valores listados na tabela abaixo, Toque em .

   Propriedade	Valor
   Título	Código postal
   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

4. Arraste um componente Email antes do componente do 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

5. Arraste um componente File Attachment antes do componente do rodapé. Abra as propriedades do componente, defina os valores listados na tabela abaixo e toque em .

   Propriedade	Valor
   Título	Prova de endereço aprovada pelo governo
   Nome do elemento	customer_Address_Proof
   Campo obrigatório	Ativado

6. Arraste um componente Enviar botão para o formulário adaptável. Coloque-o antes do componente de rodapé. Abra as propriedades do componente, altere Nome do elemento para address_addition_update_submit, toque em . O layout do formulário é concluído e o formulário tem a seguinte aparência:

   

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

Uma ação Enviar é acionada quando um usuário toca no botão Enviar em um formulário adaptável. Você pode 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. Os 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 de 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 da notificação por email.

2. Toque em Contêiner de formulário no Navegador de conteúdo e toque em . O navegador de propriedades é aberto à esquerda.

3. Vá para Enviar > Enviar Ação. Selecione Enviar Email. Especifique os seguintes valores e toque em .

   Propriedade	Valor
   De	donotreply@weretail.com
   Para	${customer_Email}
   Assunto	Confirmação: Você adicionou o endereço de envio no site We.Retail.
   Modelo do e-mail	Olá ${customer_Name}, o seguinte endereço é adicionado como o endereço de envio da sua conta: ${customer_Name}, ${customer_Shipping_Address}, ${customer_State}, ${customer_ZIPCode} Considerações, We.Retail
   Incluir anexos	Ativado

   Seu formulário está pronto. Agora, é possível 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 está executando AEM servidor Forms, o formulário estará disponível em http://localhost:4502/editor.html/content/forms/af/shipping-address-add-update-form.html.

Etapa 5: Visualize e envie o formulário adaptável

Você pode usar a opção Preview 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 em 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 Preview e Emulador em conjunto para visualizar um formulário para dispositivos de tamanhos de tela diferentes.

1. Toque na opção Preview no lado direito do editor de formulários. O formulário é aberto no modo de visualização. Se você tiver usado o nome mencionado no tutorial, a 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 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 Thank You 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 acessar o formulário na máquina que executa o servidor AEM Forms, o formulário estará disponível em http://localhost:4502/editor.html/content/forms/af/shipping-address-add-update-form.html.