integrazioni · site builder

Invii dei moduli Webflow senza limiti legati al piano.

I moduli nativi Webflow funzionano bene ma gli invii sono misurati dal piano del sito, con quote mensili secondo il livello al momento della scrittura. Basta un Embed: incolla l’HTML che invia a mailcontact ed evita interamente la gestione Webflow. Gli invii arrivano in una casella per progetto con avvisi Discord, Slack, email o webhook.

Continui a progettare in Webflow. L’embed è HTML semplice: riusa w-input e w-button per ereditare gli stili già creati. I visitatori non vedranno differenze.

Ogni casella mailcontact ha anche una vera email ([email protected]): i messaggi del sito Webflow e degli altri progetti stanno in un posto anziché in pannelli Forms separati.

Crea un account Leggi la documentazione

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 Webflow.

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.

Elemento Embed (Webflow Designer → pannello Add)

<form action="https://mailcontact.app/api/forms/your-form-id" method="POST">
  <input class="w-input" type="text" name="name" placeholder="Your name" />
  <input class="w-input" type="email" name="email" placeholder="[email protected]" required />
  <textarea class="w-input" name="message" placeholder="How can we help?" required></textarea>
  <button class="w-button" type="submit">Send</button>
  <input name="company_website" type="text" tabindex="-1" autocomplete="off"
    style="position:absolute;left:-10000px" aria-hidden="true" />
</form>

come funziona

Tre passaggi dall’inizio alla fine.

Crea una casella

Una casella per sito. Chiamala come il progetto e ottieni subito endpoint ed email. Niente DNS o codice nell’head.

Incolla un elemento Embed

Nel Designer trascina Embed nel posto del modulo, incolla lo snippet e pubblica. w-input e w-button riprendono gli stili dei moduli del sito.

Ricevi notifiche

Aggiungi un canale Discord, Slack, email o webhook. I messaggi ti avvisano senza dover aprire la dashboard del sito.

perché mailcontact

Pensato per funzionare con Webflow.

Non consuma la quota del piano

Webflow misura gli invii nativi secondo il piano al momento della scrittura. Un modulo in Embed invia direttamente a mailcontact: Webflow non lo conta né lo limita.

Con lo stesso stile del tuo sito

L’embed è HTML tuo. Assegna w-input ai campi e w-button al pulsante per ereditare lo stile progettato o usa le tue classi con CSS personalizzato.

Una casella per i siti dei clienti

Gestisci più siti Webflow o stack diversi? Ogni progetto ha casella ed email proprie, unificate in un posto anziché in un pannello Forms per sito.

FAQ

Webflow + mailcontact: le risposte

Quanti invii consente Webflow?

I moduli nativi Webflow hanno una quota mensile legata al piano del sito al momento della scrittura (controlla i prezzi attuali per i numeri esatti). Un modulo HTML tuo che invia a mailcontact evita la gestione moduli Webflow: quei limiti non si applicano.

Serve un piano Webflow a pagamento per usare un elemento Embed?

Al momento della scrittura Webflow riserva codice personalizzato ed Embed ai piani a pagamento: controlla il tuo piano. Se consente già embed, il modulo non costa di più né consuma la quota nativa.

Il modulo incorporato seguirà il mio design Webflow?

Sì, se lo imposti. Aggiungi w-input ai campi e w-button al pulsante per ereditare lo stile dei moduli Webflow nativi, oppure usa classi e CSS tuoi.

Come mostro una conferma dopo l’invio?

L’endpoint risponde con JSON al successo e non reindirizza. Usa lo script ospitato nell’embed per invio, verifica e messaggi in linea. CORS aperto permette l’uso da staging webflow.io e domini personalizzati. Il reindirizzamento configurabile per invii nativi non è attualmente disponibile.

correlati

Funziona anche con

Una casella per ogni progetto Webflow 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.