Elementos estáticos em um formulário web

É possível incluir elementos com os quais o usuário não tem nenhuma interação nas páginas do formulário; esses elementos são elementos estáticos, como imagens, conteúdo HTML, uma barra horizontal ou um link de hipertexto. Esses elementos são criados por meio do primeiro botão na barra de ferramentas, clicando no menu Add static element.

Os seguintes tipos de campo estão disponíveis:

  • Valor baseado nas respostas fornecidas anteriormente (no contexto do formulário) ou no banco de dados.

  • Link de hipertexto, HTML, barra horizontal. Consulte Inserção de conteúdo HTML.

  • Imagem salva na biblioteca de recursos ou em um servidor acessível por usuários. Consulte Inserção de imagens.

  • Script executado no lado do cliente e/ou servidor. Ele deve ser escrito em JavaScript e ser compatível com a maioria dos navegadores para garantir a execução correta no lado do cliente.

    Observação

    No lado do servidor, o script pode usar as funções definidas na documentação do Campaign JSAPI.

Inserção de conteúdo HTML

É possível incluir conteúdo HTML em uma página de formulário: links de hipertexto, imagens, parágrafos formatados, vídeos ou objetos Flash, etc.

O editor HTML permite digitar o conteúdo a ser inserido na página de formulário. Para abrir o editor, vá para Static elements>HTML.

É possível inserir e formatar seu conteúdo diretamente ou exibir a janela do código-fonte para colar em algum conteúdo externo. Para alternar para o modo "código-fonte", clique no primeiro ícone na barra de ferramentas:

Para inserir um campo de banco de dados, use o botão de personalização.

Observação

As cadeias de caracteres inseridas no editor HTML só serão traduzidas se forem definidas na subguia Texts. Caso contrário, elas não serão coletadas. Para obter mais informações, consulte Tradução de um formulário web.

Preencha os campos na janela de edição, como mostrado no exemplo a seguir:

Para adicionar um link de hipertexto, vá para Static elements>Link.

  • O Label é o conteúdo do link de hipertexto como ele será exibido na página do formulário.

  • O URL é o endereço desejado, por exemplo: https://www.adobe.com no caso de um site ou info@adobe.com para enviar uma mensagem.

  • O campo Window permite selecionar o modo de exibição do link no caso de um site. Você pode optar por abrir o link em uma nova janela, a janela atual ou outra janela.

  • Você pode adicionar uma ToolTip, como mostrado abaixo:

  • Você pode escolher exibir o link como um botão ou uma imagem. Para fazer isso, selecione o tipo de exibição no campo Type.

Por padrão, os links são associados a uma ação do tipo URL para que um endereço de destino de link possa ser inserido no campo URL.

Você pode definir outras ações para o link, para que o usuário possa clicar no link e fazer o seguinte:

  • Atualizar a página

    Para fazer isso, selecione a opção Refresh page na caixa suspensa do campo Action.

  • Exibir a página seguinte/anterior

    Para fazer isso, selecione a opção Next page ou Previous page na caixa suspensa do campo Action.

    Você pode ocultar os botões Next e/ou Back se eles forem substituídos por um link. Consulte esta página.

    O link substituirá o botão Next usado por padrão.

  • Exibir outra página

    A opção Enable a transition permite exibir uma página específica associada à transição de saída selecionada no campo Transition.

    Por padrão, uma página tem apenas uma transição de saída. Para criar novas transições, selecione a página e clique no botão Add na seção Output transitions, conforme mostrado abaixo:

    No diagrama, essa adição terá esta aparência:

    Observação

    Para obter mais informações sobre a sequência de páginas em um formulário web, consulte Definição de sequenciamento de páginas de formulários web.

  • Faça pré-carregamento dos campos do formulário com dados obtidos do perfil do Facebook.

    CUIDADO

    Essa função só estará disponível se você tiver instalado o aplicativo Social Marketing. Para usar essa opção, você precisa criar um aplicativo do Facebook juntamente com uma conta externa do tipo Facebook Connect. Para obter mais informações, consulte esta página.

    A opção Preload with Facebook permite inserir um botão em um formulário para pré-carregar campos usando informações de perfil do Facebook.

    Quando um usuário clica no botão Fill in automatically, a solicitação do Facebook para a janela de permissão é aberta.

    Observação

    É possível alterar a lista de direitos estendidos ao configurar a conta externa. Se você não inserir um direito estendido, o Facebook encaminhará as informações básicas do perfil por padrão.
    Para exibir a lista de direitos estendidos e sua sintaxe, clique aqui: https://developers.facebook.com/docs/reference/api/permissions/

    Se o usuário concordar em compartilhar suas informações, os campos do formulário serão pré-carregados.

