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

[majestic_aprico]

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? 

[SanfordWhiteman]

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).

[majestic_aprico]

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]

---

@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.

[majestic_aprico]

@SanfordWhiteman while you may not clearly see benefits with this approach, there are some.

1. We have more control over form

2. We don't need to wait on the client to render the form - since it's SSR rendered

3. We can use our own design system - because Marketo UI has not been updated in decade if not more.

[SanfordWhiteman]

---

1. We have more control over form

2. We don't need to wait on the client to render the form - since it's SSR rendered

3. We can use our own design system - because Marketo UI has not been updated in decade if not more.

---

None of those apply to using a hidden Marketo form to submit.

[majestic_aprico]

Right, I need a solution to this.

So far, I haven't seen any proposal for the problem we have.

Is there a way to programmatically submit a form lead from either website or API? Without strictly defined fields?

[SanfordWhiteman]

? The solution is well-known:

yourCustomFormEl.addEventListener("submit", function(e){
  e.preventDefault();

  MktoForms2.whenReady(function(readyForm){
    readyForm.addHiddenFields({
      /* your fields */
    });
   
    readyForm.onSuccess(function(submittedValues,originalThankYouURL){
      /* do whatever you want on success */
      return false;
    });

    readyForm.submit();   
  });

});