Creare Landing Page con Bootstrap 4

Hai bisogno di una landing page per la tua azienda? In questo articolo ti spiego come creare una landing page con Bootstrap 4 e raccogliere e-mail con Formspark.

Formspark

Il frontend sarà scritto in HTML, CSS e Bootstrap 4. Non è richiesta alcuna conoscenza preventiva di queste tecnologie da seguire. La maggior parte delle definizioni sono prese da https://www.w3schools.com/ (che consiglio vivamente di dare un’occhiata dopo aver terminato questo tutorial)

Se non hai installato un editor di testo HTML-friendly, ti consiglio uno dei seguenti (tutto gratuito e molto facile da installare):

  • https://code.visualstudio.com/
  • https://atom.io/
  • https://www.sublimetext.com/
  • http://brackets.io/

Premessa:

Non esiste un backend per noi da scrivere poiché utilizzeremo un servizio chiamato Formspark per gestire i dati dei moduli inviati dall’utente (semplicemente copiando 1 riga di codice). Formspark non richiede conoscenze di programmazione e puoi registrarti per un account gratuito qui: https://formspark.io

Formspark

Preparazione dello scheletro HTML (12 righe di codice)

Ogni pagina web deve conformarsi, in un modo o nell’altro, a un certo scheletro.

Gif Scheletro

Occorre quindi creare un file index.html con i seguenti contenuti:

<!DOCTYPE html>
<html lang="it">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>La Mia Prima Landing Page</title>
</head>
<body>
    
</body>
</html>

Il tag <html> indica al browser che si tratta di un documento HTML.

L’attributo lang HTML può essere utilizzato per dichiarare la lingua di una pagina Web o di una porzione di una pagina Web. Questo ha lo scopo di aiutare i motori di ricerca e i browser.

L’elemento <head> è un contenitore per tutti gli elementi head, può includere un titolo per il documento, script, stili, meta informazioni e altro.

L’attributo charset specifica la codifica dei caratteri per il documento HTML.

Il tag <body> definisce il corpo del documento, contiene tutto il contenuto di un documento HTML, come testo, collegamenti ipertestuali, immagini, tabelle, elenchi, ecc.

Installazione di Bootstrap 4 (1 riga di codice)

Bootstrap è una libreria di componenti front-end più popolare al mondo per creare progetti reattivi e mobili sul web. Sebbene non copriremo i layout reattivi in questo tutorial, ci darà un aspetto piacevole (anche se forse un po ‘troppo familiare) fuori dagli schemi.

Per aggiungere Bootstrap alla tua pagina, aggiungi semplicemente quanto segue all’interno della sezione head:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">

Il tag <link> definisce un collegamento tra un documento e una risorsa esterna, viene utilizzato per collegarsi a fogli di stile esterni.+

Aggiunta di uno sfondo (7 righe di codice)

La nostra attuale landing page è vuota e noiosa, aggiungiamo un’immagine come sfondo. Per procedere, copia qualsiasi immagine nella stessa directory del file index.html.

Puoi trovare gratuitamente foto d’archivio ad alta risoluzione su:

  • https://negativespace.co/
  • https://www.pexels.com/
  • https://pixabay.com/it/

Background Pagina Destinazione Html

<!DOCTYPE html>
<html lang="it">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>La Mia Prima Landing Page</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
    <style>
        .page-background {
            background: url(./nome-della-foto.jpg) no-repeat center center;
            background-size: cover;
            height: 100vh;
        }
    </style>
</head>

<body>
    <div class="page-background"></div>
</body>

</html>

Il tag <style> viene utilizzato per definire le informazioni di stile per un documento HTML, specificando in che modo gli elementi HTML devono essere visualizzati in un browser.

Il tag <div> definisce una divisione o una sezione in un documento HTML.

All’interno del tag style definiamo una classe css inserendo un punto (.), Seguito dal nome della classe (page-background). Gli stili di questa classe sono applicati a tutti gli elementi HTML con quell’attributo di classe.

Crea un tag div vuoto e imposta la sua classe su page-background.

Aggiunta di una CTA (13 righe di codice)

Successivamente, aggiungiamo un invito all’azione con un titolo di base per offrire ai nostri utenti un po più di contesto.

Screenshot Cta Landing Page

