Is there a way to render form in SSR and then submit using POST request? | Community
Skip to main content
Level 2
June 7, 2023
Question

Is there a way to render form in SSR and then submit using POST request?

  • June 7, 2023
  • 1 reply
  • 2753 views

Hi!

We are trying to reduce form loading times, and one of the ideas that came in is to fetch all form fields on SSR and render the form using our Design System. Then submit using API.

I could not find any supporting documentation on this and also there is no good NPM package that would allow doing this. 

Can someone help? 

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.

1 reply

SanfordWhiteman
Level 10
June 7, 2023

Marketo form descriptors — what you’re editing in Form Editor — are designed to be loaded directly on the client side.

 

They’re used on both Marketo LPs (where you have no server access at all) and on 3rd-party pages (where even if someone has access, they’re rarely available for dev work outside of plopping an embed code into the CMS).

 

So there’s little demand for SSR in the real world. If you want to render forms on the server, I suggest you build your own forms and submit them using a hidden Marketo form — that goes from the browser directly to Marketo and is identical to a visible form post. The Forms 2.0 submit() method is very easy to use.

 

Obviously you can load the descriptor from the server side and deliver it inline. Wouldn’t waste time on that, it’s very tricky to get newForm() to work correctly (I’m probably the only one who knows how to do it and I still hate it).

Level 2
June 12, 2023

Thank you for your answer @sanfordwhiteman , however I am still confused. How do I use the form's submit method when it does not take any arguments? If I build my own form I will have a set of key-value pairs, but submit does not support it as far as I know?

 

I was thinking about the following flow:

 

1. Load form descriptor on the server and render it using our own Design System

2. Get user fill the form

3. Set form values using `setHiddenValues`

4. Submit the form

 

What do you think?

SanfordWhiteman
Level 10
June 13, 2023

@majestic_aprico wrote:

Thank you for your answer @sanfordwhiteman , however I am still confused. How do I use the form's submit method when it does not take any arguments? If I build my own form I will have a set of key-value pairs, but submit does not support it as far as I know?

Obviously you add the fields using form#addHiddenFields and then call form#submit.

 


I was thinking about the following flow:

 

1. Load form descriptor on the server and render it using our own Design System

2. Get user fill the form

3. Set form values using `setHiddenValues`

4. Submit the form

 

What do you think?


Not only is it not technically possible to render the form unless you use a headless browser on the server — even if it were possible, nothing is gained with this approach.