Forms sem estilos

    Use esta página quando você quer manter o comportamento do SDK, mas o visual do formulário ou do modal será 100% controlado pelo seu CSS.

    Formulário existente sem estilos

    <form
  data-cx-ingest-form
  data-cx-nostyles
  data-cx-success-message="Enviado com sucesso!">
  <label>
    Nome
    <input data-cx-field="name" placeholder="Seu nome" />
  </label>

  <label>
    E-mail
    <input data-cx-field="email" placeholder="Seu e-mail" />
  </label>

  <label>
    Telefone
    <input data-cx-field="telephone" placeholder="Seu telefone" />
  </label>

  <input type="text" data-cx-field="website" hidden />

  <button type="submit">Enviar</button>
</form>
    <button data-cx-open="contato-nostyles" type="button">
  Abrir modal
</button>

<div
  data-cx-form-widget
  data-cx-widget-id="contato-nostyles"
  data-cx-mode="modal"
  data-cx-nostyles
  data-cx-title="Solicite contato"
  data-cx-description="Esse modal usa apenas o comportamento JS do SDK."
  data-cx-submit-label="Enviar"
  data-cx-show-lgpd="true"
  data-cx-lgpd-required="true"></div>

    O que continua funcionando

    • envio do formulário
    • validação
    • mensagem de sucesso e erro
    • abertura de modal
    • redirect do fluxo
    • envio de dados da página, como UTM

    O que deixa de ser responsabilidade do SDK

    • aparência do formulário
    • aparência do modal
    • tema visual padrão
    • classes visuais padrão

    Quando usar

    Use data-cx-nostyles quando:

    • você já tem um design system
    • a página precisa seguir um visual próprio
    • você não quer misturar estilos da Clickmax com CSS local