How to Save Rich Text input to CMS Database

Design help CMS
1

I’m currently trying to save the rich text input box to my cms database. Whenever I try external things such as make or zapier, it never pulls the information from the rich text box, but everything else. I want it so that when I submit the form, the rich text and everything else’s data is saved. please help

Here is my code for the inside tag:

<link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">

<script>
var Webflow = Webflow || [];
Webflow.push(function() {

	// display error message
	function displayError(message) {
		hideLoading();
		failureMessage.innerText = message;
		failureMessage.style.display = 'block';
	}

	// hiding the loading indicator
	function hideLoading() {
		showForm();
		successMessage.style.display = 'none';
	}

	// hide the form
	function hideForm() {
		form.style.display = 'none';
	}

	// show the loading indicator
	function showLoading() {
		hideForm();
		successMessage.style.display = 'block';
	}

	// show the form
	function showForm() {
		form.style.display = 'block';
	}

	// listen for xhr events
	function addListeners(xhr) {
		xhr.addEventListener('loadstart', showLoading);
	}

	// add xhr settings
	function addSettings(xhr) {
		xhr.timeout = requestTimeout;
	}

	// triggered form submit 
	function triggerSubmit(event) {

		// prevent default behavior form submit behavior
		event.preventDefault();
		
		// setup + send xhr request
		let formData = new FormData(event.target);
		let xhr = new XMLHttpRequest();
		xhr.open('POST', event.srcElement.action);
		addListeners(xhr);
		addSettings(xhr);
		xhr.send(formData);

		// capture xhr response
		xhr.onload = function() {
			if (xhr.status === 302) {
				let data = JSON.parse(xhr.responseText);
				window.location.assign(event.srcElement.dataset.redirect + data.slug);
			} else {
				displayError(errorMessage);
			}
		}

		// capture xhr request timeout
		xhr.ontimeout = function() {
			displayError(errorMessageTimedOut);
		}
	}

	// replace with your form ID
	const form = document.getElementById('post-form');

	// set the Webflow Error Message Div Block ID to 'error-message'
	let failureMessage = document.getElementById('error-message');

	// set the Webflow Success Message Div Block ID to 'success-message'
	let successMessage = document.getElementById('success-message');

	// set request timeout in milliseconds (1000ms = 1second)
	let requestTimeout = 10000;

	// error messages
	let errorMessageTimedOut = 'Oops! Seems this timed out. Please try again.';
	let errorMessage = 'Oops! Something went wrong. Please try again.';

	// capture form submit
	form.addEventListener('submit', triggerSubmit);

});
</script>

And here is my code for the before tag

<script>
	var Webflow = Webflow || [];
  Webflow.push(function() {
  	$(document).on('submit', 'form', function() {
    	setTimeout(function() { location.reload(true); }, 3000);
    });
  });
</script>
<!-- Include the Quill library -->
<script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>

<!-- Initialize Quill editor -->
<script>
var quill = new Quill('#editor', {
    modules: {
        toolbar: [
        	 [{ 'header': [2, 3, 4, 5, 6, false] }],
        
           ['bold', 'italic', 'underline', 'strike'],
           ['blockquote', 'code-block', 'link'],

           
           [{ 'list': 'ordered'}, { 'list': 'bullet' }],

           ['clean']
       ]
    },
  placeholder: 'You can start typing here...',
  theme: 'snow'
});

var form = document.querySelector('#post-form');
form.onsubmit = function() {
  // Populate hidden form on submit
  var about = document.querySelector('textarea[name=Journal]');
  about.value = quill.root.innerHTML;

  console.log("Submitted", $(form).serialize(), $(form).serializeArray());

  // No back end to actually submit to!
  return false;
};
</script>

If necessary, my ID for the rich text box is ‘editor’.
The form id is email-form.

Currently while using the make integration webhook and I make a sample entry to see the data, this it what I see:
image
The description area should have my rte input from the form but it is missing.

Here is my public share link: LINK
(how to access public share link)

2

Speaking from my experience, I’d suggest to check if your CMS has a built-in feature or a plugin for handling rich text inputs directly. If not, you might need to look into custom scripting or API integration to ensure that rich text content is correctly captured and saved along with your other data.

Also, make sure the form is correctly set up to send all the data, including the rich text, to the database. Sometimes, it’s just a matter of tweaking the form settings or the data submission process.

Hope this helps!

3

Hey Sid, it’s not possible to debug this without being inside of your system both at the designer end and in your automation.

I’d start closest to the CMS update which mean, try pushing static text into the CMS from your automation. A simple <h1>test</h1>. Then work from there.

Webflow does not have a rich text input element so depending on what you’re using, you may need to sanitize the results for Webflow to accept it. Strip wrapping DIVs, sanitize unsupported elements, etc.

4

In case anyone is looking to enable this rich text form to CMS item automation, Supersparks can enable this in seconds nocode.

The rich text editor can also be custom-designed in the Webflow Designer :flexed_biceps: