Form Raccolta Segnalazioni Immobil by @Paganini63 - Codewith.it

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

Referenze

autocompleteIndica l'opzione di auto completamento delle aree di input e/o di un form
<abbr>Inserisce abbreviazioni e acronimi
dirnameInvia informazioni sulla direzione di scrittura da un elemento input
<div>Crea contenitori generici o sezioni in una pagina
titleIndica informazioni aggiuntive riguardo un elemento HTML
<strong>Definisce una parte del testo importante con formattazione in grassetto.

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

Harrel Lola DIV CSS

Deutsch Plus [Box]

Dottor Jakyll e Mr Hyde

JS Strutture dati e funzioni es3

CodeALongButton

pr - opening-info

Lezione 4 (seconda parte)

HTML

CSS

JS

terminal console

feedback

add_box Nuovo

cookie Informativa

Informativa privacy e cookies

Utilizziamo cookie o tecnologie per finalità tecniche e, con il tuo consenso, anche per altre finalità come specificato nella cookie policy. Il rifiuto del consenso può rendere non disponibili alcune funzioni. Leggi di più sull'informativa privacy

Clicca su “Accetta” per acconsentire.

<!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>