Hej
Czy jest możliwość połączenia Contact Form 7 z NextJS? Lokalnie mam headlessa, Wordpress jako backend a front NextJS i zastanawiam się w jaki sposób dodać CF7.
0
1
Contact Form z tego co pamiętam powinien dostarczać API, musisz poszukać tego w dokumentacji.
Jak przeglądam swój stary projekt, który z tego korzystał to używałem do wysyłki formularza dwóch endpointów.
https://xxxx.pl/wp-json/contact-form-7/v1/contact-forms/<form_id>/structure (GET) -> zwraca strukturę formularza w postaci JSON'a
https://xxxx.pl/wp-json/contact-form-7/v1/contact-forms/<form_id>/feedback (POST) -> wysyła e-maila
więc stworzyłem prosty komponent, który parsowal otrzymanego jsona z api, tworzył wszystkie potrzebne pola i wysyłał to z powrotem do wordpressa.
0
@Xarviel: A jeśli chodzi o samego forma, to najpierw go tworze w Wordpressie a potem go jakoś magicznie wczytuje w next? Czy tworzę forma w nextjs?
0
LynxBings napisał(a):
@Xarviel: A jeśli chodzi o samego forma, to najpierw go tworze w Wordpressie
Tak, ja całą konfigurację wtyczki trzymałem w Wordpressie. Tam stworzyłem formularz, skonfigurowałem wysyłkę i wszystkie inne opcje.
LynxBings napisał(a):
a potem go jakoś magicznie wczytuje w next?
Po stronie Next.js było magiczne wywołanie API z wordpressa, parsowanie tego JSON'a i przerobienie tego na kod HTML/JSX, z którego powstał formularz dostosowany do Reacta.
Nie wiem jak bardzo skomplikowane to będzie po twojej stronie, ale u mnie cały komponent zajął jedynie 109 linijek bez żadnych dodatkowych bibliotek (o ile jakaś jest).
0
@Xarviel: A gdzieś mogę czymś się ratować jak zaczać? Nie mogę bardzo nic znaleźć w necie ;/
0
LynxBings napisał(a):
Nie mogę bardzo nic znaleźć w necie ;/
Nie wiem, czy jest jakiś gotowy poradnik na ten temat, ale ja korzystałem jedynie z dokumentacji.
LynxBings napisał(a):
A gdzieś mogę czymś się ratować jak zaczać?
No najlepiej zacząć od wyklikania formularza w panelu wordpressa.(https://contactform7.com/). Budujesz go tak samo jakbyś miał go używać w wordpressie. Jeśli masz już "zbudowany" formularz w panelu wordpressa to musisz sprawdzić, czy endpointy działają. Powinny być chyba od razu dostępne, ale nie jestem pewien, czy z poziomu CMSa da się je zablokować. Jak są zablokowane to szukasz jak je odblokować, bo tutaj nie pomogę i rozwiązanie pewnie zależy od pozostałej konfiguracji wordpressa.
Jeśli endpointy działają to pobierasz strukturę formularza w postaci JSON'a przez getStaticProps, albo getServerSideProps w zależności od tego jaki to rodzaj strony (statyczny/renderowanie po stronie serwera) i przekazujesz go jako props.
Nie pamiętam jaką dokładnie strukturę miał ten JSON, ale był tam chyba już cały gotowy HTML, więc wystarczy go wyświetlić przez dangerouslySetInnerHTML w jakimś divie, żeby formularz był widoczny na stronie. Podpinasz sobie ref i w prostym useEffect podpinasz wszystkie potrzebne eventy.
<div
ref={contactFormRef}
dangerouslySetInnerHTML={{
__html: contactForms?.html,
}}
></div>
na koniec stylizujesz i gotowe.
Jakbyś zaczął coś pisać i wstawił jakiś konkretny kod z danym problemem to byłoby łatwiej odpowiedzieć, bo ja za bardzo nie mogę Ci pomóc skoro nie wiem co masz już zrobione i jak to wygląda.
0
@Xarviel: Dziękuje Ci bardzo już za tą odpowiedź, jeszcze pytanie w jaki sposób sprawdzić czy endpointy działają i jeżeli robię to przez GraphQL to coś zmienia? Chodzi mi że to nie będzie Restem.
1
LynxBings napisał(a):
w jaki sposób sprawdzić czy endpointy działają
Trzeba je wywołać w jakiś sposób. Są do tego specjalne programy typu Insomnia lub Postman, ale jeśli to zwykły GET to można go wkleić do przeglądarki i sprawdzić, czy działa https://xxxx.pl/wp-json/contact-form-7/v1/contact-forms/<form_id>/structure. Nie jestem pewien, czy w nowej wersji wtyczki nic się nie zmieniło, ale jeśli nie to musisz za xxx podstawić domenę, a przy <form_id> ID formularza, który znajdziesz w zakładce z Contact Form tam gdzie budowałaś formularz i teoretycznie powinno zadziałać.
LynxBings napisał(a):
jeżeli robię to przez GraphQL to coś zmienia? Chodzi mi że to nie będzie Restem.
Jeśli koniecznie chcesz to zrobić przez GraphQL to musisz mieć coś po stronie wordpressa, co zamieni Rest API na GraphQL. Istnieją gotowe wtyczki, które zamieniają podstawowe funkcje wordpressa na GraphQL, ale nie wiem, czy poradzą sobie ze zmianą innej wtyczki, trzeba sprawdzić, ewentualnie samemu zakodować, bo można to zrobić.
Jeśli wszystko będzie dobrze zrobione to JSON to JSON nie ważne skąd go pobierzesz, jedynie różnica będzie taka, że zamiast tych adresów https://xxxx.pl/wp-json/contact-form-7/v1/contact-forms/... co wklejałem będziesz miał coś innego z GraphQL.
0
API Wordpress'a mi działa lecz API CF7 nie odpowiada "domena/wp-json/contact-form-7/v1/contact-forms/8/feedback"
code "rest_no_route"
message "No route was found matching the URL and request method."
data
status 404
Próbowałem odświeżyć permalinki, cofnąłem wersję CF7 do 4.7, wyłaczyłem pluginy oprocz Contact Forma ale niestety nie odpowiada API.
0
https://github.com/ohze/wp-contact-form-7/blob/master/includes/rest-api.php
Spróbuj poszukać pliku odpowiedzialnego za rest api w kodzie wtyczki (katalog wp-plugins), może pomóc w debugowaniu problemu.
EDIT:
Przejrzałem kod tamtego projektu na wordpressie i znalazłem, że ten endpoint do pobrania struktury formularza to był jednak dorabiany przez programistę od Wordpressa i nie pochodzi bezpośrednio z pluginu.
Na samym początku też przeglądałem ten projekt, ale nic specjalnego nie zauważyłem i założyłem, że oba endpointy pochodzą bezpośrednio z CF, ale jednak nie.
Zrobił on coś takiego do pobrania struktury formularza i mam nadzieję, że zadziała to również u ciebie
add_action('rest_api_init', 'custom_wpcf7_rest_api_init', 10, 0);
function custom_wpcf7_rest_api_init() {
$namespace = 'contact-form-7/v1';
register_rest_route( $namespace,
'/contact-forms/(?P<id>\d+)/structure',
[
[
'methods' => WP_REST_Server::READABLE,
'callback' => 'custom_wpcf7_rest_get_contact_form',
],
]
);
}
function custom_wpcf7_rest_get_contact_form(WP_REST_Request $request) {
$data = wpcf7_rest_get_contact_form($request);
unset($data->data['properties']['mail']);
unset($data->data['properties']['mail_2']);
$form = wpcf7_contact_form( $data->data['id'] );
$data->data['html'] = $form->form_html( array() );
return $data;
}
0
@Xarviel: Dzięki wielkie, no jest jakiś postęp ale muszę zdebugować czemu ta funkcja nie działa.
Fatal error: Uncaught Error: Call to a member function form_html() on boolean
a kojarzysz co może oznaczać to
unset($data->data['properties']['mail']);
unset($data->data['properties']['mail_2']);
Może w panelu coś jest dodane i jest pobierane?
0
@Xarviel: Znalazłem jaki powinien być endpoint
/wp-json/wp/v2/wpcf7_contact_form
:) działa dziękuje za wszystko, może to kwestia wersji WP że teraz endpoint się zmienił?
0
@Xarviel: Przypuśćmy że chciałbym używać Rest API dla samego Contact Form'a w aplikacji NextJS gdzie jest używany GraphQL to jak mogę to zrobić? Tzn. Obecnie mam dodany w env.local endpoint
"WORDPRESS_GRAPHQL_ENDPOINT="http://wordpress.test/graphql"
Czy jeżeli będę chciał uzywać także Rest API to mam dodać gdzieś endpointa do Rest API?
0
LynxBings napisał(a):
@Xarviel: Przypuśćmy że chciałbym używać Rest API dla samego Contact Form'a w aplikacji NextJS gdzie jest używany GraphQL to jak mogę to zrobić?
Tutaj masz ładnie opisane, co musisz zrobić w zależności od tego jak chcesz ten formularz ładować
https://nextjs.org/docs/basic-features/data-fetching/overview
LynxBings napisał(a):
Obecnie mam dodany w env.local endpoint
"WORDPRESS_GRAPHQL_ENDPOINT="http://wordpress.test/graphql"
To możesz dodać takie same wpisy dotyczące CF'a
0
@Xarviel: Dziękuje za odpowiedź. A zadam jeszcze jedno pytanie czy headless polega na tym że mogę tylko pobierać dane czy mając custmowy formularz w jakiś sposób mógłbym wysyłać zapytanie GraphQL i dodawać do bazy WP?
0
@Xarviel:
Udało mi się zrobić taki kod:
const endpoint = 'http://wordpress.test/wp-json/wp/v2/pages'
const options = {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
credentials: 'include',
data: {
title: 'This is Title',
content: 'This is content',
type: 'page',
status: 'publish',
},
body: JSON.stringify(data),
}
const response = await fetch(endpoint, options);
console.log(response);
const result = await response.json();
Lecz przy wysyłaniu mam 401
code "rest_cannot_create"
message "Sorry, you are not allowed to create posts as this user."
data Object { status: 401 }
W jaki sposób mogę uwierzytelnić swoje zapytanie? Skoro to jest headless, nextjs jest gdzie indziej niż WP. Masz jakiś pomysł?
0
Ale Ty teraz próbujesz stworzyć podstronę z poziomu NextJS w Wordpressie?
Sądząc po błędzie Sorry, you are not allowed to create posts as this user, musisz się najpierw zalogować na użytkownika, który ma odpowiednie uprawnienia
0
@Xarviel: Tak, trenuje sobie różne zapytania i próbuje teraz stworzyć post / page. Czyli mam się zalogować tak jakby w NextJS?
0
Nigdy tego nie robiłem przez API, zawsze z poziomu Wordpressa, ale raczej tak. Trzeba się zalogować na jakieś konto z uprawnieniami do tworzenia/edycji podstron.
Czyli wywołujesz najpierw jeden endpoint związany z logowaniem i po skończonym logowaniu wywołujesz drugi endpoint związany z stworzeniem nowej strony, czyli to co już masz teraz. Musisz poszukać jakiegoś poradnika w internecie, który dokładnie to opisuje.