Usando o Colaborador para criar uma página Fale conosco da AEM Sites com um formulário adaptável
[AEM Forms as a Cloud Service]{class="badge informative"}
Visão geral
O Co-worker Enterprise fornece uma maneira assistida por IA para realizar tarefas no Adobe Experience Manager (AEM) usando instruções em linguagem natural. Em vez de executar manualmente cada etapa de criação e configuração, os usuários podem descrever a experiência que desejam criar e o Colaborador pode ajudar a executar as tarefas compatíveis no AEM.
O colaborador trabalha interativamente e pode fazer perguntas de acompanhamento quando precisar de informações adicionais, como uma página de referência, configuração existente ou serviço para usar. Isso permite combinar a criação assistida por IA com ativos, componentes, formulários e integrações existentes do AEM.
Neste artigo, usamos o Coworker para ajudar a criar uma experiência do AEM Sites Contact Us, incluindo a criação da página e do Formulário adaptável, a configuração de uma pesquisa de CEP e a configuração do envio do formulário para uma configuração existente do Azure Storage.
Este tutorial demonstra como usar o Colaborador para criar uma página Fale Conosco do AEM Sites que inclui:
- Um banner com tema bancário de largura total
- Um formulário adaptável incorporado na página do AEM Sites
- Um layout de formulário de duas colunas
- Comportamento responsivo para tablets e dispositivos móveis
- Agrupamento lógico de informações do cliente e detalhes da pesquisa
A página será criada em:
/content/bankingapplication/us/contact-us
Pré-requisitos
Antes de iniciar, verifique se:
Você tem acesso a um ambiente do AEM com as permissões necessárias para criar e modificar páginas do Sites e o Adaptive Forms.
Nos exemplos usados neste artigo, bankingapplication é o projeto do AEM configurado em nosso ambiente, e a página Fale conosco é criada em /content/bankingapplication/us.
O nome do projeto do AEM e a estrutura de conteúdo podem ser diferentes. Substitua os caminhos de exemplo neste artigo pelo nome do projeto e local do conteúdo apropriados para seu ambiente do AEM.
Da mesma forma, o Adaptive Forms e os ativos relacionados podem ser criados no local apropriado para o seu projeto; eles não precisam usar os mesmos caminhos mostrados neste artigo.
Etapa 1: Abrir Colaborador
Abra o Colaborador e forneça uma solicitação em linguagem natural descrevendo a página que você deseja criar.
O prompt deve incluir:
- O local da página
- A estrutura de página desejada
- Os requisitos do banner
- Requisitos do formulário adaptável
- O layout de duas colunas
- O comportamento responsivo
- Os campos obrigatórios no formulário
- As expectativas visuais e de acessibilidade
Um prompt detalhado geralmente produz um resultado mais previsível do que uma solicitação curta, como “Criar uma página Fale conosco”.
Etapa 2: fornecer o prompt de criação da página
Copie e cole o prompt a seguir no Co-worker:
Etapa 2: fornecer o prompt de criação da página
Copie e cole o prompt a seguir no Co-worker:
Eu gostaria de criar uma página Fale Conosco no AEM Sites no seguinte caminho de conteúdo:
/content/bankingapplication/us
Requisitos da página
1. Banner Bancário de Largura Total
- Adicione um banner/imagem herói que abrange a largura total da página.
- Crie uma imagem de banner adequada com um tema moderno de serviços bancários e financeiros.
- O visual deve transmitir confiança, profissionalismo, segurança e atendimento ao cliente.
- O banner deve funcionar bem em layouts de desktop, tablet e dispositivos móveis.
2. Contate-nos no Formulário Adaptável
- Na metade inferior da página, adicione um Formulário adaptável do AEM diretamente na página do AEM Sites.
- Organize os campos de formulário logicamente em dois painéis/colunas lado a lado no desktop.
- Em tablets e dispositivos móveis, os painéis devem ser empilhados verticalmente para fornecer uma experiência responsiva.
Painel Esquerdo - Suas Informações
- Nome
- Endereço de email
- Endereço
- Cidade
- Estado
- Código postal
Painel Direito - Como Podemos Ajudar?
- Tipo de Consulta
- Assunto
- Mensagem/Comentários
- Tempo de contato preferencial
Coloque o botão Enviar em uma posição lógica abaixo dos campos de formulário, para que o formulário geral pareça equilibrado e fácil de usar.
Localização da página
Crie a página Fale Conosco em:
/content/bankingapplication/us/contact-us
Responder Perguntas de Acompanhamento do Colaborador
Após enviar o prompt, o Colaborador pode fazer perguntas adicionais antes de criar a página do AEM Sites. Essas perguntas ajudam o Co-worker a entender a estrutura do site existente, as convenções de design, os componentes disponíveis e a implementação desejada.
Resposta do colaborador