Rich Text Form to Webflow CMS

This article shows you how to submit a Webflow form with rich text content and then post the information to a CMS. To run this demo, I'll use the following assets:

• An account on Make.com (use the free trial).
• The Webflow Rich Text Form Template cloned onto a Webflow workspace.
• Two template pages: the form page (Job Post Submission Form | Preview) and the collection template (Job Posts Template | Preview).

Getting Started

The first step is to open your Make.com dashboard and create a scenario (a bundle of modules that transfer data from one app to another).

1. On the dashboard, click the Create a new scenario button in the top right corner of the page.
2. Click the plus icon in the center of the page.
3. Scroll down the list of options and select Webhooks (you can also use the search bar at the bottom of the screen).

4. In the popup window, select Custom webhook.

5. In the next window, click Add.

6. Enter a Webhook name.
7. Leave the IP restrictions field blank.
8. Switch on the advanced settings toggle to expand the form.

With the form expanded:

1. Change all three settings to Yes.
2. Switch off the toggle to collapse the form.
3. Click Save.

4. Copy the Webhook URL.

Setup Webflow

With the Make.com scenario partially complete, the next step is to configure links in the Webflow template.

1. Open a new browser tab and go to your Webflow site with the form template.
2. Go to the dashboard, expand the Static pages folder, and locate the Job Post Submission Form.

3. Go to the canvas and highlight the form.

Next, configure the Action field.

1. Click the gear icon in the top right corner of the page.
2. Expand the Form Block settings folder.
3. Paste the Make.com Webhook URL into the Action field.
4. Confirm that POST (and not GET) is selected.

Next, go back to the panel on the left side of the screen.

1. Expand the CMS Collection pages folder.
2. Click Job Posts Template link to display that page on the canvas.

3. Click the Publish button in the top right corner of the page and then click the open page icon. The collection template page displays.

4. Copy a portion of the collection template URL. Include the final backslash but exclude the last item.

Go back to the Webflow dashboard.

1. Click the Job Post Submission Form link in the left-side panel.
2. Select the form component on the canvas.
3. Go to the panel on the right.
4. Locate the Redirect URL field.
5. Paste in the URL for the collection template.
6. Go to the top of the page and click Publish.

7. Go to the published site and fill in form fields. In this example, it is information for a job opening.

Setup Make

Next, go back to the Make.com scenario dashboard.

1. Hover the Webhooks icon and click the plus (+) button to add a module.

2. Click Add another module.

3. Scroll through the list and select Webflow.
4. Click Create an item.

Linking accounts

The next step links your Make.com account to your Webflow site.

1. Click the Add button.

2. Paste in the URL of your Webflow site and then click Save.

3. In the popup window, select the site(s) and click Authorize app.

After the authorization window closes:

1. Go to the Webflow popup window.
2. Click the arrow and select the Site ID in the drop-down menu.

3. Click the arrow and select the Collection ID in the drop-down menu.

Adding data

Before you can map fields, you need to create a record so that the webhook has some data to work with.

1. Open the browser page with the Webflow form.
2. Fill in the fields (if not done already).
3. Submit the form.
4. Come back to the Make.com scenario dashboard and click the Webflow module icon. Notice the form fields are blank and the modal does not display the proper mapping fields

5. Scroll down the form to the Name field. It is the only required field.
6. Enter a name and then click OK.
7. Click Save at the bottom of the page.

Mapping Form Fields

Next, map fields Webflow form fields with the collection template.

1. Right click the Webhooks module icon.
2. Select Run this module only.

3. If a modal displays, select Use existing data.

• When the run completes, a bubble displays.

4. Hover the bubble. It shows the number of records.
5. Click the number to see record details.

6. Click the Webflow module and select a form field. The modal displays the mapping options.

• Note  If the window does not display the mapping options, refresh the page.

To map fields:

1. Select a blank form field and then click the matching field name in red. The mapping name automatically copies over to the form.
2. Repeat for all form fields.
3. Leave the Slug field blank.
4. Go to the Live heading and select the Yes option.
5. Click OK.
6. Click Save at the bottom of the page.

Mapping Webhooks

Next, map Webhook fields.

1. Hover over the Webflow module and click the plus (+) button.

2. Click Webhooks and then Webhook response in the next window.

In the next window:

1. Change the status to 302.
2. In the Body field type:  { "slug" : "
   
3. Click Slug in the mapping window.
4. Close the string with:   " } 

5. Switch on the advanced settings toggle and then click the Add item button to expand the form.

6. In the Key field, enter Content-Type.
7. In the Value field, enter application/json.
8. Click OK to close the panel.
9. Go to the bottom of the page and click Save.

Loading Data

The scenario is now complete. The next step is to load data and test the link.

1. On the scenario page, click the Run once button. If a modal displays, click Wait for new data.

2. Open the browser tab with the Webflow form.
3. Make sure the fields are filled in and then submit the form. In the example below, I click Post Job.

• The Webflow page automatically redirects to the collection template. In this example, the job board displays all fields including the content in the rich text field (Job Description).

Go back to the Make.com scenario.

1. Click Save.
2. Go to the top of the page and click the arrow to exit editing mode.

3. Go to the top right corner of the page and switch the toggle to the On position.

That's it.

The integration is complete. Now you are ready to submit a Webflow form with rich text content and post the information to a CMS.

Custom Code

Place the following code into the header and footer code of any page with a Rich Text form. You can also get the code directly from the cloneable project at the top of this article. 

Place Inside </head> tag

<script>
<style>
/*Prevents text area from resizing*/
	textarea {
	  resize: none;
	}
  .rte-wrap .ql-toolbar{
  	width: 100%;
  }
  #editor{
  	border-radius: 0px 0px 6px 6px;
  }
</style>

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

Place Before </body> tag

<script> src="https://cdn.quilljs.com/1.3.6/quill.js"></script>
<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=Description]');
  about.value = quill.root.innerHTML;
  
  console.log("Submitted", $(form).serialize(), $(form).serializeArray());
  // No back end to actually submit to!
  return false;
};
</script>