Form Raccolta Segnalazioni Immobil by @Paganini63 - Codewith.it

#main, .loader-cont { display: none; } JavaScript disabilitato.
Non puoi usare Codewith.it senza JavaScript.

References

<form>Crea un modulo/form HTML per consentire all'utente di inviare dati al server
<em>Formatta il testo in corsivo/italico enfatizzato
postDefinisce un metodo di invio di dati al server
Inserisce un commento nel codice
<option>Serve ad inserire una voce in un menu di selezione.
<audio>Il tag <audio> HTML permette di inserire contenuti musicali e suoni nel documento

Users

Log in to search for users

Explore

Find inspiration

Interactive Map

ES01a\\\\index.html(2)

sito mattia chiarabini

menu a comparsa Jquery

Esercitazione 1ù

HTML

CSS

JS

terminal console

feedback

add_box New

cookie Policy

Privacy information and cookies

We use cookies or technologies for technical purposes and, with your consent, also for other purposes as specified in the cookie policy. Refusal of consent may make some functions unavailable. Read more about the privacy policy

Click on “Agree” to confirm.

<!DOCTYPE html>
<html lang="it">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Form Raccolta Segnalazioni Immobiliari</title>
  <style>
    :root {
      --primary: #2563eb;
      --primary-hover: #1d4ed8;
      --bg: #f1f5f9;
      --card: #ffffff;
      --text: #0f172a;
      --text-light: #64748b;
      --border: #cbd5e1;
      --error: #dc2626;
      --success: #16a34a;
      --radius: 10px;
      --shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    }

    * { box-sizing: border-box; }
    body {
      font-family: system-ui, -apple-system, sans-serif;
      background: var(--bg);
      color: var(--text);
      line-height: 1.5;
      margin: 0;
      padding: 20px;
    }

    .container { max-width: 850px; margin: 0 auto; background: var(--card); padding: 30px; border-radius: var(--radius); box-shadow: var(--shadow); }
    h1 { text-align: center; color: var(--primary); margin: 0 0 30px; font-size: 1.8rem; }

    fieldset { border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; margin-bottom: 20px; background: #fafafa; }
    legend { font-weight: 600; color: var(--primary); padding: 0 8px; font-size: 1.1rem; }
    
    .form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
    .form-group { display: flex; flex-direction: column; gap: 6px; }
    .form-group.full { grid-column: 1 / -1; }
    
    label { font-weight: 500; font-size: 0.95rem; color: var(--text); }
    .required::after { content: " *"; color: var(--error); }
    
    input, select, textarea {
      padding: 10px 12px;
      border: 1px solid var(--border);
      border-radius: 6px;
      font-size: 1rem;
      background: #fff;
      transition: border-color 0.2s, box-shadow 0.2s;
    }
    input:focus, select:focus, textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(37,99,235,0.15); }
    textarea { resize: vertical; min-height: 100px; }
    
    .checkbox-grid { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 5px; }
    .checkbox-item { display: flex; align-items: center; gap: 6px; font-size: 0.95rem; cursor: pointer; }
    .checkbox-item input { width: 16px; height: 16px; accent-color: var(--primary); }

    .error { border-color: var(--error) !important; background: #fef2f2; }
    .error-msg { color: var(--error); font-size: 0.85rem; display: none; margin-top: 2px; }
    .hidden { display: none !important; }

    .btn-submit {
      background: var(--primary); color: white; border: none; padding: 14px;
      font-size: 1.1rem; font-weight: 600; border-radius: var(--radius);
      cursor: pointer; width: 100%; margin-top: 10px; transition: background 0.2s;
    }
    .btn-submit:hover { background: var(--primary-hover); }
    .btn-submit:disabled { opacity: 0.6; cursor: not-allowed; }

    #feedback {
      margin-top: 20px; padding: 14px; border-radius: var(--radius); text-align: center; display: none;
    }
    #feedback.success { background: #dcfce7; color: var(--success); border: 1px solid #bbf7d0; }
    #feedback.error { background: #fee2e2; color: var(--error); border: 1px solid #fecaca; }

    @media (max-width: 600px) {
      .container { padding: 15px; }
      .form-grid { grid-template-columns: 1fr; }
    }
  </style>
</head>
<body>

<div class="container">
  <h1>? Segnala un Immobile</h1>
  <form id="immobiliForm" novalidate>
    
    <!-- SEZIONE 1 -->
    <fieldset>
      <legend>? Dati del Venditore / Referente</legend>
      <div class="form-grid">
        <div class="form-group">
          <label for="nome" class="required">Nome e Cognome</label>
          <input type="text" id="nome" name="nome" required>
          <span class="error-msg">Campo obbligatorio</span>
        </div>
        <div class="form-group">
          <label for="ruolo" class="required">Ruolo</label>
          <select id="ruolo" name="ruolo" required>
            <option value="">Seleziona...</option>
            <option value="Proprietario">Proprietario</option>
            <option value="Agente Immobiliare">Agente Immobiliare</option>
            <option value="Costruttore">Costruttore</option>
            <option value="Amministratore">Amministratore</option>
            <option value="Altro">Altro</option>
          </select>
          <span class="error-msg">Seleziona un ruolo</span>
        </div>
        <div class="form-group">
          <label for="agenzia">Agenzia / Società</label>
          <input type="text" id="agenzia" name="agenzia">
        </div>
        <div class="form-group">
          <label for="piva_cf" class="required">P.IVA / Codice Fiscale</label>
          <input type="text" id="piva_cf" name="piva_cf" required>
          <span class="error-msg">Campo obbligatorio</span>
        </div>
        <div class="form-group">
          <label for="email" class="required">Email</label>
          <input type="email" id="email" name="email" required>
          <span class="error-msg">Inserisci un'email valida</span>
        </div>
        <div class="form-group">
          <label for="telefono" class="required">Telefono</label>
          <input type="tel" id="telefono" name="telefono" required>
          <span class="error-msg">Campo obbligatorio</span>
        </div>
        <div class="form-group hidden" id="agente-group">
          <label for="iscrizione_agenti">Iscrizione Registro Agenti / FIMAA</label>
          <input type="text" id="iscrizione_agenti" name="iscrizione_agenti">
        </div>
      </div>
    </fieldset>

    <!-- SEZIONE 2 -->
    <fieldset>
      <legend>? Caratteristiche dell'Immobile</legend>
      <div class="form-grid">
        <div class="form-group">
          <label for="tipologia" class="required">Tipologia</label>
          <select id="tipologia" name="tipologia" required>
            <option value="">Seleziona...</option>
            <option value="Appartamento">Appartamento</option>
            <option value="Villa">Villa</option>
            <option value="Ufficio">Ufficio</option>
            <option value="Negozio">Negozio</option>
            <option value="Capannone">Capannone</option>
            <option value="Terreno">Terreno</option>
            <option value="Altro">Altro</option>
          </select>
        </div>
        <div class="form-group">
          <label for="indirizzo" class="required">Indirizzo completo</label>
          <input type="text" id="indirizzo" name="indirizzo" required placeholder="Via, n., interno">
        </div>
        <div class="form-group">
          <label for="citta" class="required">Città / Provincia</label>
          <input type="text" id="citta" name="citta" required>
        </div>
        <div class="form-group">
          <label for="cap">CAP</label>
          <input type="text" id="cap" name="cap" pattern="^\d{5}$" maxlength="5" placeholder="00000">
          <span class="error-msg">CAP non valido (5 cifre)</span>
        </div>
        <div class="form-group">
          <label for="mq_comm" class="required">Mq commerciali</label>
          <input type="number" id="mq_comm" name="mq_comm" min="1" step="1" required>
        </div>
        <div class="form-group">
          <label for="mq_calc">Mq calpestabili</label>
          <input type="number" id="mq_calc" name="mq_calc" min="0" step="1">
        </div>
        <div class="form-group">
          <label for="vani">N. Vani / Locali</label>
          <input type="number" id="vani" name="vani" min="0" step="1">
        </div>
        <div class="form-group">
          <label for="bagni">N. Bagni</label>
          <input type="number" id="bagni" name="bagni" min="0" step="1">
        </div>
        <div class="form-group">
          <label for="piano">Piano / Tot piani</label>
          <input type="text" id="piano" name="piano" placeholder="es. 3° su 5">
        </div>
        <div class="form-group">
          <label for="anno">Anno costr. / Ristrutt.</label>
          <input type="text" id="anno" name="anno" placeholder="es. 1990 / 2021">
        </div>
        <div class="form-group">
          <label for="stato" class="required">Stato conservazione</label>
          <select id="stato" name="stato" required>
            <option value="">Seleziona...</option>
            <option value="Nuovo">Nuovo</option>
            <option value="Ottimo">Ottimo</option>
            <option value="Buono">Buono</option>
            <option value="Da ristrutturare">Da ristrutturare</option>
            <option value="Grezzo">Grezzo</option>
          </select>
        </div>
        <div class="form-group">
          <label for="ape">Classe Energetica (APE)</label>
          <input type="text" id="ape" name="ape" placeholder="A4 - G o Da redigere">
        </div>
        <div class="form-group">
          <label for="riscaldamento">Tipo Riscaldamento</label>
          <select id="riscaldamento" name="riscaldamento">
            <option value="">Seleziona...</option>
            <option value="Autonomo">Autonomo</option>
            <option value="Centralizzato">Centralizzato</option>
            <option value="Pompa di calore">Pompa di calore</option>
            <option value="A pavimento">A pavimento</option>
            <option value="Altro">Altro</option>
          </select>
        </div>
        <div class="form-group full">
          <label>Dotazioni principali</label>
          <div class="checkbox-grid">
            <label class="checkbox-item"><input type="checkbox" name="dotazioni[]" value="Box/Garage"> Box/Garage</label>
            <label class="checkbox-item"><input type="checkbox" name="dotazioni[]" value="Giardino"> Giardino</label>
            <label class="checkbox-item"><input type="checkbox" name="dotazioni[]" value="Terrazzo"> Terrazzo</label>
            <label class="checkbox-item"><input type="checkbox" name="dotazioni[]" value="Balcone"> Balcone</label>
            <label class="checkbox-item"><input type="checkbox" name="dotazioni[]" value="Ascensore"> Ascensore</label>
            <label class="checkbox-item"><input type="checkbox" name="dotazioni[]" value="Cantina"> Cantina</label>
            <label class="checkbox-item"><input type="checkbox" name="dotazioni[]" value="Risc. Autonomo"> Risc. Autonomo</label>
            <label class="checkbox-item"><input type="checkbox" name="dotazioni[]" value="Condizionatore"> Condizionatore</label>
          </div>
        </div>
      </div>
    </fieldset>

    <!-- SEZIONE 3 -->
    <fieldset>
      <legend>? Prezzo e Condizioni</legend>
      <div class="form-grid">
        <div class="form-group">
          <label for="prezzo" class="required">Prezzo richiesto (€)</label>
          <input type="number" id="prezzo" name="prezzo" min="1" step="1000" required>
        </div>
        <div class="form-group">
          <label for="trattabile">Prezzo trattabile?</label>
          <select id="trattabile" name="trattabile">
            <option value="No">No</option>
            <option value="Sì">Sì</option>
            <option value="Parzialmente">Parzialmente</option>
          </select>
        </div>
        <div class="form-group">
          <label for="spese_condo">Spese condominiali annue (€)</label>
          <input type="number" id="spese_condo" name="spese_condo" min="0" step="50" value="0">
        </div>
        <div class="form-group">
          <label for="mutuo_residuo">Presenza mutuo residuo?</label>
          <select id="mutuo_residuo" name="mutuo_residuo">
            <option value="No">No</option>
            <option value="Sì">Sì</option>
          </select>
        </div>
        <div class="form-group full">
          <label for="vincoli">Vincoli o limitazioni</label>
          <textarea id="vincoli" name="vincoli" placeholder="Ipoteca, usufrutto, servitù, piani regolatori..."></textarea>
        </div>
      </div>
    </fieldset>

    <!-- SEZIONE 4 -->
    <fieldset>
      <legend>? Documentazione e Disponibilità</legend>
      <div class="form-grid">
        <div class="form-group">
          <label for="data_disp">Data disponibilità vendita</label>
          <input type="date" id="data_disp" name="data_disp">
        </div>
        <div class="form-group">
          <label for="data_consegna">Data consegna / liberazione</label>
          <input type="date" id="data_consegna" name="data_consegna">
        </div>
        <div class="form-group full">
          <label>Documentazione già pronta</label>
          <div class="checkbox-grid">
            <label class="checkbox-item"><input type="checkbox" name="docs[]" value="Visura"> Visura catastale</label>
            <label class="checkbox-item"><input type="checkbox" name="docs[]" value="Planimetria"> Planimetria aggiornata</label>
            <label class="checkbox-item"><input type="checkbox" name="docs[]" value="APE"> APE</label>
            <label class="checkbox-item"><input type="checkbox" name="docs[]" value="Atto"> Atto di provenienza</label>
            <label class="checkbox-item"><input type="checkbox" name="docs[]" value="Certificazioni"> Certificazioni impianti</label>
          </div>
        </div>
        <div class="form-group">
          <label for="visite">Possibilità visite</label>
          <select id="visite" name="visite">
            <option value="Subito">Subito</option>
            <option value="Su appuntamento">Solo su appuntamento</option>
            <option value="Non al momento">Non al momento</option>
          </select>
        </div>
        <div class="form-group">
          <label for="foto_link">Link foto / virtual tour</label>
          <input type="url" id="foto_link" name="foto_link" placeholder="https://...">
        </div>
        <div class="form-group full">
          <label for="documenti">Upload documenti/foto (max 10MB, JPG/PNG/PDF)</label>
          <input type="file" id="documenti" name="documenti" multiple accept=".jpg,.jpeg,.png,.pdf">
          <span class="error-msg">Formato o dimensione non validi</span>
        </div>
      </div>
    </fieldset>

    <!-- SEZIONE 5 -->
    <fieldset>
      <legend>? Note Libere</legend>
      <div class="form-group full">
        <label for="note">Descrizione commerciale / Punti di forza / Criticità</label>
        <textarea id="note" name="note" maxlength="1000" placeholder="Massimo 1000 caratteri..."></textarea>
      </div>
    </fieldset>

    <!-- SEZIONE 6 -->
    <fieldset>
      <legend>? Privacy (GDPR)</legend>
      <div class="form-group full">
        <label class="checkbox-item" style="align-items: flex-start;">
          <input type="checkbox" id="privacy" name="privacy" required style="margin-top: 4px;">
          <span class="required">Ho letto l'<a href="#" target="_blank">informativa privacy</a> e acconsento al trattamento dei dati per finalità di valutazione e contatto commerciale.</span>
        </label>
        <span class="error-msg">È obbligatorio accettare</span>
        <label class="checkbox-item" style="margin-top: 10px;">
          <input type="checkbox" name="marketing" style="margin-top: 4px;">
          Acconsento a ricevere newsletter e comunicazioni di marketing (facoltativo).
        </label>
      </div>
    </fieldset>

    <button type="submit" class="btn-submit">? Invia Segnalazione</button>
  </form>
  <div id="feedback"></div>
