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).
1) 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).
- On the dashboard, click the Create a new scenario button in the top right corner of the page.
- Click the plus icon in the center of the page.
- Scroll down the list of options and select Webhooks (you can also use the search bar at the bottom of the screen).
- In the popup window, select Custom webhook.
- In the next window, click Add.
- Enter a Webhook name.
- Leave the IP restrictions field blank.
- Switch on the advanced settings toggle to expand the form.
With the form expanded:
- Change all three settings to Yes.
- Switch off the toggle to collapse the form.
- Click Save.
- Copy the Webhook URL.
2) Setup Webflow
With the Make.com scenario partially complete, the next step is to configure links in the Webflow template.
- Open a new browser tab and go to your Webflow site with the form template.
- Go to the dashboard, expand the Static pages folder, and locate the Job Post Submission Form.
- Go to the canvas and highlight the form.
Next, configure the Action field.
- Click the gear icon in the top right corner of the page.
- Expand the Form Block settings folder.
- Paste the Make.com Webhook URL into the Action field.
- Confirm that POST (and not GET) is selected.
Next, go back to the panel on the left side of the screen.
- Expand the CMS Collection pages folder.
- Click Job Posts Template link to display that page on the canvas.
- Click the Publish button in the top right corner of the page and then click the open page icon. The collection template page displays.
- Copy a portion of the collection template URL. Include the final backslash but exclude the last item.
Go back to the Webflow dashboard.
- Click the Job Post Submission Form link in the left-side panel.
- Select the form component on the canvas.
- Go to the panel on the right.
- Locate the Redirect URL field.
- Paste in the URL for the collection template.
- Go to the top of the page and click Publish.
- Go to the published site and fill in form fields. In this example, it is information for a job opening.
3) Setup Make
Next, go back to the Make.com scenario dashboard.
- Hover the Webhooks icon and click the plus (+) button to add a module.
- Click Add another module.
- Scroll through the list and select Webflow.
- Click Create an item.
Linking accounts
The next step links your Make.com account to your Webflow site.
- Click the Add button.
- Paste in the URL of your Webflow site and then click Save.
- In the popup window, select the site(s) and click Authorize app.
After the authorization window closes:
- Go to the Webflow popup window.
- Click the arrow and select the Site ID in the drop-down menu.
- 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.
- Open the browser page with the Webflow form.
- Fill in the fields (if not done already).
- Submit the form.
- 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
- Scroll down the form to the Name field. It is the only required field.
- Enter a name and then click OK.
- Click Save at the bottom of the page.
Mapping Form Fields
Next, map fields Webflow form fields with the collection template.
- Right click the Webhooks module icon.
- Select Run this module only.
- If a modal displays, select Use existing data.
- When the run completes, a bubble displays.
- Hover the bubble. It shows the number of records.
- Click the number to see record details.
- 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:
- Select a blank form field and then click the matching field name in red. The mapping name automatically copies over to the form.
- Repeat for all form fields.
- Leave the Slug field blank.
- Go to the Live heading and select the Yes option.
- Click OK.
- Click Save at the bottom of the page.
Mapping Webhooks
Next, map Webhook fields.
- Hover over the Webflow module and click the plus (+) button.
- Click Webhooks and then Webhook response in the next window.
In the next window:
- Change the status to 302.
- In the Body field type: { "slug" : "
- Click Slug in the mapping window.
- Close the string with: " }
- Switch on the advanced settings toggle and then click the Add item button to expand the form.
- In the Key field, enter Content-Type.
- In the Value field, enter application/json.
- Click OK to close the panel.
- 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.
- On the scenario page, click the Run once button. If a modal displays, click Wait for new data.
- Open the browser tab with the Webflow form.
- 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.
- Click Save.
- Go to the top of the page and click the arrow to exit editing mode.
- 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.
4) 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>
Comments
9 comments
This is great. I'm trying to achieve this same workflow using Zapier. Currently stuck at generating webhook response step.
Hey harrison maina 👋 After some research I've found that Zapier does not support webhook responses 😞
Can you update this you now need to have another step that pushes the cms item live... and I couldn't get the redirect to working
Strange 🤔 Are you on the latest version of the CMS app? I thought they had fixed the need for another step.
Hi!
I have used the above to input into a form however it's not showing on the punished website! I've literally copied and pasted the the above code and cloned the element in
Can you share a link to your site? I can help debug once I have a live link 🙏
I have this more or less working, but having an issue.
I'm using this to update rich text CMS items for online courses (so course creator can update the content while viewing the course).
When I submit the form, the CMS Rich text item updates perfect, and refreshing the page shows the updated information, BUT, the rich text input element does not populate the content when the page is refreshed like in the video....
What do I need to do to populate it? I can't find in the code or webflow element settings what actually achieves this?
Cheers
I just realised re: my above comment, that the input isn't populated in the video.
But still my question stands, how could I achieve this - I cannot use Dynamic CMS data on a rich-text itemData object?
(the reason is because I want the course creator to be able to have the existing CMS rich text populated in to the rich text input field so that they don't have to copy and paste it all in there first, and are not likely to accidentally hit submit with no content in there and lose it all!)
Hi Andrew 👋 We haven't revisited this tutorial in some time, so I've flagged it with the team. I'm not sure the best way to solve it at first glance, but I wonder if AI might be able to help 🤔
Can you share a link to a page on your site with the CMS rich text code on it?
Please sign in to leave a comment.