Formularz kontaktowy w oknie Ajaxowym

Niniejszy artykuł poświęcony jest wyświetlaniu formularz kontaktowego w oknie Ajaxowym, tak jak jest to zrobione w zakładce Kontakt. Pisząc okno Ajaxowe mam na myśli modalne okno wywoływane za pomocą javaskryptowego frameworku jQuery.

Do rozwiązania problemu użyłem modułu Modal forms, powiązanego z Chaos tool suite (ctools) module.

Oczywiście aby formularz kontaktowy był dostępny należy go aktywować. Jeżeli nie mamy pewności czy formularz jest załączony przechodzimy do zakładki Moduły i sprawdzamy czy w grupie modułów podstawowych (Rdzeń) zaznaczony jest moduł "Contact".

Jeżeli formularz nie jest załączony, należy zaznaczyć go i kliknąć na przycisk Zapisz konfigurację. Przycisk znajduje się na samym końcu listy dostępnych modułów.
Załączony formularz dostępny jest pod adresem twojastrona.pl/contact

Teraz trzeba jeszcze ustawić odpowiednie uprawnienia do używania tego modułu. W tym celu należy przejść do zakładki Ludzie -> Uprawnienia i zezwolić użytkownikom na używanie formularza kontaktowego.

Po zainstalowaniu modułów Modal forms i Ctools oraz po skonfigurowaniu formularza możemy przystąpić do działania.

Zacznijmy od skonfigurowania modułu Modal forms. Moduł ten umożliwia wyświetlenie w oknie modalnym formularze logowania, rejestracji nowego użytkownika, przypomnienia hasła oraz formularz kontaktowy. Ja skupię się tylko na tym ostatnim, więc tylko ten typ formularza zaznaczam w opcjach modułu.

Dodam jeszcze że opcje modułu Modal forms (jak również większości modułów) dostępne są w zakładce moduły i tam obok każdego modułu znajduje się odnośnik do konfiguracji.

Mając skonfigurowane moduły pozostaje już tylko utworzenie zawartości z linkiem do formularza kontaktowego, link ten musi być odpowiednio zbudowany np.

<a class="ctools-use-modal" href="./contact">Modal Kontakt</a>
<a class="ctools-use-modal ctools-modal-modal-popup-small" href="./contact">Modal Kontakt</a>

Dodatkowa klasa "ctools-modal-modal-popup-small" pozwala na określenie rozmiarów naszego okna. Do wyboru mamy niestety tylko trzy rozmiary:

ctools-modal-modal-popup-small (300x300)
ctools-modal-modal-popup-medium (550x450)
ctools-modal-modal-popup-large (80%x80%)

Prawdę mówiąc żaden z powyższych rozmiarów nie nadaje się dla formularza kontaktowego. Jak dla mnie najbardziej optymalny rozmiar to 700x570.
Moduł Modal forms nie posiada interfejsu umożliwiającego w łatwy sposób zmianę rozmiarów okna. Można to zrobić na kilka innych sposobów.
Ja wybrałem modyfikację pliku "modal_forms.module". Nie jest to najłatwiejszy sposób, lepiej jest nadpisać styl w pliku CSS, jednak jest to sposób najszybszy.
Plik ten, od linii 150, posiada tablicę definicji rozmiarów okna modalnego ($js_settings = array). Wystarczy dodać tu swoją konfigurację i odpowiednio zmodyfikować link do formularza kontaktowego.

Ja zrobiłem to w następujący sposób:
Przed linią 'modal-popup-small' => array(
wstawiłem taki fragment kodu:

'modal-popup-contact' => array(
  'modalSize' => array(
    'type' => 'fixed',
    'width' => 700,
    'height' => 570,
  ),
  'modalOptions' => array(
    'opacity' => 0.85,
    'background' => '#000',
  ),
  'animation' => 'fadeIn',
  'modalTheme' => 'ModalFormsPopup',
  'throbber' => $throbber,
  'closeText' => t('Close'),
), 

Należy pamiętać o zapisaniu i podmianie pliku "modal_forms.module".

Link do formularza kontaktowego wygląda zatem tak:

<a class="ctools-use-modal ctools-modal-modal-popup-contact" href="./contact"><strong>Modal Kontakt</strong></a>

Jak widać dodatkowa klasa odpowiedzialna za rozmiar okna "ctools-modal-modal-popup-contact" zawiera w nazwie dodaną przez nas konfigurację. W ten sposób można tworzyć własne konfiguracje dla dowolnego okna.