Responsywny formularz w Sitecore 9 i Bootstrap

Wraz z premierą Sitecore 9 otrzymaliśmy kompletnie przebudowany moduł formularzy, z wygodną aplikacją drag&drop do ich budowania. Sprawdźmy czy moduł jest elastyczny, integrując go, z dobrze znanym Bootstrap toolkit, który daje nam responsive grid system i domyślne style formularza.

Standardowy formularz Bootstrap projektuje się według kilku zasad:

  • Pola input oznacza się dodając klasę CSS “form-control“.
  • Elementy powiązane z pojedynczym polem (label, input, walidacja) umieszczone są w pojedynczym elemencie blokowym oznaczonym klasą CSS “form-group” (elementy te można użyć w systemie grid’a dodając klasy CSS”col-*-*“).
  • Aby system grid’a działał poprawnie musimy dodatkowo użyć klasy CSS “row” (na przykład w elemencie form) oraz klasy “container“, którą przeważnie dodaje się poza formularzem w głównym layoucie.

W nowym module “Forms” możemy dodawać wszystkie potrzebne klasy CSS w polu “CSS Class”, we właściwościach każdego elementu. Aby zasymulować bloki “form-group” możemy użyć elementu Sections, który jest renderowany w HTML’u jako zwykły div.

Opisany kod działa na czystej wersji Sitecore 9 i Bootstrap 3. Dla Bootstrap 4 potrzebne jest kilka zmian, na przykład zamiast klasy “hidden” stosuje się klasę “d-none”.

Budowa formularza kontaktowego w Sitecore 9 Forms

Możesz ściągnąć i zainstalować Sitecore Package z kompletnym formularzem, opisanym w tym artykule (jeśli formularz nie pojawił się na liście po zainstalowaniu paczki, przebuduj master search index), lub obejrzeć wszystkie kroki jak zbudować taki formularz w nowym edytorze:

Po zapisaniu formularza, powinny pojawić się nowe Item’y, w Content Editor. Sprawdź jakie są proste w porównaniu z WFFM.

Po otwarciu głównego item’u formularza, możemy zauważyć, że Sitecore Forms używa do walidacji skryptów jquery.validate. Aby zintegrować je z Bootstrap możemy użyć skryptu jquery.validate.unobtrusive.bootstrap. Po ściągnięciu pliku, umieszczamy go w katalogu Website Sitecore’a, w ścieżce \sitecore modules\Web\ExperienceForms\scripts\jquery.validate.unobtrusive.bootstrap.min.js. Następnie musimy wskazać na ten skrypt w itemie naszego formularza, dodając jego nazwę, oddzieloną znakiem “|”. Warto wspomnieć, że skrypty, zdefiniowane w polu “Scripts” będą renderowane tylko na stronach, na których umieścimy formularz.

Dodanie formularza Sitecore 9 na stronę

Po pierwsze, potrzebujemy layout MVC, z placeholder’em, w którym umieścimy formularz. Dodajmy więc nowy Layout item, wybierając szablon “MVC Layout”:

Ta operacja spowoduje stworzenie pliku .cshtml w wybranej lokacji, musimy zmienić jego kod, dodając obsługę Forms:

  • @using Sitecore.ExperienceForms.Mvc.Html – potrzebne dla Html helpers
  • @Html.RenderFormStyles() – renderuje style zdefiniowane w polu “Styles” w itemie formularza
  • @Html.RenderFormScripts() – renderuje skrypty zdefiniowane w polu “Scripts” w itemie formularza

Następnie potrzebujemy kilku zmian dla obsługi Bootstrap’a:

  • <link rel=”stylesheet” href=”//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css” /> – style Bootstrap z  CDN, ale możemy też użyć lokalnego pliku.
  • <main role=”main” class=”container”> – element kontenera Bootstrap.

Uaktualnienie dla Sitecore 9.1

W Sitecore 9.1 Forms pojawiła się nowa funkcjonalność związana z warunkowymi polami, która dla każdego warunku, generuje javascript inline w placeholerze, gdzie został użyty formularz. Ponieważ te funkcje javascript używają jQuery, wymagane jest aby wyrenderować referencje do skryptów formularza przed tym placeholderem. Najlepszym rozwiązaniem jest wzorowanie się na rekomendacjach Sitecore’a i wyrenderowanie go w tagu <head>:

1. Zmiana Main Layout.cshtml na:

2. Dodanie nowego pliku MvcOuterLayout.cshtml:

Po dodaniu layout’u możemy użyć go w itemie strony kontaktowej w Presentation Details, dodając do placeholder’a “main” nową kontrolkę używającą renderingu /sitecore/layout/Renderings/System/Forms/Mvc Form. Następnie wybieramy item formularza jako data source tego renderingu. Ostatecznie powinno to wyglądać jak poniżej:

Strona “Thank you”

Dodatkowo możemy stworzyć stronę “Thank you”, która będzie wyświetlona po przesłaniu formularza. Używamy tego samego layout’u “Main Layout” i prostego View rendering’u w Presentation Details strony. Kod View rendering’u może być następujący:

Rendering i główny layout zakładają że w Context item znajdą się pola “title” i “text”, docelowo strona wygląda następująco:

Następnie wybieramy item tej strony w akcji “Redirect to Page” w definicji formularza w aplikacji Forms.

Testowanie formularza

Możemy teraz opublikować wszystkie itemy i przetestować stronę kontaktową. W trakcie próby wysłania niepoprawnych danych formularz wyświetla komunikaty walidacji w stylu Bootstrap’a.

Dodatkowo formularz jest responsywny dla mniejszych ekranów:

Po przesłaniu formularza i otwarciu bazy danych SQL ExperienceForms możemy sprawdzić zapisane dane:

Sprawdźmy HTML wygenerowany przez moduł Forms, powinien zawierać on wszystkie potrzebne klasy CSS i skrypty. Możesz też sprawdzić pliki .cshtml używane przez nowy moduł Forms, znajdują się w katalogu /Views/FormBuilder w folderze Website Sitecore’a. Wygenerowany kod HTML (kliknij aby powiększyć):