Este tutorial é uma etapa da Criar O 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 completo do tutorial.
Formulários adaptáveis são formulários de nova geração que são dinâmicos e responsivos. Você pode usar formulários adaptáveis para fornecer experiências personalizadas. Também é possível integrar formulários adaptáveis com Adobe Analytics para estatísticas de uso e Adobe Campaign para gerenciamento de campanhas. Para obter mais informações sobre os 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:
Criar um formulário adaptável que permita ao cliente adicionar um endereço de entrega
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 com conteúdo de formulário
No final do artigo, você terá um formulário semelhante ao seguinte:
Faça logon na instância de autor do AEM e acesse Adobe Experience Manager > Forms > Forms e documentos. 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 toque em Próxima.
Uma opção para Adicionar propriedades é exibida. A variável Título e Nome os campos são obrigatórios:
Add new or update shipping address
no Título campo. O campo de título especifica o nome de exibição do formulário. O título ajuda a identificar o formulário no AEM Forms interface do usuário.shipping-address-add-update-form
no Nome campo. O campo Nome especifica o nome do formulário. Um nó com o nome especificado é criado no repositório. Quando 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 apenas caracteres alfanuméricos, hifens e sublinhados. Todas as entradas inválidas são substituídas por um hífen.Toque Criar. Um formulário adaptável é criado e uma caixa de diálogo para abrir o formulário para edição é exibida. Toque Abertura para abrir o formulário recém-criado em uma nova guia. O formulário é aberto para edição. Ele 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.
AEM Forms O fornece muitos componentes para exibir informações em um formulário adaptável. Os componentes de 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é geralmente inclui informações de direitos autorais e links para outras páginas.
Toque >
. O navegador de componentes é aberto. Arraste o Cabeçalho componente do navegador de componentes ao formulário adaptável.
Toque Logotipo. A barra de ferramentas é exibida. Toque na barra de ferramentas, digite We.Retail e toque em
.
Toque em Imagem. A barra de ferramentas é exibida. Toque . O navegador de propriedades é aberto à esquerda da tela. Procurar e carregue a imagem do logotipo. Toque
. A imagem aparece no cabeçalho.
Toque em Obter arquivo para baixar o logotipo usado neste artigo, caso não tenha um.
Arraste o Rodapé componente de ao formulário adaptável. Nesse estágio, o formulário tem a seguinte aparência:
Os componentes são blocos fundamentais de um formulário adaptável. AEM Forms O 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.
Arraste o Componente de caixa numérica ao formulário adaptável. Coloque-o antes do componente de rodapé. Abrir propriedades do componente, alterar Título do componente para Customer ID
, alterar Nome do elemento para customer_ID
, ative o Campo obrigatório , ative a opção Usar tipo de entrada numérica HTML5 e toque em .
Arraste três componentes 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 | Habilitado | Habilitado | Habilitado |
Permitir várias linhas |
Desativado | Habilitado | Desativado |
Arraste um Caixa numérica antes do componente de rodapé. Abra as propriedades do componente, defina os valores listados na tabela abaixo e 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 | Habilitado |
Tipo de padrão de exibição | Sem padrão |
Arraste um E-mail antes do componente de rodapé. Abra as propriedades do componente, defina os valores listados na tabela abaixo e toque em .
Propriedade | Valor |
---|---|
Título | |
Nome do elemento | customer_Email |
Campo obrigatório | Habilitado |
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 .
Propriedade | Valor |
Título | Prova de endereço aprovada pelo governo |
Nome do elemento | customer_Address_Proof |
Campo obrigatório | Habilitado |
Arraste um Botão Enviar componente ao formulário adaptável. Coloque-o antes do componente de rodapé. Abra as propriedades do componente, altere o Nome do elemento para address_addition_update_submit
, toque em . O layout do formulário está completo e o formulário tem a seguinte aparência:
Uma ação de envio é acionada quando um usuário toca no botão Enviar em um formulário adaptável. Você pode usar uma ação enviar 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 um 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, você pode 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 da notificação por e-mail.
Toque Contêiner de formulário no Navegador de conteúdo e toque em . O navegador de propriedades é aberto à esquerda.
Ir para Envio > Ação de envio. Selecionar Enviar e-mail. 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 entrega no site We.Retail. |
Modelo do e-mail | Oi ${customer_Name} , O seguinte endereço é adicionado como o endereço de entrega da sua conta: ${customer_Name} , ${customer_Shipping_Address} , ${customer_State} , ${customer_ZIPCode} Atenciosamente, We.Retail |
Incluir anexos | Habilitado |
Seu formulário está pronto. Agora, você pode visualizar o formulário e testar a funcionalidade. Se você usou o nome mencionado no tutorial e acessou o formulário na máquina que executa o AEM Forms , então o formulário estará disponível em http://localhost:4502/editor.html/content/forms/af/shipping-address-add-update-form.html.
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 estiver vazio.
Os formulários adaptáveis também fornecem 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 opções em conjunto umas com as outras para visualizar um formulário para dispositivos de tamanhos de tela diferentes.
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.