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