Atenção!

Este artigo contém código PHP e destina-se a desenvolvedores. Oferecemos este código como uma cortesia, mas não fornecemos suporte para personalizações de código ou desenvolvimento de terceiros.

Para orientação extra, consulte o tutorial do WPBeginner sobre como adicionar código personalizado.

Dispensar

Como Adicionar um Vídeo Antes do Seu Formulário

Gostaria de adicionar um vídeo envolvente acima do seu formulário? Quer você esteja usando um formulário incorporado padrão ou utilizando os add-ons Formulário Conversacional e Páginas de Formulário, você pode facilmente adicionar uma mensagem em vídeo usando um simples trecho de código.

Este guia mostrará como implementar este recurso.

Configurando Seu Formulário

Primeiro, crie seu formulário e adicione os campos desejados. Se precisar de ajuda para criar um formulário, consulte nosso guia sobre criação do seu primeiro formulário.

crie seu formulário e adicione seus campos

Adicionando Seu Vídeo

Para adicionar um vídeo acima do seu formulário, você precisará adicionar este código ao seu site. Se não tiver certeza de como adicionar código personalizado, consulte nosso guia sobre adição de trechos de código JavaScript ou CSS.

Lembre-se de substituir 999 pelo ID do seu formulário. Se precisar de ajuda para encontrar o ID do seu formulário, confira nosso guia sobre como encontrar IDs de formulários e campos.

Estilizando Seu Vídeo

Para garantir que seu vídeo se ajuste corretamente ao contêiner do seu formulário, você pode adicionar este CSS opcional. Se precisar de ajuda para adicionar CSS personalizado, consulte nosso guia sobre como adicionar CSS personalizado ao seu site.

iframe {
    width: 100%;
    min-height: 400px;
}
Seu vídeo agora aparece antes do seu formulário

O vídeo aparecerá:

  • Acima de formulários incorporados padrão
  • Em links de Páginas de Formulário
  • Em páginas de Formulário Conversacional
  • Com dimensionamento responsivo graças ao CSS

E é isso! Você adicionou um vídeo ao seu formulário com sucesso. Em seguida, gostaria de alterar também o título da aba do navegador? Confira nosso tutorial sobre como alterar o título da página na aba do navegador para mais detalhes.

Ação de Referência

wpforms_frontend_output_before