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.
Dodaj nowy komentarz