mercoledì 17 luglio 2013

Form Contatto: Come aggiungerlo su Blogger in layout e in pagina statica

Ecco come inserire il Form Contatto


Ciao blogger, esaminiamo ora il funzionamento e l'inserimento del Widget ContactForm sia come gadget nel Layout della Home che come inserimento in una pagina Statica:

1° Caso (inserimento del gadget da Layout):
  • Sulla colonna di SX premere Layout (attendere il caricamento della pagine) successivamente premere Aggiungi gadget...(come da figura) 
  • si aprirà la finestra di aggiunta Gadget, sulla SX premere Altri Gadget successivamente premere il simbolo + accanto al gadget Modulo di Contatto...(come da figura)

2° Caso (inserimento del form in una pagina statica):

Seguire i passi descritti nel primo caso e proseguire con le seguenti istruzioni:
  • Sulla colonna di SX premere Pagine spostatevi a DX cliccate su Nuova Pagina successivamente nel menu a tendina clicca Pagina Vuota...(come da figura)
  • Aperta la Nuova Pagina ed inserendo il titolo ed eventuali altre vostre impostazioni premete il tasto HTML in alto a SX, ed inserite il seguente codice HTML:
<form name="contact-form">
<b><i>Nome</i></b></form>
<input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" size="50" type="text" value="" />
<b><i>Email * </i></b><br />
<input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" size="50" type="text" value="" />
<b><i>Messaggio *</i></b><br />
<textarea class="contact-form-email-message" cols="50" id="ContactForm1_contact-form-email-message" name="email-message" rows="5"></textarea>
<input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" type="button" value="Invia" />
<br />
<div style="max-width: 500px; text-align: center; width: 90%;">
<div class="contact-form-error-message" id="ContactForm1_contact-form-error-message">
</div>
<div class="contact-form-success-message" id="ContactForm1_contact-form-success-message">
</div>
</div>
  • Sulla colonna di DX premete OPZIONI e mettete la selezione a Non consentire, nascondi quelli esistenti...(come da figura)
  • Salvate la pagina ritornate a Blogger, sulla colonna di SX cliccate Modello e successivamente Modifica HTML...(come da figura)

Aperta la pagina inerente all'HTML del nostro modello andremo ad inserire il codice corrispondente al funzionamento del nostro FORM nella pagina statica nel seguente modo:

  • cliccare in un punto qualsiasi del codice HTML, premere i tasti CTRL+F e trovate questo codice HTML            ]]></b:skin>
  • una volta trovata questa stringa di codice andate un rigo sopra ed inserite il seguente codice HTML:

#ContactForm1{
display:none !important;
}
.contact-form-widget {
max-width: 90%;
margin: 2 auto;
padding: 20px;
background: #eee;
color: #191919;
}
.contact-form-name, .contact-form-email, .contact-form-email-message {
max-width: 90%;
margin-bottom: 20px;
}
.contact-form-button-submit {
width:100px;
background: #0e50bc;
font-size:14px;
font-weight:bold;
color: #fff;
}

N.B.: I numeri corrispondenti alle righe del Codice HTML possono variare, quindi state tranquilli/e se nell'immagine postata non vi risulterà lo stesso numero di riga ;) 


Salvate TUTTO e pubblicate.

Nessun commento:

Posta un commento