20. 2. 2019

Ako pridať kontaktný formulár na blog? #bloggertips


Ahojte!
Keď som sa zamýšľala nad tým, aké príspevky by na blogu mali pribúdať, spomnela som si na populárnu rubriku #bloggertips. Bývala veľmi chcená a ja som mala radosť, keď som niektorým z článkov niekomu pomohla. 


Preto dnes po skoro dvoch rokoch od uverejnenia posledného #bloggertips článku vám prinášam nový článoček z tejto série. Dnešný článok bude "jednoduchý" návod ako vytvoriť kontaktný formulár na váš blog. Ide o formulár, do ktorého človek, ktorý vám chce napísať nejakú správu, ju napíše a správa sa automaticky pošle na váš e-mail, ktorý máte priradený k blogu. Nemusíte teda zverejňovať svoju e-mailovú adresu a takto to budete mať pekne upravené.  

Samotný blogger má medzi svojimi doplnkami kontaktný formulár, ktorý je však obmedzený len na bočný panel alebo na koniec vášho blogu. Ale čo ak chcete dať tento kontaktný formulár do vášho príspevku alebo do vášho navigačného menu? 

1. krok 
V ľavej strane bloggera prejdite na Rozloženie -> footer-1 (nachádza sa úplne na konci)  -> Pridať modul gadget -> vložte kontaktný formulár -> Uložiť



2. krok
Následne znova na ľavej strane bloggera prejdite na Motív -> (kliknite na) Upraviť kód HTML -> a nájdite vo svojej šablóne ContactForm1 (ak neviete ako jednoducho vyhľadať v šablóne, tak kliknite do textu/tela šablóny a stlačte CTRL+F, vyskočí vám okienko na hľadanie a do tohto okienka napíšte ContactForm1). Ak tam máte tri bodky, kliknite na tie tri bodky aby sa vám zobrazil celý doplnok. Mali by ste vidieť nasledovné: 

<b:widget id='ContactForm1' locked='false' title='Kontaktný formulár' type='ContactForm'>
    <b:includable id='main'>
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='contact-form-widget'>
    <div class='form'>
      <form name='contact-form'>
        <p/>
        <data:contactFormNameMsg/>
        <br/>
        <input class='contact-form-name' expr:id='data:widget.instanceId + &quot;_contact-form-name&quot;' name='name' size='30' type='text' value=''/>
        <p/>
        <data:contactFormEmailMsg/> <span style='font-weight: bolder;'>*</span>
        <br/>
        <input class='contact-form-email' expr:id='data:widget.instanceId + &quot;_contact-form-email&quot;' name='email' size='30' type='text' value=''/>
        <p/>
        <data:contactFormMessageMsg/> <span style='font-weight: bolder;'>*</span>
        <br/>
        <textarea class='contact-form-email-message' cols='25' expr:id='data:widget.instanceId + &quot;_contact-form-email-message&quot;' name='email-message' rows='5'/>
        <p/>
        <input class='contact-form-button contact-form-button-submit' expr:id='data:widget.instanceId + &quot;_contact-form-submit&quot;' expr:value='data:contactFormSendMsg' type='button'/>
        <p/>
        <div style='text-align: center; max-width: 222px; width: 100%'>
          <p class='contact-form-error-message' expr:id='data:widget.instanceId + &quot;_contact-form-error-message&quot;'/>
          <p class='contact-form-success-message' expr:id='data:widget.instanceId + &quot;_contact-form-success-message&quot;'/>
        </div>
      </form>
    </div>
  </div>
  <b:include name='quickedit'/>
</b:includable>
  </b:widget>
  
3. krok
Ak ste našli kód, ktorý sme hľadali, všetko čo je vyššie uvedené v ružovej farbe vymažte tak, aby vám v šablóne ostalo len toto:

<b:widget id='ContactForm1' locked='false' title='Kontaktný formulár' type='ContactForm'>

      <b:includable id='main'>

</b:includable>

      </b:widget>

4. krok

Následne všetko uložte a znova v ľavej časti bloggera prejdite na Stránky. Vytvorte si novú stránku al ešte nemáte na blogu sekciu "kontaktujte ma" alebo niečo podobne, a ak máte už takúto stránku vytvorenú, prejdite na túto stránku. (Pokiaľ neviete ako sa vytvárajú stránky, pozrite si môj návod TU.)



5. krok
Keď už máte vytvorenú novú stránku, tak v pravej časti textového editora nájdete nastavenia stránky. Zaškrtnite možnosť: Interpretovať napísaný kód HTML


6. krok
Do tela príspevku vložte nasledujúci kód a dajte publikovať:

