Tutorial: Criar um formulário adaptável do-not-publish-tutorial-create-an-adaptive-form
Este tutorial é uma etapa do Criar seu primeiro formulário adaptável série. É 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 about-the-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. Também é possível 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 ao seguir um processo adequado. Neste artigo, você aprenderá a:
Você terá um formulário semelhante ao seguinte no final do artigo:
[ ](assets/form-preview-mobile.gif)
Etapa 1: Criar o formulário adaptável step-create-the-adaptive-form
-
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.
-
Toque Criar e selecione Formulário adaptável. Uma opção para selecionar um modelo é exibida. Toque no Em branco modelo para selecioná-lo e tocar Próximo.
-
Uma opção para Adicionar propriedades é exibido. O Título e Nome são obrigatórios:
- Título: Especificar
Add new or update shipping addressno 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: Especificar
shipping-address-add-update-formno 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.
- Título: Especificar
-
Toque Criar. Um formulário adaptável é criado, e uma caixa de diálogo para abrir o formulário para edição é exibida. Toque 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 adaptável de criação de formulários e os componentes disponíveis, consulte Introdução à criação de formulários adaptáveis.
Etapa 2: Adicionar cabeçalho e rodapé step-add-header-and-footer
O AEM Forms fornece vários 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.
-
Toque
-
Toque Logotipo. A barra de ferramentas é exibida. Toque
-
Toque em Imagem. A barra de ferramentas é exibida. Toque
Você pode tocar em Obter arquivo para baixar o logotipo usado neste artigo se não tiver um.
-
Arraste o Rodapé componente de
Etapa 3: Adicionar componentes para capturar e exibir informações step-add-components-to-capture-and-display-information
Os componentes são blocos de construção 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. Você pode arrastar os componentes de
- 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, alterar Nome do elemento paracustomer_ID, ativar a Campo obrigatório , ative a Usar o tipo de entrada do número HTML5 e toque em - 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.:
-
Arraste um Caixa numérica antes do componente de rodapé. Abra as propriedades do componente, defina os valores listados na tabela abaixo, Toque em
table 0-row-2 1-row-2 2-row-2 3-row-2 4-row-2 5-row-2 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 -
Arraste um Email antes do componente de rodapé. Abra as propriedades do componente, defina os valores listados na tabela abaixo e toque em
table 0-row-2 1-row-2 2-row-2 3-row-2 Propriedade Valor Título Email Nome do elemento customer_Email Campo obrigatório Ativado -
Arraste um Anexo de arquivo antes do componente de rodapé. Abra as propriedades do componente, defina os valores listados na tabela abaixo e toque em
-
Arraste um 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
Etapa 4: Configurar a ação de envio para o formulário adaptável step-configure-submit-action-for-the-adaptive-form
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:
-
Configure o servidor de email. Para obter detalhes, consulte Configuração de notificação por email.
/content/help/en/experience-manager/6-4/sites-administering/notification.html
-
Toque Contêiner de formulário no navegador Conteúdo e toque em
-
Ir para Submissão > Enviar ação. Selecionar Enviar Email. Especifique os seguintes valores e toque em
table 0-row-2 1-row-2 2-row-2 3-row-2 4-row-2 5-row-2 Propriedade Valor De donotreply@weretail.comPara ${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 o endereço de envio da sua conta:${customer_Name},${customer_Shipping_Address},${customer_State},${customer_ZIPCode}
Regards, We.RetailIncluir 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 acessar o formulário em uma 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.
Etapa 5: Visualizar e enviar o formulário adaptável step-preview-and-submit-the-adaptive-form
Você pode usar o 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 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 ambos Visualizar e Emulador
- Toque no Visualizar 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
- Use
- Preencha os campos do formulário e toque em Enviar. O formulário é enviado e você é redirecionado para o padrão Obrigado página. 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 em uma 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.