integrazioni · site builder

Un modulo di contatto per la pagina Carrd, con una vera casella dietro.

Carrd non richiede servizi con widget o Zapier: aggiungi un Embed, incolla l’HTML sotto e la landing page ha un modulo funzionante. Gli invii arrivano nella casella mailcontact del progetto, con avvisi Discord, Slack, email o webhook appena qualcuno scrive.

Carrd serve a lanciare landing page indipendenti e ciascuna deve permettere ai primi utenti di contattarti. mailcontact dà una casella per modulo e vera email ([email protected]) da mettere nel piè di pagina. Niente DNS, server email o codice di collegamento.

L’unico requisito è lato Carrd: Embed è incluso nei piani Pro, da Pro Standard in su al momento della scrittura. Poi basta copiare: cinque minuti dal blocco vuoto al primo test.

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

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.

Editor Carrd → elemento Embed → Code
<form id="contact" 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's on your mind?" 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>
<p id="contact-thanks" hidden>Thanks, your message is in.</p>
<p id="contact-status" role="status" aria-live="polite"></p>
<script>
  var form = document.getElementById("contact");
  form.addEventListener("submit", async function (e) {
    e.preventDefault();
    try {
      var response = await fetch(form.action, { method: "POST", body: new FormData(form) });
      var data = await response.json();
      if (!response.ok || data.ok !== true) throw new Error(data.error || "Please try again.");
      form.hidden = true;
      document.getElementById("contact-thanks").hidden = false;
    } catch {
      document.getElementById("contact-status").textContent = "We could not confirm reception. Your text is still here.";
    }
  });
</script>

come funziona

Tre passaggi dall’inizio alla fine.

01

Crea una casella

Una casella per landing page. Chiamala come il progetto e ottieni subito endpoint modulo ed email.

02

Incolla in un elemento Embed

Nell’editor Carrd aggiungi Embed, scegli Code, incolla lo snippet e sostituisci your-form-id con l’ID dell’endpoint. Pubblica.

03

Ricevi notifiche

Aggiungi un canale Discord, Slack, email o webhook. I messaggi consegnati ti avvisano dove sei già, senza abituarti a controllare dashboard.

perché mailcontact

Pensato per funzionare con Carrd.

Tutto in un solo elemento Embed

Markup, ringraziamento in linea e poche righe fetch stanno in un solo embed Code. Carrd consente tag script: i visitatori restano sulla pagina.

Una casella per ogni landing page che pubblichi

Carrd facilita tanti siti a pagina singola. Dai a ciascuno casella e indirizzo invece di accumulare risposte nella posta personale. Free copre un progetto modulo e 50 invii al mese; Pro dieci progetti e ricezione email.

Un vero indirizzo email nella stessa pagina

Alcuni saltano i moduli e vogliono un indirizzo. Metti [email protected] nel piè di pagina Carrd: funziona subito e arriva nella stessa casella del modulo.

FAQ

Carrd + mailcontact: le risposte

Serve Carrd Pro per aggiungere il modulo in questo modo?

Serve un piano Carrd con Embed: Pro Standard o superiore al momento della scrittura. Su mailcontact Free include un progetto, un modulo e 50 invii al mese. Pro aggiunge email di ricezione, dieci progetti e 1.000 messaggi al mese.

Perché lo script? Il modulo non può inviare nativamente?

Sì, ma un invio nativo mostra ora una risposta JSON grezza anziché tornare alla pagina. Lo script ospitato mantiene il visitatore sulla pagina Carrd, gestisce la verifica automatica e mostra i messaggi in linea. Il reindirizzamento configurabile per invii nativi non è attualmente disponibile.

Posso adattare il modulo al mio tema Carrd?

Sì, è il tuo HTML. Aggiungi un tag style nello stesso Embed per colori e font. L’API diretta non cambia il markup. Lo script ospitato conserva il design e aggiunge un link visibile su Free; Pro e Plus non richiedono attribuzione.

Una landing page Carrd incontrerà limiti agli invii?

L’endpoint accetta fino a 20 richieste al minuto per IP, ben oltre il traffico normale di un modulo su landing page. Volumi complessivi maggiori sono disponibili con Pro (€9/mese) o Plus (€29/mese).

correlati

Funziona anche con

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