integrazioni · site builder

Un modulo di contatto per il sito Framer, con un solo Embed.

Il modo più rapido per aggiungere un modulo a Framer è un Embed di codice: poche righe HTML puntate all’endpoint mailcontact e gli invii arrivano nella casella, con avvisi Discord, Slack o email.

Framer ha componenti modulo nativi, a pagamento al momento della scrittura. Embed è diverso: markup tuo verso un endpoint esterno, funziona su ogni sito Framer senza usare le sue funzioni modulo.

Ogni casella ha anche una vera email ([email protected]) subito funzionante. Utile se la landing page Framer richiede un contatto prima di configurare la posta del dominio.

configurazione consigliata

Usa lo script MailContact con il tuo design.

Aggiungi questo HTML al sito oppure usa generatore di moduli. Sostituisci il link del modulo con il tuo. Lo script ospitato inserisce il controllo nascosto, gestisce invio e verifica automatica e conserva la bozza in caso di errore. Tu controlli HTML e CSS. I moduli Free mostrano un link visibile “Processed by mailcontact.app”; Pro e Plus no. I messaggi seguono la lingua del browser; imposta data-mailcontact-language="fr" sul modulo per impostare il francese.

contact.html
<form action="https://mailcontact.app/api/forms/your-form-id" method="POST" data-mailcontact-form lang="it" data-mailcontact-language="it">
  <input type="hidden" name="_language" value="it" />
  <fieldset>
    <legend>Contattaci</legend>
    <label>
      Nome (facoltativo)
      <input name="name" type="text" autocomplete="name" maxlength="200" />
    </label>
    <label>
      Email
      <input name="email" type="email" autocomplete="email" maxlength="320" required />
    </label>
    <label>
      Messaggio
      <textarea name="message" rows="5" maxlength="5000" required></textarea>
    </label>
    <noscript>
    <div aria-hidden="true" style="position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden;">
      <label>Sito web
        <input name="company_website" type="text" tabindex="-1" autocomplete="off" />
      </label>
    </div>
    </noscript>
    <button type="submit">Invia messaggio</button>
  </fieldset>
  <p data-contact-status role="status" aria-live="polite" aria-atomic="true"></p>
</form>
<script defer src="https://mailcontact.app/forms/v1.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

Per un componente con un proprio gestore di invio, carica lo stesso script e usa MailContact.prepare(form) e MailContact.send() al posto del marcatore automatico. Consulta riferimento per interfacce personalizzate per caricamento, messaggi e attribuzione Free.

lo snippet

Alternativa: integrazione diretta per Framer.

Questo esempio invia direttamente all’API. Mantieni il campo obbligatorio company_website presente e vuoto. Gli invii nativi aprono JSON in caso di successo o una pagina di verifica se serve. Gli script personalizzati senza supporto alla verifica inviano i messaggi sospetti in Spam per revisione; anche lo spam evidente resta lì senza notifiche né consumo di quota. Una risposta di successo conferma la ricezione, anche per revisione, oppure lo scarto silenzioso di un controllo compilato. Vedi protezione antispam per il comportamento completo.

Insert → Embed → HTML
<form action="https://mailcontact.app/api/forms/your-form-id" method="POST">
  <input type="text" name="name" placeholder="Your name" />
  <input type="email" name="email" placeholder="[email protected]" required />
  <textarea name="message" placeholder="What can we help with?" required></textarea>
  <button type="submit">Send</button>
  <input name="company_website" type="text" tabindex="-1" autocomplete="off"
    style="position:absolute;left:-10000px" aria-hidden="true" />
</form>
<style>
  form { display: grid; gap: 8px; font-family: system-ui, sans-serif; }
  input, textarea, button { padding: 10px 12px; border: 1px solid #d4d4d4; border-radius: 8px; font: inherit; }
  textarea { min-height: 96px; resize: vertical; }
  button { background: #111; color: #fff; border: none; cursor: pointer; }
</style>

come funziona

Tre passaggi dall’inizio alla fine.

01

Crea una casella

Una casella per progetto. Chiamala come il sito Framer e ottieni subito endpoint modulo ed email.

02

Incolla in un Embed

In Framer inserisci Embed, passa a HTML e incolla lo snippet con l’ID modulo. Ridimensiona il componente per mostrare tutto il modulo.

03

Ricevi notifiche

Aggiungi Discord, Slack, email o webhook. I messaggi consegnati ti avvisano dove sei già.

perché mailcontact

Pensato per funzionare con Framer.

Nessun piano superiore per un solo modulo

I moduli nativi Framer sono a pagamento al momento della scrittura. Un Embed col tuo HTML invia direttamente a mailcontact da ogni sito Framer pubblicato.

Nulla da ospitare dietro al sito

Framer pubblica le pagine, ma dietro non c’è un tuo server. Il modulo invia direttamente a mailcontact. CORS è aperto: funzionano sottodomini framer.website e domini personalizzati.

Un indirizzo email nella stessa casella

Una landing page Framer richiede spesso anche un’email. [email protected] funziona subito, senza DNS, e arriva accanto agli invii del modulo.

FAQ

Framer + mailcontact: le risposte

Serve un piano Framer a pagamento per aggiungere un modulo di contatto?

Non con questo approccio. I componenti modulo Framer sono a pagamento al momento della scrittura, ma lo snippet sopra è semplice HTML in un Embed che invia a mailcontact. Non usa le funzioni modulo di Framer.

Come mostro una conferma dopo l’invio del modulo?

L’endpoint risponde con un piccolo JSON: un invio nativo apre quella risposta grezza. Usa lo script MailContact ospitato nell’Embed per invio, verifica e messaggi in linea. Il reindirizzamento configurabile per invii nativi non è attualmente disponibile.

Posso adattare il modulo al mio design Framer?

Sì, il markup è interamente tuo. L’HTML Embed non eredita gli stili Framer: includi un blocco style, come nello snippet, con font e colori del sito.

Funziona da un sottodominio framer.website gratuito?

Sì. L’endpoint accetta POST da qualsiasi dominio, quindi funzionano sottodomini gratuiti e domini personali. Limiti generosi per un modulo: 20 richieste al minuto per IP.

correlati

Funziona anche con

Una casella per ogni progetto Framer che pubblichi.

Moduli e un vero indirizzo email insieme, con notifiche dove lavori. Inizia con un account gratuito.

Crea un modulo gratis

Non serve la carta di credito. Free include un progetto e 50 messaggi dal modulo al mese.