<div id='ContactForm1' class='widget ContactForm'>
  <div class='contact-form-widget'>
    <div class='form'>
      <form name='contact-form'>
        <p>Name:</p>
        <input class='contact-form-name' id='ContactForm1_contact-form-name' name='name' size='30' type='text' value=''/>
        <p>E-mail: <span id="required">*</span></p>
        <input class='contact-form-email' id='ContactForm1_contact-form-email' name='email' size='30' type='text' value=''/>
        <p>Message: <span id="required">*</span></p>
        <textarea class='contact-form-email-message' cols='25' 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='Odoslať'/>
        <p class='contact-form-error-message' id='ContactForm1_contact-form-error-message'></p>
        <p class='contact-form-success-message' id='ContactForm1_contact-form-success-message'></p>
      </form>
    </div>
  </div>
</div>

7. krok
Potom prejdite znova v ľavej časti bloggera do Motív -> Prispôsobiť -> Rozšírené -> Pridať CSS  a vložte tam nasledujúci kód a uložte pomocou Použiť na tento blog (pri jednotlivých riadkoch máte v zátvorkách popísané, čo ktoré predstavuje a môžete formulár prispôsobiť vašej šablóne):

.contact-form-widget {
width: 500px;  
max-width: 100%;
padding: 10px;
background: #fff; 
color: #000; 
border: 0px solid #eee; 
}
.contact-form-name, .contact-form-email, .contact-form-email-message {
width: 100%; /*Zmena šírky jednotlivých textových polí*/
max-width: 500px; 
}
.contact-form-button-submit {
border: 1px solid #eee; /*Zmena orámovania tlačidla odoslania*/
background: #ff80bf; /*Zmena farby pozadia tlačidla odoslania*/
color: #eee; /*Zmena farby textu tlačidla odoslania*/
width: 35%; /* Zmena šírky tlačidla odoslania*/
margin: 10px 100px; /*Zmena umiestnenia tlačidla odoslania*/
}
.contact-form-button-submit:hover {
border: 1px solid #000; /*Zmena ohraničenia prejdenia myšou na tlačidlo odoslania */
background: #eee; /*Zmena farby tlačidla odoslania, keď prejdete na neho myšou*/
color: #000; /*Zmena farby textu tlačidla odoslania, keď na neho prejdete myšou*/
}
.contact-form-widget p {
margin-bottom: 5px; 
}
.contact-form-cross {
margin-left: 5px !imporatnt;
}
.contact-form-error-message-with-border {
background: #333; /*Zmena farby pozadia správy error */
border: 1px solid #333; /*Zmena ohraničenia správy error */
bottom: 0;
box-shadow: none;
color: #666; /Zmena farby textu správy error*/
font-size: 12px; /*Zmena veľkosti písma správy error */
padding: 5px;
font-weight: bold; /* Zmena šírky správy error */
text-align: center; 
} 

8. krok
Okrem toho, umiestnenie okienok môžete upravovať aj priamo v stránkach (krok 6) po kliknutí na vašu vytvorenú stránku, kde ste skopírovali kód z kroku 6, budete mať už zobrazený malý kontaktný formulár ale keď dáte jeho ukážku, zobrazuje sa inak. Ak sú jednotlivé textové polia a názvy príliš ďaleko od seba, popresúvajte ich (pomocou tlačidla Del) naľavo a zmeňte hodnoty červenopodčiarknutých čísel na také ako vidíte na obrázku podčiarknuté (čiže z 30 na 20).







A takto by mohol vyzerať aj váš kontaktný formulár. 
Páčil sa vám dnešný návod?
Máte nejaké nápady aké ďalšie #bloggertips by sa tu mali objaviť? Dajte mi vedieť do komentára :)
Krásny deň vám všetkým želám.
<3


7 komentárov:

  1. Tyhle články mám vždycky ráda. Už spoustu návodů jsem na svém blogu využila. :-)
    Povídání nejen o kosmetice

    OdpovedaťOdstrániť
  2. Já mám také tyto typy ráda, myslím si, že je to dobrá pomoc pro ostatní, jak si zlepšit/ zpestřit blog.

    Somethingbykate

    OdpovedaťOdstrániť
  3. Jak já jsem vděčná za lidi, co si dají práci tady s těmi návody. Opravdu super :) Vrátila jsem se k blogování a myslím, že tvůj blog budu teď hodně navštěvovat :D:)

    NATYRALLY

    OdpovedaťOdstrániť
  4. Skvelé tipy! Ja som s týmto mala na začiatku, pri blogovaní, veľmi veľa boja, no nakoniec som pochopila, ako všetko funguje a chvalabohu, takéto veci už nemusím nejako riešiť :D Pre začiatočníkov je to však perfektné! :)
    my blog: THE COLORFUL THOUGHTS

    OdpovedaťOdstrániť

Ďakujem za komentár a prajem krásny deň! :)

www.danycuks.com | Template by DanyČuks