Para esse caso de uso, criamos uma aplicação web composta pelos seguintes elementos:

  • uma página contendo o formulário
  • uma atividade Record
  • uma atividade End

Para adicionar um botão de pré-carregamento, siga as etapas abaixo:

  1. Crie um formulário.

  2. Vá para o mesmo nível que os campos no formulário e adicione um link.

  3. Insira o rótulo e selecione o tipo Button.

  4. Acesse o campo Action e selecione Preload with Facebook.

  5. Vá para o campo Application e selecione a conta externa do tipo Facebook Connect criada anteriormente. Para obter mais informações, consulte esta página.

Personalização de conteúdo HTML

Você pode personalizar o conteúdo HTML de uma página de formulário com dados registrados em uma página anterior. Por exemplo, você pode criar um formulário web de seguro de carro cuja primeira página permite fornecer informações de contato e a marca do carro.

Use campos de personalização para reinjetar o nome de usuário e marca selecionada na próxima página. A sintaxe a ser usada depende do modo de armazenamento de informações. Para obter mais informações, consulte Uso das informações coletadas.

Observação

Por motivos de segurança, o valor inserido na fórmula <%= é substituído por caracteres de escape. Para evitar isso e somente quando necessário, use a seguinte sintaxe: <%=.

No nosso exemplo, o nome e o sobrenome do recipient são armazenados em um campo do banco de dados, enquanto a marca do carro é armazenada em uma variável. A sintaxe da mensagem personalizada na página 2 será a seguinte:

<P>Welcome <%= ctx.recipient.@firstName %> <%= ctx.recipient.@lastName %>,</P>
<P>To start your customized study, please select your car <%=ctx.vars.marque%> and its year of purchase.</P>

Isso produz o seguinte resultado:

Uso de variáveis de texto

A guia Text permite criar campos variáveis que podem ser usados no HTML entre os caracteres <%= and %> com a seguinte sintaxe: $(IDENTIFIER).

Use esse método para localizar facilmente suas cadeias de caracteres. Consulte Tradução de um formulário web

Por exemplo, você pode criar um campo Contato que permitirá exibir a cadeia de caracteres "Data do último contato:" para o conteúdo HTML. Para fazer isso, siga as etapas abaixo:

  1. Clique na guia Text do texto HTML.

  2. Clique no ícone Add.

  3. Na coluna Identifier, digite o nome da variável

  4. Na coluna Text, digite o valor padrão.

  5. No conteúdo HTML, insira essa variável de texto pela sintaxe <%= $(Contact) %> .

    CUIDADO

    Se você inserir esses caracteres no editor de HTML, os campos < e > serão substituídos por seus caracteres de escape. Nesse caso, você precisa corrigir o código-fonte clicando no ícone Display source code do editor de texto HTML.

  6. Abra o rótulo Preview do formulário para exibir o valor inserido no HTML:

Esse modo operacional permite que você decomponha o texto de formulários web e gerencie traduções usando a ferramenta de tradução integrada. Para obter mais informações, consulte Tradução de um formulário Web.

Inserção de imagens

Para que as imagens sejam incluídas em formulários, elas devem ser salvas em um servidor acessível de fora.

Selecione o menu Static elements>Image.

Selecione a fonte da imagem a ser inserida: ela pode vir da biblioteca de recurso público ou ser armazenada em um servidor externo acessível de fora.

Se essa for uma imagem da biblioteca, selecione-a na caixa de combinação do campo; se estiver localizada em um arquivo externo, insira o caminho de acesso. O rótulo será exibido passando o cursor sobre a imagem (coincide com um campo ALT em HTML) ou quando a imagem não for exibida.

A imagem pode ser visualizada na seção central do editor.

Nesta página