Tutti i blog dovrebbero avere un modulo di contatto per poter essere contattati dagli utenti che non possono per questione di privacy lasciare informazioni strettamente confidenziali. Il modulo di contatto lo si può creare da siti esterni ma volendo si può anche usare quello di Blogger se non si ha troppe esigenze. Solitamente si preferisce mostrarlo all'interno di un post o una pagina ma se siete in possesso di un sito eCommerce avete l'obbligo di inserire o un supporto online (una chat per farla breve) o almeno un modulo di contatto in bella vista e non semplicemente posizionato nel footer dove pochi si rendono conto della sua presenza perché da' sicurezza e gli utenti potrebbero aver bisogno di una risposta di conferma prima di fare un acquisto. In sintesi voglio dire che se decidete di non inserire un modulo per poter essere contattati potreste perdere molti acquirenti.
In questo articolo vi spiegherò come inserire un modulo di contattato "chiuso" e che si trova come pulsante in basso a destra; nonostante questo è ben visibile e non da fastidio, basterà cliccare sul pulsante per vederlo nella versione estesa.
Prima di procedere vi consiglio di salvare il modello in modo da poterlo ripristinare nuovamente nel caso in cui questo tutorial non sia compatibile con il vostro template.
Adesso dovete cercare il tag ]]></b:skin> e prima di esso dovete inserire questo codice:
Poi cercate il tag <body e dopo di esso dovete inserire quest'altro codice:
Adesso dovrebbe essere funzionante ma se invece il pulsante non si schioda anche se lo cliccate 100 volte significa che nel vostro modello manca o non è stato aggiornato il JQuery, per sapere come e dove implementarlo vi consiglio di leggere l'articolo: come aggiornare JQuery su Blogger.
In questo articolo vi spiegherò come inserire un modulo di contattato "chiuso" e che si trova come pulsante in basso a destra; nonostante questo è ben visibile e non da fastidio, basterà cliccare sul pulsante per vederlo nella versione estesa.
Prima di procedere vi consiglio di salvare il modello in modo da poterlo ripristinare nuovamente nel caso in cui questo tutorial non sia compatibile con il vostro template.
Adesso dovete cercare il tag ]]></b:skin> e prima di esso dovete inserire questo codice:
#mbl-contact .ContactForm {
margin: 0px!important;
}
#mbl-contact .contact-form-button-submit {
max-width: none;
width: 100%;
height: 35px;
border: 0;
background-image: none;
background-color: #FA411E;
cursor: pointer;
font: normal normal 13px Open Sans;
font-style: normal;
font-weight: 400;
}
.#mbl-contact .contact-form-button-submit:hover {
background-color: #222;
background-image: none;
border: 0;
}
#mbl-contact #contact {
position: fixed;
bottom: 0;
right: 1%;
background-color: #EEE;
color: #555;
width: 300px;
z-index: 1.0E+15;
}
#mbl-contact #contact .contact-form-widget {
padding: 30px;
display: none;
}
#mbl-contact #contact {
position: fixed;
bottom: 0;
right: 1%;
background-color: #EEE;
color: #555;
width: 300px;
z-index: 1.0E+15;
}
#mbl-contact #contact h2.title {
margin: 0px;
font-weight: 400;
background-color: #FA411E;
color: #FFF;
padding: 8px 15px;
font-size: 16px;
cursor: pointer;
letter-spacing: 3px;
text-align: center;
}
#mbl-contact #contact h2.title .fa {
position: absolute;
left: 10px;
top: 12px;
}
#mbl-contact #contact .contact-form-widget {
width: 240px;
padding: 30px;
display: none;
}
#mbl-contact #contact * {
transition: all 0 ease;
-webkit-transition: all 0 ease;
-moz-transition: all 0 ease;
-o-transition: all 0 ease;
}
#mbl-contact #contact .contact-form-name,#contact .contact-form-email,#contact .contact-form-email-message {
background-color: #DDD;
color: #111;
border: 0;
padding: 10px 5px;
font: normal normal 13px Open Sans;
}
#mbl-contact .contact-form-name,.contact-form-email,.contact-form-email-message,.contact-form-widget {
max-width: none;
margin-bottom: 15px;
}
Poi cercate il tag <body e dopo di esso dovete inserire quest'altro codice:
<div id="mbl-contact">
<b:section class='contact' id='contact' maxwidgets='1' showaddelement='yes'>
<b:widget id='ContactForm2' locked='true' title='Contattaci' type='ContactForm'>
<b:includable id='main'>
<b:if cond='data:title != ""'>
<h2 class='title'><i class='fa fa-paper-plane'/> <data:title/></h2>
</b:if>
<div class='contact-form-widget'>
<div class='form'>
<form name='contact-form'>
<input class='contact-form-name' expr:id='data:widget.instanceId + "_contact-form-name"' expr:placeholder='data:contactFormNameMsg' name='name' size='30' type='text' value=''/>
<input class='contact-form-email' expr:id='data:widget.instanceId + "_contact-form-email"' expr:placeholder='data:contactFormEmailMsg' name='email' size='30' type='text' value=''/>
<textarea class='contact-form-email-message' cols='25' expr:id='data:widget.instanceId + "_contact-form-email-message"' expr:placeholder='data:contactFormMessageMsg' name='email-message' rows='5'/>
<input class='contact-form-button contact-form-button-submit' expr:id='data:widget.instanceId + "_contact-form-submit"' expr:value='data:contactFormSendMsg' type='button'/>
<div style='text-align: center; max-width: 222px; width: 100%'>
<p class='contact-form-error-message' expr:id='data:widget.instanceId + "_contact-form-error-message"'/>
<p class='contact-form-success-message' expr:id='data:widget.instanceId + "_contact-form-success-message"'/>
</div>
</form>
</div>
</div>
</b:includable>
</b:widget>
</b:section>
</div>
<script type='text/javascript'>
//<![CDATA[
$( "#contact h2.title" ).click(function() {$( "#contact .contact-form-widget" ).toggle("fast");});
//]]>
</script>
Adesso dovrebbe essere funzionante ma se invece il pulsante non si schioda anche se lo cliccate 100 volte significa che nel vostro modello manca o non è stato aggiornato il JQuery, per sapere come e dove implementarlo vi consiglio di leggere l'articolo: come aggiornare JQuery su Blogger.
