Using Powerful Rich Text to inject inline form components into CMS template pages

General
1

Can forms be added as components via Powerful Rich Text?

I tried but the form submit button just reloads the page. Could have sworn I had this working on a previous site.

2

Heyy Jaime,
I came across this requirement some time back and found a solution.

Webflow Forms doesn’t work when they are injected inside a Rich Text Element, I believe because of how Webflow handles form submission. I am not 100% about why it doesn’t work.

But the workaround I found is to use custom form submission using AJAX methd or Fetch API method. However you will need to use a tool like Zapier or Make.com in order to handle the form data.

Here are the steps you can follow-

  1. Create a Webhook inside Zapier or Make and save the Webhook URL from it, we will use it as our endpoint/action URL in Webflow.

  2. Set form submission method to POST

  3. Set the Webhook URL as Action URL

  4. Give your form (not form block) an attribute of “fs-rich-form” and value can be empty.

  5. Place this JS code in your closing </body> tag of the page.

$(document).ready(function() {
    // When the form is submitted
    $('[fs-rich-form]').submit(function(e) {
        e.preventDefault();

        var formEl = $(this); // caching the form in a variable
        var formSubmit = $(this).find('input[type=submit]');
        var actionUrl = $(this).attr("action");
        var formMethod = $(this).attr("method");
        var formSuccess = $(this).siblings('.w-form-done');
        var formError = $(this).siblings('.w-form-fail');
        var myData = $(this).serialize();

        $(formSubmit).val("Please wait....");

        $.ajax({
            url: actionUrl,
            type: formMethod,
            data: myData,
            success: function(response) {
                if (response === 'success') {
                    formEl.hide(); //Hide the form
                    formSuccess.show(); //Show success message
                  //  formEl[0].reset(); // Reset form fields
                    console.log('Response data:', response);
                    console.log('Form submission successful');
                } else {
                    console.log('Form submission failed');
                    console.log('Response data:', response);
                    formSubmit.val("Try again");
                }
            },

            error: function(jqXHR, textStatus, errorThrown) {
                formError.show();
                formSubmit.val("Submit");
                if(jqXHR.status === 500) {
                    formError.text("Internal server error. Please try again later.");
                } else if(jqXHR.status === 404) {
                    formError.text("Resource not found. Please check the URL.");
                } else {
                    formError.text("An error occurred. Please try again.");
                }
                console.log('Form submission failed: ' + textStatus);
            }
        });
    });
});
  1. Send back a webhook response after form is submitted and data is handled using Make (Zapier currently doesn’t support webhook responses). The response body body will be “success”, so in frontend, our code will make the success message visible, similarly we can manage errors.

Note: You can update the code as your requirements or need, you can skip the webhook response or create even stronger form handling, its completely on you.

The fundamental of this solution is using webhooks instead of native Webflow forms.

image

image
image1429Ă—648 81.2 KB

Feel free to watch this video about how to use Make.com for form submissions, its very simple and easy -

2 Likes
3

Thanks so much for the detailed answer @harshit_agrawal !

1 Like