</div>

<script>
document.addEventListener('DOMContentLoaded', () => {
  const form = document.getElementById('immobiliForm');
  const ruoloSelect = document.getElementById('ruolo');
  const agenteGroup = document.getElementById('agente-group');
  const feedback = document.getElementById('feedback');

  // ? Logica condizionale
  ruoloSelect.addEventListener('change', () => {
    if (ruoloSelect.value === 'Agente Immobiliare') {
      agenteGroup.classList.remove('hidden');
      agenteGroup.querySelector('input').required = true;
    } else {
      agenteGroup.classList.add('hidden');
      const input = agenteGroup.querySelector('input');
      input.required = false;
      input.value = '';
    }
  });

  // ? Helper validazione
  const showErr = (el, msg) => {
    el.classList.add('error');
    const err = el.parentNode.querySelector('.error-msg') || createErr(el);
    if (msg) err.textContent = msg;
    err.style.display = 'block';
  };
  const clearErr = (el) => {
    el.classList.remove('error');
    const err = el.parentNode.querySelector('.error-msg');
    if (err) err.style.display = 'none';
  };
  const createErr = (el) => {
    const div = document.createElement('div');
    div.className = 'error-msg';
    el.parentNode.appendChild(div);
    return div;
  };

  // ? Validazione in tempo reale
  form.querySelectorAll('input, select, textarea').forEach(el => {
    el.addEventListener('input', () => clearErr(el));
    el.addEventListener('change', () => clearErr(el));
  });

  // ? Submit
  form.addEventListener('submit', async (e) => {
    e.preventDefault();
    let isValid = true;
    document.querySelectorAll('.error').forEach(el => el.classList.remove('error'));
    document.querySelectorAll('.error-msg').forEach(el => el.style.display = 'none');
    feedback.style.display = 'none';

    // Campi required standard
    form.querySelectorAll('[required]').forEach(el => {
      if (el.type === 'checkbox' && !el.checked) { showErr(el, 'Obbligatorio'); isValid = false; }
      else if (!el.value.trim()) { showErr(el, 'Campo obbligatorio'); isValid = false; }
    });

    // Email
    const email = form.querySelector('[name="email"]');
    if (email.value && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email.value)) {
      showErr(email, 'Email non valida'); isValid = false;
    }

    // CAP
    const cap = form.querySelector('[name="cap"]');
    if (cap.value && !/^\d{5}$/.test(cap.value)) {
      showErr(cap, 'CAP non valido'); isValid = false;
    }

    // Numeri positivi
    ['mq_comm', 'mq_calc', 'vani', 'bagni', 'prezzo'].forEach(name => {
      const el = form.querySelector(`[name="${name}"]`);
      if (el.value && (isNaN(el.value) || parseFloat(el.value) <= 0)) {
        showErr(el, 'Inserisci un numero valido > 0'); isValid = false;
      }
    });

    // File
    const fileInput = form.querySelector('[name="documenti"]');
    if (fileInput.files.length > 0) {
      const allowed = ['image/jpeg', 'image/png', 'application/pdf'];
      const max = 10 * 1024 * 1024;
      for (let f of fileInput.files) {
        if (!allowed.includes(f.type) || f.size > max) {
          showErr(fileInput, 'Formato non valido o file > 10MB');
          isValid = false; break;
        }
      }
    }

    if (!isValid) {
      feedback.textContent = '⚠️ Correggi gli errori evidenziati prima di inviare.';
      feedback.className = 'error';
      feedback.style.display = 'block';
      document.querySelector('.error')?.scrollIntoView({ behavior: 'smooth', block: 'center' });
      return;
    }

    // ? Simulazione invio (sostituire con fetch() reale)
    const btn = form.querySelector('button[type="submit"]');
    btn.disabled = true;
    btn.textContent = '⏳ Invio in corso...';

    try {
      // ? Esempio integrazione backend:
      // const formData = new FormData(form);
      // const res = await fetch('/api/segnalazioni', { method: 'POST', body: formData });
      // if (!res.ok) throw new Error('Errore server');

      await new Promise(r => setTimeout(r, 1500)); // Simula attesa network
      feedback.textContent = '✅ Segnalazione inviata con successo! Ti contatteremo a breve.';
      feedback.className = 'success';
      feedback.style.display = 'block';
      form.reset();
      agenteGroup.classList.add('hidden');
      window.scrollTo({ top: feedback.offsetTop - 50, behavior: 'smooth' });
    } catch (err) {
      feedback.textContent = '❌ Errore durante l'invio. Riprova più tardi.';
      feedback.className = 'error';
      feedback.style.display = 'block';
    } finally {
      btn.disabled = false;
      btn.textContent = '? Invia Segnalazione';
    }
  });
});
</script>

</body>
</html>