Zrobienie formularza na stronie internetowej zbierającego dane wydaje się na pozór bardzo łatwe.
Wystarczy klika pól typu input i… a no właśnie i potrzebny jest back-end, który obsłuży dane wpisane w formularz zapisze je oraz umożliwi późniejszą obróbkę. Do tego trzeba mieć też świadomość, że przetwarzamy czyjeś dane i zastosowana technologia nie powinna być przypadkowo znalezionym skryptem na GitHubie tylko sprawdzonym i bezpiecznym rozwiązaniem.

Na ratunek Google Forms

Z pomocą w opisanym powyżej problemie przychodzi Google Forms, który dzięki wykorzystaniu iframe pozwoli nam:

  • umieścić formularz na stronie,
  • zebrać od użytkowników dane,
  • potwierdzić (użytkownikowi i autorowi strony) po jego wypełnieniu,
  • bezpiecznie przechowywać i przetwarzać dane.

Do utworzenia formularza należy mieć konto na gmail.com oraz wejść pod adres: docs.google.com/forms/

Formularz jest banalnie prosty w konfiguracji, więc szkoda czasu na jego omawianie. Umożliwia jednak całkiem fajne dostosowanie go do własnych potrzeb poprzez np. wybranie koloru oraz dodanie grafiki.

Po jego utworzeniu należy kliknąć na przycisk „WYŚLIJ” po czym pojawi się widoczna poniżej ramka. Po kliknięcie trzeciej od lewej ikonki otrzymamy gotowy kod iframe. W tym miejscu można jeszcze dopasować szerokość i wysokość, ale równie dobrze można to samo zrobić już bezpośrednio na stronie.

Google Forms back-end

Otrzymujemy kod podobny do poniższego. Kod jest prosty, nie ma tu za wiele do tłumaczenie, istotny jest tu jeden parametr frameborder="0" usuwający ramkę, która od razu zdradzi, że nasz formularz nie jest częścią tej strony (w celu sprawdzenia wystarczy cyfrę 0 zamienić na 1).

<iframe src="https://docs.google.com/forms/d/e/1FAIpQLSeZLp7v9bxHp56I8EHSBIb7CZoGGatBP4rWYGanElrKI7A/viewform?embedded=true" width="500" height="600" frameborder="0" marginheight="0" marginwidth="0" >Ładuję... </iframe>

CSS + HTML, żeby wkomponować formularz

W tym momencie zaczyna się robota CSSowo – HTMLowa, żeby jak najlepiej formularz został dopasowany do istniejącej strony. Poniżej klasy frameworka foundation oraz moje własne style (dla łatwiejszego czytania umieszczone w elementach HTML. Przyda się tutaj użycie tego samego koloru na innych elementach strony oraz dodanie do elementu otaczającego formularz trochę tła, któremu następnie będziemy mogli zaokrąglić rogi wykorzystując border-radius.

<div class="expanded row">
   <div class="small-0 medium-6 text-justify columns" style="background-color: #009688; color: white; border-radius: 15px; padding: 1%; margin-top:15px;">
      <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero incidunt esse, veniam minus earum assumenda itaque. Excepturi reiciendis amet atque necessitatibus dignissimos, quidem asperiores, delectus consequatur. Provident mollitia nisi consequuntur?</div>
   </div>
   <div class="small-12 medium-6 text-center columns" style="border-radius: 15px; padding: 1%;">
      <iframe src="https://docs.google.com/forms/d/e/1FAIpQLSeZLp7v9bxHVp568EHSHBIb7CZoG2GatBP4rWYanElrK7A/viewform?embedded=true" width="500" height="600" frameborder="0" marginheight="0" marginwidth="0" style="border-radius: 15px; padding: 1%; background-color: lightgrey;">Ładuję...</iframe>
   </div>
</div>

Efekt jest bardzo interesujący i wklejony formularz google wygląda jak szyty na miarę dla tej strony. Dodatkowo dzięki temu, że całość zapakowana została we framework wszystko będzie responsywne (chociaż w przypadku bardzo małych ekranów można zastanowić się czy wartości width iframe nie zmniejszyć do np. 360).

Google Forms back-end

Po próbnym wypełnieniu formularza warto wrócić na podaną wcześniej stronę, na której formularz był konfigurowany. Zobaczyć tam można, że odpowiedź została zapisana, a co więcej oprócz statystyk, które wygenerowały się samoczynnie mamy dodatkowo dostępnych kilka opcji m.in. bardzo przydatną: „Otrzymuj e-mail z powiadomieniami”.

Google Forms back-end