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.
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 com Adobe Analytics para estatísticas de uso e Adobe Campaign para gestão 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:
Crie 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 contendo conteúdo de formulário
Você terá um formulário semelhante ao seguinte no final do artigo:
Faça logon na instância do autor AEM e navegue até Adobe Experience Manager > Forms > Forms & Documentos. O URL padrão é http://localhost:4502/aem/forms.html/content/dam/formsanddocuments.
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.
Uma opção para Adicionar propriedades é exibida. Os campos Title e Nome são obrigatórios:
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 AEM Forms.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.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.
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 empresa, 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 em >
. O navegador de componentes é aberto. Arraste o componente Cabeçalho do navegador de componentes para o formulário adaptável.
Toque em Logo. A barra de ferramentas é exibida. Toque em na barra de ferramentas, digite We.Retail e toque em
.
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 é exibida no cabeçalho.
Você pode tocar em Obter arquivo para baixar o logotipo usado neste artigo se não tiver um.
Arraste o componente Rodapé de para o formulário adaptável. Nesse estágio, o formulário tem a seguinte aparência:
Os componentes são blocos componentes de um formulário adaptável. AEM Forms fornece vários 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 adaptativos.
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 o Tipo de entrada do número HTML5 e toque em .
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 | 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 |
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 |
Arraste um componente 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 | |
Nome do elemento | customer_Email |
Campo obrigatório | Ativado |
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ço aprovada pelo governo |
Nome do elemento | customer_Address_Prova |
Campo obrigatório | Ativado |
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_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. É 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:
Configure o servidor de email. Para obter detalhes, consulte Configuração de notificação por email.
Toque em Container de formulário no navegador de conteúdo e toque em . O navegador de propriedades é aberto à esquerda.
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, você pode pré-visualização o formulário e testar a funcionalidade. Se você tiver usado o nome mencionado no tutorial e acessado o formulário no computador 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.
Você pode usar a opção Pré-visualização para avaliar a aparência e o comportamento de um formulário. É possível enviar um formulário no modo de pré-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 Pré-visualização e Emulador em conjunto para pré-visualização de 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 AEM Forms, o formulário estará disponível em http://localhost:4502/editor.html/content/forms/af/shipping-address-add-update-form.html.