Na podanej przez Ciebie stronie to nowe okno, to „modal” generowany przez jQueryUI.
W skrócie działa to tak: przycisk „zamawiam” obsługiwany jest przez kawałek skryptu JS, który blokuje domyślą akcję <a> (czyli preventDefault() w jQuery) i wywołuje procedurę odpowiedzialną za wyświetlenie w oknie modalnym właściwego formularza. Sam kod html formularza może się znajdować w template strony, bądź też może być „doładowywany” dynamicznie skryptem JS, z tym że w jednym i drugim przypadku nie jest on wyświetlany (np. display:none w CSS) dopóki nie zostanie wywołana akcja onclick związana z przyciskiem „zamawiam”. Sama konstrukcja formularza w oknie modalnym jest już standardowa – zestaw input’ów kierowany (również JSem) do odpowiednich funkcji odpowiedzialnych za fizyczne wysłanie formularza mailem, bądź zapisania danych w bazie.
Tworząc formularz możesz poszczególnym input’om przypisać wartość początkową korzystając z atrybutu value. Dzięki temu otwierając formularz będzie on wstępnie wypełniony, a wprowadzenie zmian będzie w dalszym ciągu możliwe.
Podsumowując – jeśli chcesz to napisać samodzielnie potrzebujesz stworzyć formularz w HTML i napisać skrypt JS/jQuery/jQueryUI obsługujący akcję wyświetlenia okna modalnego i wysłki formularza. Jeśli wybierasz tą drogę, poczytaj na temat okien modalnych w jQueryUI oraz .click() i .post() w jQuery.
Jeśli zaś potrzebujesz gotowca, na pewno znajdziesz pluginy z taką funkcjonalnością, np. pierwszy z brzegu https://wordpress.org/plugins/ninja-forms-modal/installation/
Dzięki za szerokie wytłumaczenie, za pierwszy sposób na razie się nie zabieram, trochę by mi to zajęło a chciałbym to mieć jak najszybciej. Skorzystałem z wtyczki, którą mi podałeś, jednakże mam troszkę problem z jego obsługą, mianowicie poczytałem i piszą: Simply use the [ninja_forms_modal] shortcode and pass it the following paramters: your form ID (id), the text or image url you would like to be used as the link to your Ninja Forms Modal (text_link, image_link).
Here is a example of a text link: [ninja_forms_modal id=2 text_link”Click here to fill out out form”]
Czyli na początku muszę na stronie wpisać [ninja_forms_modal, potem ID (skąd go mam wziąć?), potem odnośniki, np. image_link, więc jeśli np chcę aby to był button to co mam wpisać?
Najpierw to tworzysz formularz w Ninja Form i tam uzyskasz ID formularza. Dopiero potem korzystasz z shortcode w treści strony/wpisu
Tak tak, domyśliłem się że tak to miało być, jednak z portalu wordpress gdy pobrałem wtyczkę i zainstalowałem, nie wyświetlały mi się w panelu ustawienia wtyczki. Pobrałem ze strony producenta i wszystko gra :))
Pokombinowałem troche, ogarnąłem wtyczkę, stworzyłem formularz, jednak nadal nie wiem jak zrobić aby otwierał się w nowym oknie. Gdy stosuję dla przykładu link [ninja_forms_display_form id=2] to wyświetla się na tej samej stronie, gdy dodam do niego ” text_link”Click here to fill out out form” to wtedy cały kod wyświetla się na stronie, czyli nie to co powinno się wyświetlać ;PP
Here is a example of a text link: [ninja_forms_modal id=2 text_link”Click here to fill out out form”]
W zasadzie to jest odpowiedź 😉
No i oczywiście muszą być zainstalowane ninja forms i ninja forms modal.
Pierwszym błędem było to, że nie miałem zainstalowane Ninja Forms Modal. Drugim to, że kod był nieprawidłowy, skopiowałem z ich strony:
[ninja_forms_modal_form id=1 text_link=’My Modal Forms’]
Wszystko teraz pięknie działa, muszę się jeszcze pobawić aby przypisać to do buttonu, ale to mi już raczej nie sprawi problemów. Wielkie dzięki za pomoc! :))
