Pridanie kontaktného formulára do služby Blogger (Blogspot) na samostatnú stránku „Kontaktujte nás“ je skvelý krok. Oficiálny formulár od Google je totiž predvolene navrhnutý len ako modul (widget) do bočného panela, no pomocou malého triku ho vieme vložiť priamo do textu stránky.
Tu je jednoduchý a čistý postup, ako to urobiť bez potreby inštalovať doplnky tretích strán:
1. Krok: Aktivujte kontaktný formulár v Bloggeri
Aby kód na stránke fungoval, Blogger musí vedieť, že na webe kontaktný formulár vôbec chcete.
- Prihláste sa do Blogger.com.
- V ľavom menu kliknite na Rozloženie (Layout).
- Kliknite na Pridať miniaplikáciu (Add a Gadget) v bočnom paneli (Sidebar).
- V zozname nájdite Kontaktný formulár (Contact Form) a pridajte ho.
Tip: Ak nechcete, aby strašil v bočnom paneli, môžete pri miniaplikácii kliknúť na „Upraviť“ a odškrtnúť „Zobraziť túto miniaplikáciu“. Kód na stránke bude fungovať aj tak.
2. Krok: Vložte kód na stránku "Kontaktujte nás"
Teraz prenesieme formulár priamo na vašu podstránku.
- V ľavom menu kliknite na Stránky (Pages) a otvorte svoju stránku „Kontaktujte nás“ (alebo vytvorte novú).
- Pod názvom stránky vľavo hore kliknite na ikonu ceruzky a prepnite zobrazenie na Zobrazenie HTML (HTML view).
- Skopírujte a vložte nasledujúci kód presne tam, kde chcete formulár mať (napríklad pod váš úvodný text):
<div class="contact-form-widget">
<form name="contact-form">
<p>Vaše meno:</p>
<input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" required/>
<p>E-mailová adresa (povinné):</p>
<input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" required/>
<p>Vaša správa (povinné):</p>
<textarea class="contact-form-email-message" cols="25" id="ContactForm1_contact-form-email-message" name="email-message" rows="5" required></textarea>
<input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" type="button" value="Odoslať správu"/>
<div style="text-align: center; max-width: 222px; width: 100%">
<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>
</div>
</form>
</div>Kliknite na Aktualizovať alebo Publikovať vpravo hore.
Dôležité upozornenie: Keď sa prepnete späť do grafického zobrazenia (Compose view), formulár v editore neuvidíte v plnej kráse, iba ako textové polia. Ak chcete vidieť, ako reálne vyzerá, kliknite na tlačidlo Zobraziť (Preview) alebo si stránku otvorte na ostrom webe. Všetky správy, ktoré cez neho návštevníci pošlú, vám prídu priamo na Gmail prepojený s vaším Blogger účtom.
4. Pekný dizajn, CSS úpravy
Chceli by ste k tomuto formuláru doplniť aj pekné dizajnové CSS úpravy, aby tlačidlo a políčka ladili s farbami vášho blogu?
Naštýlovať sa dá úplne všetko – od textových polí cez písmo až po efekty pri kliknutí. Dobrá správa je, že ak ten HTML kód vložíte do Bloggeru, môžete priamo k nemu pridať aj dizajnové CSS pravidlá, ktoré kompletne zmenia jeho vzhľad z nudného "systémového" na moderný a čistý.
Tu je prehľad toho, čo všetko na formulári vieme vizuálne zmeniť a vylepšiť:
Čo všetko sa dá naštýlovať?
- Textové polia (input, textarea): Vieme im zaobliť rohy, pridať jemný tieň, zmeniť farbu pozadia a vnútorné textové výplne (padding), aby text nebol nalepený na okrajoch.
- Efekt aktívneho poľa (:focus): Keď návštevník klikne do políčka, aby začal písať, políčko môže jemne zmeniť farbu okraja alebo zažiariť. Je to skvelý detail pre lepší pocit z používania.
- Tlačidlo odoslať (input[type="button"]): Zo sivého obdĺžnika vieme urobiť moderné dizajnové tlačidlo s vlastnou farbou, výrazným písmom a animáciou.
- Efekt prejdenia myšou (:hover): Keď niekto prejde myšou nad tlačidlo, jeho farba sa môže plynule stmaviť alebo zosvetliť, čo dáva užívateľovi spätnú väzbu, že tlačidlo reaguje.
5. Ukážka moderného dizajnu (CSS Kód)
Pripravil som pre vás kód, ktorý premení váš základný formulár na čistý, elegantný a minimalistický prvok, ktorý zapadne do väčšiny moderných blogov.
Tento blok kódu stačí vložiť úplne na začiatok (nad váš HTML kód formulára) v HTML zobrazení stránky v Bloggeri:
<style>
/* Kontajner celého formulára */
.contact-form-widget {
max-width: 500px;
margin: 0 auto;
font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
background-color: #ffffff;
padding: 30px;
border-radius: 12px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}
/* Štítky nad políčkami */
.contact-form-widget p {
margin-bottom: 8px;
font-weight: 600;
color: #333333;
font-size: 14px;
}
/* Textové polia a textová oblasť */
.contact-form-name,
.contact-form-email,
.contact-form-email-message {
width: 100%;
box-sizing: border-box;
padding: 12px 15px;
margin-bottom: 20px;
border: 1px solid #cccccc;
border-radius: 8px;
font-size: 15px;
color: #333333;
background-color: #f9f9f9;
transition: all 0.3s ease;
}
/* Fix pre textarea */
.contact-form-email-message {
resize: vertical;
min-height: 120px;
}
/* Efekt pri kliknutí do poľa */
.contact-form-name:focus,
.contact-form-email:focus,
.contact-form-email-message:focus {
border-color: #0066cc;
background-color: #ffffff;
box-shadow: 0 0 0 4px rgba(0, 102, 204, 0.1);
outline: none;
}
/* Tlačidlo odoslať */
.contact-form-button-submit {
width: 100%;
background-color: #0066cc;
color: #ffffff;
font-size: 16px;
font-weight: 600;
padding: 14px;
border: none;
border-radius: 8px;
cursor: pointer;
transition: background-color 0.2s ease, transform 0.1s ease;
}
/* Efekt myši nad tlačidlom */
.contact-form-button-submit:hover {
background-color: #004da6;
}
/* Klikací efekt */
.contact-form-button-submit:active {
transform: scale(0.98);
}
/* Správy o úspechu a chybe */
.contact-form-error-message,
.contact-form-success-message {
font-size: 14px;
margin-top: 15px;
font-weight: bold;
}
.contact-form-success-message { color: #28a745; }
.contact-form-error-message { color: #dc3545; }
</style>
<div class="contact-form-widget">
<form name="contact-form">
<p>Vaše meno:</p>
<input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" required/>
<p>E-mailová adresa (povinné):</p>
<input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" required/>
<p>Vaša správa (povinné):</p>
<textarea class="contact-form-email-message" cols="25" id="ContactForm1_contact-form-email-message" name="email-message" rows="5" required></textarea>
<input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" type="button" value="Odoslať správu"/>
<div style="text-align: center; max-width: 222px; width: 100%">
<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>
</div>
</form>
</div>Tip na prispôsobenie: Ak sa vám modrá farba nehodí k dizajnu vášho blogu, stačí v kóde nájsť hodnotu #0066cc (je tam dvakrát) a prepísať ju na akýkoľvek iný hexadecimálny kód farby (napr. #e0115f pre rubínovú, alebo #2ecc71 pre zelenú).
Žiadne komentáre:
Zverejnenie komentára