<!DOCTYPE html>
<html lang="it">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>La Mia Prima Landing Page</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
    <style>
        .page-background {
            background: url(https://www.francescoadorno.it/img/2019/01/background-pagina-destinazione-html-1024x715.jpeg) no-repeat center center;
            background-size: cover;
            height: 100vh;
        }
        .cta {
            position: relative;
            top: 35%;
            transform: translateY(-35%);
            background: rgba(0, 0, 0, 0.5);
            padding: 5rem; 
        }
    </style>
</head>

<body>
    <div class="page-background">
        <div class="cta container rounded text-center text-white">
            <h1>La Mia Prima Landing Page</h1>
            <p class="lead p-3">
                Iscriviti per restare aggiornato
            </p>
        </div>
    </div>
</body>


</html>

Per il nostro CTA, creiamo un’altra classe css personalizzata, posizioneremo il contenuto del CTA (più o meno) nel mezzo dello schermo. Aggiunge anche un po ‘di padding (spazio attorno al contenuto dell’elemento) e uno sfondo trasparente scuro per far risaltare il testo bianco.

All’interno del nostro markup HTML noterai un paio di nuovi elementi:

  • H1: definisce l’intestazione più importante
  • p: definisce un paragrafo

Oltre alla nostra classe cta personalizzata, vengono utilizzate alcune classi di utilità di Bootstrap:

  • container: avvolge il contenuto per renderlo visualizzato piacevolmente su più dimensioni dello schermo
  • rounded: arrotonda l’elemento
  • text-center: centra il testo
  • text-white: imposta il colore del testo sul bianco

Aggiunta di un form di contatto (4 righe di codice)

Il primo passo per raccogliere informazioni è fornire input:

Landing Page Con Form Email

Inserisci queste 4 righe di codice dopo il tag <p> per aggiungere un form di contatto che contiene:

  • Indirizzo E-mail
  • Pulsante d’iscrizione
<form class="form-inline justify-content-center">
  <input type="email" name="email" class="form-control form-control-lg mr-2" placeholder="Tua E-mail...">
  <button type="submit" class="btn btn-lg btn-primary">ISCRIVITI</button>
</form>
  • <form> contiene elementi del modulo.
  • <input type = “email”> consente agli utenti di inserire dati e-mail.
  • <input type = “submit”> definisce un pulsante per l’invio dei dati del modulo a un gestore di moduli.

Se vuoi saperne di più sulle classi Bootstrap utilizzate per modellare questo modulo, controlla la documentazione di Bootstrap.

Integrazione di Formspark (1 riga di codice)

Ora possiamo inserire un indirizzo email e premere submit … ma non succede nulla. Questo perché non esiste un back-end per raccogliere e salvare i dati inviati per noi.

Ora, potrei impiegarmi un paio di giorni per apprendere come scrivere una soluzione di back-end personalizzata ma ciò comporterebbe l’introduzione ad almeno un linguaggio di programmazione ‘lato server’ (Javascript, PHP, Java, Go, …) e quindi aumentare in modo significativo la complessità di questo tutorial.

No Gif

Quindi, invece, integreremo Formspark che farà tutto il lavoro pesante per noi. Formspark è un back-end per i moduli HTML, vedrai che è super facile da integrare nei moduli esistenti, ci permetterà anche di visualizzare, esportare e analizzare tutti i dati inviati tramite un particolare modulo.

Per iniziare, crea un account gratuito su https://formspark.io

Passa alla pagina “Moduli”:

Formspark Creazione Form

Premi “+ New form”, inserisci un titolo e una descrizione e premi “Crea”:

Form Newsletter Formspark
Verrai reindirizzato automaticamente alla pagina di istruzioni:

Redirect Formspark

Copia gli attributi ‘action’ e ‘method’ dell’esempio e aggiungili al modulo della tua pagina index.html:

<form action="incolla-qui-link-action" method="POST" class="form-inline justify-content-center">
  <input type="email" name="email" class="form-control form-control-lg mr-2" placeholder="Tua E-mail...">
  <button type="submit" class="btn btn-lg btn-primary">ISCRIVITI</button>
</form>

Form Inviato Formspark

Wow Gif

Possiamo controllare l’invio nella scheda Feed dei moduli:

Formspark Database Email

Conclusione

In questo tutorial hai imparato alcune nozioni di base su HTML e CSS, su come installare Bootrap 4 e integrare con Formspark per raccogliere i dati inviati dagli utenti.

Se hai domande, dubbi, feedback: non esitare a contattarci tramite WhatsApp: Clicca qui per inviarmi un messaggio

Ulteriori approndimenti:

  • https://www.w3schools.com/
  • https://getbootstrap.com/
  • https://formspark.io/

Scrivi un commento

Hai bisogno di
aumentare il traffico?

Hey, sono Francesco Adorno. Mi occupo di ottimizzare e posizionare siti web su Google

Sarai reindirizzato su SEOZoom
Consulenza Google Seo

Incrementa il tuo
traffico online

Hai bisogno di
aumentare il traffico?

Hey, sono Francesco Adorno. Mi occupo di ottimizzare e posizionare siti web su Google

Sarai reindirizzato su SEOZoom

In ottemperanza al D.Lgs. 196/2003 viene rispettata la tutela della privacy degli utenti del blog. Informativa resa ai sensi dell’articolo 13 del D.lgs. n.196/2003 ai visitatori del sito Francesco Adorno e fruitori dei servizi offerti dallo stesso, a partire dall’indirizzo (https://www.francescoadorno.it), con l’esclusione dei link esterni.

Dati di navigazione
In questa categoria di dati rientrano gli indirizzi IP o i nomi a dominio dei computer utilizzati dagli utenti che si connettono al sito, gli indirizzi in notazione URI (Uniform Resource Identifier) delle risorse richieste, ed altri parametri connessi al protocollo http e relativi al sistema operativo e all’ambiente informatico dell’utente. Questi dati vengono utilizzati al solo fine di ricavare informazioni statistiche anonime sull’uso del sito e per controllarne il corretto funzionamento e vengono cancellati immediatamente dopo l’elaborazione. I dati potrebbero essere utilizzati per l’accertamento di responsabilità in caso di ipotetici reati informatici ai danni del sito: salva questa eventualità, allo stato i dati sui contatti web non persistono per più di sette giorni.

Dati forniti volontariamente dall’utente
L’invio facoltativo, esplicito e volontario di posta elettronica agli indirizzi indicati su questo sito comporta la successiva acquisizione dell’indirizzo del mittente, necessario per rispondere alle richieste, nonché degli eventuali altri dati personali inseriti nella missiva.