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:

  1. O local da página
  2. A estrutura de página desejada
  3. Os requisitos do banner
  4. Requisitos do formulário adaptável
  5. O layout de duas colunas
  6. O comportamento responsivo
  7. Os campos obrigatórios no formulário
  8. 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

Resposta de colaborador

recommendation-more-help
experience-manager-learn-help-cloud-service