https://webflow-submit-rich-text-in-form-cms.webflow.io/

1<!DOCTYPE html><!-- This site was created in Webflow. https://www.webflow.com --><!-- Last Published: Thu Apr 20 2023 19:03:52 GMT+0000 (Coordinated Universal Time) --><html data-wf-domain="webflow-submit-rich-text-in-form-cms.webflow.io" data-wf-page="63bc3043352d6517469be6c7" data-wf-site="63bc3042352d6586a79be6a3"><head><meta charset="utf-8"/><title>Rich Text Form To Webflow CMS</title><meta content="width=device-width, initial-scale=1" name="viewport"/><meta content="Webflow" name="generator"/><link href="https://assets.website-files.com/63bc3042352d6586a79be6a3/css/webflow-submit-rich-text-in-form-cms.webflow.1b7a27faa.css" rel="stylesheet" type="text/css"/><style>@media (max-width:767px) and (min-width:480px) {html.w-mod-js:not(.w-mod-ix) [data-w-id="24bb3559-bec0-2b64-dbaf-b37b9f78f88e"] {display:none;}}@media (max-width:479px) {html.w-mod-js:not(.w-mod-ix) [data-w-id="24bb3559-bec0-2b64-dbaf-b37b9f78f88e"] {display:none;}}</style><link href="https://fonts.googleapis.com" rel="preconnect"/><link href="https://fonts.gstatic.com" rel="preconnect" crossorigin="anonymous"/>

1<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js" type="text/javascript"></script>

1<script type="text/javascript">WebFont.load({  google: {    families: ["Outfit:regular,500,600,700"]  }});</script>

1<!--[if lt IE 9]>

1<script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js" type="text/javascript"></script>

1<![endif]-->

1<script type="text/javascript">!function(o,c){var n=c.documentElement,t=" w-mod-";n.className+=t+"js",("ontouchstart"in o||o.DocumentTouch&&c instanceof DocumentTouch)&&(n.className+=t+"touch")}(window,document);</script>

1<link href="https://assets.website-files.com/img/favicon.ico" rel="shortcut icon" type="image/x-icon"/><link href="https://assets.website-files.com/img/webclip.png" rel="apple-touch-icon"/><style>
2/*Prevents text area from resizing*/
3	textarea {
4	  resize: none;
5	}
6  .rte-wrap .ql-toolbar{
7  	width: 100%;
8  }
9  #editor{
10  	border-radius: 0px 0px 6px 6px;
11  }
12</style>
13
14<!-- Include stylesheet -->
15<link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
16

17<script>
18var Webflow = Webflow || [];
19Webflow.push(function() {
20
21	// display error message
22	function displayError(message) {
23		hideLoading();
24		failureMessage.innerText = message;
25		failureMessage.style.display = 'block';
26	}
27
28	// hiding the loading indicator
29	function hideLoading() {
30		showForm();
31		successMessage.style.display = 'none';
32	}
33
34	// hide the form
35	function hideForm() {
36		form.style.display = 'none';
37	}
38
39	// show the loading indicator
40	function showLoading() {
41		hideForm();
42		successMessage.style.display = 'block';
43	}
44
45	// show the form
46	function showForm() {
47		form.style.display = 'block';
48	}
49
50	// listen for xhr events
51	function addListeners(xhr) {
52		xhr.addEventListener('loadstart', showLoading);
53	}
54
55	// add xhr settings
56	function addSettings(xhr) {
57		xhr.timeout = requestTimeout;
58	}
59
60	// triggered form submit 
61	function triggerSubmit(event) {
62
63		// prevent default behavior form submit behavior
64		event.preventDefault();
65		
66		// setup + send xhr request
67		let formData = new FormData(event.target);
68		let xhr = new XMLHttpRequest();
69		xhr.open('POST', event.srcElement.action);
70		addListeners(xhr);
71		addSettings(xhr);
72		xhr.send(formData);
73
74		// capture xhr response
75		xhr.onload = function() {
76			if (xhr.status === 302) {
77				let data = JSON.parse(xhr.responseText);
78				window.location.assign(event.srcElement.dataset.redirect + data.slug);
79			} else {
80				displayError(errorMessage);
81			}
82		}
83
84		// capture xhr request timeout
85		xhr.ontimeout = function() {
86			displayError(errorMessageTimedOut);
87		}
88	}
89
90	// replace with your form ID
91	const form = document.getElementById('post-form');
92
93	// set the Webflow Error Message Div Block ID to 'error-message'
94	let failureMessage = document.getElementById('error-message');
95
96	// set the Webflow Success Message Div Block ID to 'success-message'
97	let successMessage = document.getElementById('success-message');
98
99	// set request timeout in milliseconds (1000ms = 1second)
100	let requestTimeout = 10000;
101
102	// error messages
103	let errorMessageTimedOut = 'Oops! Seems this timed out. Please try again.';
104	let errorMessage = 'Oops! Something went wrong. Please try again.';
105
106	// capture form submit
107	form.addEventListener('submit', triggerSubmit);
108
109});
110</script>

110</head><body><div class="top-cta wf-section"><div class="spacer-xxl"></div><div class="main-container"><div class="content-wrap-center"><div id="w-node-_24109680-7bf8-f089-8b7f-6fcc140f21e6-469be6c7" class="content-wrap-center max-width-800"><a href="#" class="ms-watermark w-inline-block"><img src="https://assets.website-files.com/63bc3042352d6586a79be6a3/63ee0a2c20b9c819bf17de74_MS%20Watermark.svg" loading="lazy" alt="" class="watermark-svg"/></a><div class="spacer-xs"></div><div class="spacer-xs"></div><h1 class="h1">Clone the full Webflow<br/><span>Job Board UI Kit</span> for free!</h1><div class="spacer-xs"></div><p class="paragraph">This resource is a part of the Job Board UI Kit by Memberstack. Click the button below to clone the full UI Kit, complete with sections, page templates, tutorials, automations, and more!</p><div class="spacer-l"></div><div><a data-w-id="24109680-7bf8-f089-8b7f-6fcc140f21f6" href="https://webflow.com/made-in-webflow/website/job-board-ui-kit-ms" target="_blank" class="button w-button">Clone now</a><div style="display:none" class="disclaimer-popup">Click “Open Live Site ↗ ” below and try again.</div></div></div></div></div><div class="spacer-xxl"></div></div><div class="divider-section wf-section"><div class="main-container"><div>Rich Text Form Submission -&gt; CMS</div></div></div><div class="section wf-section"><div class="container"><div id="w-node-eb2d8949-9ea6-be28-44ed-76e13b1a8204-469be6c7" class="form-border w-form"><form id="post-form" name="wf-form-Contact-Form" data-name="Contact Form" redirect="https://webflow-submit-rich-text-in-form-cms.webflow.io/posts/" data-redirect="https://webflow-submit-rich-text-in-form-cms.webflow.io/posts/" action="https://hook.eu1.make.com/tlo7lsf0ihm5kt1j9b8ir17e3ea1gs1m" method="post" class="form_100w"><div class="form-row"><div class="input-wrapper mr-15"><label for="Full-Name" class="input-label">Your Full Name</label><input type="text" class="input w-input" maxlength="256" name="Full-Name" data-name="Full Name" placeholder="John Doe" id="Full-Name"/></div><div class="input-wrapper"><label for="Email-5" class="input-label">Hiring Manager Email</label><input type="email" class="input w-input" maxlength="256" name="Email" data-name="Email" placeholder="[email protected]" id="Email-5"/></div></div><div class="form-separator"></div><div class="input-wrapper"><label for="Job-Title" class="input-label">Job Post Title <span class="text-red">*</span></label><input type="text" class="input w-input" maxlength="256" name="Job-Title" data-name="Job Title" placeholder="Enter your job title" id="Job-Title" required=""/></div><div class="form-row"><div class="input-wrapper mr-15"><label for="Job-Department" class="input-label">Job department <span class="text-red">*</span></label><input type="text" class="input w-input" maxlength="256" name="Job-Department" data-name="Job Department" placeholder="Development" id="Job-Department" required=""/></div><div class="input-wrapper"><label for="Job-type" class="input-label">Job Type <span class="text-red">*</span></label><input type="text" class="input w-input" maxlength="256" name="Job-type" data-name="Job type" placeholder="Remote" id="Job-type" required=""/></div></div><div class="form-row"><div class="input-wrapper mr-15"><label for="Job-location" class="input-label">Job Location <span class="text-red">*</span></label><input type="text" class="input w-input" maxlength="256" name="Job-location" data-name="Job location" placeholder="New York" id="Job-location" required=""/></div><div class="input-wrapper"><label for="Job-salary" class="input-label">Job Salary</label><input type="text" class="input w-input" maxlength="256" name="Job-salary" data-name="Job salary" placeholder="Salary" id="Job-salary"/></div></div><div><div class="rte-label">Job Description <span class="text-red">*</span></div><div class="rte-wrap"><div id="toolbar" class="toolbar"></div><div id="editor" class="rich_form-field_editor"></div><textarea id="Bodycopy" name="Description" maxlength="5000" data-name="Description" placeholder="Example Text" class="hide w-input"></textarea></div><div class="disclaimer">Please note the rich text editor is provided through Quill JS. If you&#x27;d like to edit it, please follow <a href="https://quilljs.com/" target="_blank">their documentation</a>!</div></div><div class="form-separator"></div><div class="form-row"><div class="input-wrapper mr-15"><label for="Company-name" class="input-label">Company Name<span class="text-red"> *</span></label><input type="text" class="input w-input" maxlength="256" name="Company-name" data-name="Company name" placeholder="Your company name" id="Company-name" required=""/></div></div><div class="form-separator"></div><div class="form-row"><div class="input-wrapper"><label for="Company-description" class="input-label">Short Job Description<span class="text-red">*</span></label><textarea id="Company-description" name="Company-description" maxlength="5000" data-name="Company description" placeholder="Explain the job you&#x27;re hiring for in just a few sentences." required="" class="input mh-70 w-input"></textarea></div></div><div class="spacer-10"></div><input type="submit" value="Post Job" data-wait="Please wait..." class="button in-form w-button"/></form><div class="message_success w-form-done"><div class="paragraph">Your post is successfully submited !</div></div><div class="message-error w-form-fail"><div class="paragraph">Oops! Something went wrong while submitting the form.</div></div></div></div></div><div><div data-w-id="24bb3559-bec0-2b64-dbaf-b37b9f78f88e" class="widget-wrapper"><div class="widget-container"><div class="widget-embed w-embed w-iframe"><div style="position: relative; padding-bottom: 62.5%; height: 0;"><iframe src="https://www.loom.com/embed/d31eb9e03825421d8621e5d396afa78e" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"></iframe></div>
111
112<style>
113.widget-wrapper:hover .widget-move {
114	opacity: .50;
115}
116.widget-move:hover {
117	opacity: 1 !important;
118}
119.widget-wrapper:hover .double-click {
120	opacity: 1 !important;
121}
122</style></div></div><a data-w-id="24bb3559-bec0-2b64-dbaf-b37b9f78f891" href="#" class="widget-move left w-inline-block"><div class="widget-svg-small w-embed">

122<svg xmlns="http://www.w3.org/2000/svg" height="auto" viewBox="0 0 24 24" width="1000px" fill="currentColor">
123<g><rect fill="none" height="24" width="24"/></g><g><g><polygon points="6,17.59 7.41,19 12,14.42 16.59,19 18,17.59 12,11.59"/><polygon points="6,11 7.41,12.41 12,7.83 16.59,12.41 18,11 12,5"/></g></g></svg></div></a><a data-w-id="24bb3559-bec0-2b64-dbaf-b37b9f78f893" href="#" class="widget-move down w-inline-block"><div class="widget-svg-small w-embed"><svg xmlns="http://www.w3.org/2000/svg" height="auto" viewBox="0 0 24 24" width="1000px" fill="currentColor">
124<g><rect fill="none" height="24" width="24"/></g><g><g><polygon points="6,17.59 7.41,19 12,14.42 16.59,19 18,17.59 12,11.59"/><polygon points="6,11 7.41,12.41 12,7.83 16.59,12.41 18,11 12,5"/></g></g></svg></div></a><a data-w-id="24bb3559-bec0-2b64-dbaf-b37b9f78f895" href="#" class="widget-move w-inline-block"><div class="widget-svg-small w-embed"><svg xmlns="http://www.w3.org/2000/svg" height="auto" viewBox="0 0 24 24" width="1000px" fill="currentColor">
125<g><rect fill="none" height="24" width="24"/></g><g><g><polygon points="6,17.59 7.41,19 12,14.42 16.59,19 18,17.59 12,11.59"/><polygon points="6,11 7.41,12.41 12,7.83 16.59,12.41 18,11 12,5"/></g></g></svg></div></a><a data-w-id="24bb3559-bec0-2b64-dbaf-b37b9f78f897" href="#" class="widget-close w-inline-block"><div class="widget-svg-small w-embed"><svg xmlns="http://www.w3.org/2000/svg" height="auto" viewBox="0 0 24 24" width="1000px" fill="currentColor">
126<path d="M0 0h24v24H0V0z" fill="none"/><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z"/></svg></div></a><div class="double-click">Double Click <br/>to expand</div></div><div data-w-id="24bb3559-bec0-2b64-dbaf-b37b9f78f89d" class="widget-mobile"><div class="widget-svg play w-embed"><svg xmlns="http://www.w3.org/2000/svg" height="auto" viewBox="0 0 24 24" width="100px" fill="currentColor">
127<path d="M8 6.82v10.36c0 .79.87 1.27 1.54.84l8.14-5.18c.62-.39.62-1.29 0-1.69L9.54 5.98C8.87 5.55 8 6.03 8 6.82z"/></svg></div><div class="widget-svg close w-embed"><svg xmlns="http://www.w3.org/2000/svg" height="auto" viewBox="0 0 24 24" width="1000px" fill="currentColor">
128<path d="M0 0h24v24H0V0z" fill="none"/><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z"/></svg></div></div></div><div class="delete-me"><div><div class="ms-iframe"><div class="ms-iframe-embed w-embed w-iframe"><iframe id="memberstack-iframe" src="https://memberstack-embeds.webflow.io/branding?ref=blank" sandbox="allow-same-origin allow-scripts allow-forms allow-top-navigation allow-popups"></iframe>
129
130
131<style>
132iframe {
133		height: 100%;
134    width: 100%;
135    border-width: 0px;
136    border-style: inset;
137    border-color: initial;
138    border-image: initial;
139    border: 0;
140    border: none;
141    min-height: 0px;
142    min-width: 0px;
143    background: transparent;
144}
145
146* {
147    box-sizing: border-box;
148}
149
150/* width */
151::-webkit-scrollbar {

152    height: 0px;
153    width: 0px;
154    background-color:;
155}
156
157/* Track */
158::-webkit-scrollbar-track {
159    background: transparent; 
160}
161
162/* Handle */
163::-webkit-scrollbar-thumb {
164    background: transparent; 
165}
166
167/* Handle on hover */
168::-webkit-scrollbar-thumb:hover {
169    background: transparent; 
170}
171   
172</style></div><div class="hidden-embed w-embed w-script">

172<script>
173  // get the domain name of the page where the iframe is embedded
174  var domain = window.location.hostname;
175
176  // get the iframe element
177  var iframe = document.getElementById('memberstack-iframe');
178
179  // get the src attribute value of the iframe
180  var src = iframe.getAttribute('src');
181
182  // replace the ref value in the src with the domain name
183  src = src.replace('ref=blank', 'ref=' + domain);
184
185  // set the new src value to the iframe
186  iframe.setAttribute('src', src);
187</script>

187</div></div><div class="ms-iframe-footer-embed w-embed w-iframe"><iframe src="https://memberstack-embeds.webflow.io/footer" sandbox="allow-same-origin allow-scripts allow-forms allow-top-navigation allow-popups"></iframe>
188
189
190<style>
191iframe {
192		height: 100%;
193    width: 100%;
194    border-width: 0px;
195    border-style: inset;
196    border-color: initial;
197    border-image: initial;
198    border: 0;
199    border: none;
200    min-height: 0px;
201    min-width: 0px;
202    background: transparent;
203}
204
205* {
206    box-sizing: border-box;
207}
208
209/* width */
210::-webkit-scrollbar {
211    height: 0px;
212    width: 0px;
213    background-color:;
214}
215
216/* Track */
217::-webkit-scrollbar-track {
218    background: transparent; 
219}
220
221/* Handle */
222::-webkit-scrollbar-thumb {
223    background: transparent; 
224}
225
226/* Handle on hover */
227::-webkit-scrollbar-thumb:hover {
228    background: transparent; 
229}
230   
231</style></div></div></div>

231<script src="https://d3e54v103j8qbb.cloudfront.net/js/jquery-3.5.1.min.dc5e7f18c8.js?site=63bc3042352d6586a79be6a3" type="text/javascript" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>

231<script src="https://assets.website-files.com/63bc3042352d6586a79be6a3/js/webflow.978e8c428.js" type="text/javascript"></script>

231<!--[if lte IE 9]>

231<script src="//cdnjs.cloudflare.com/ajax/libs/placeholders/3.0.2/placeholders.min.js"></script>

231<![endif]--><!-- Include the Quill library -->

232<script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>

232
233
234<!-- Initialize Quill editor -->

235<script>
236var quill = new Quill('#editor', {
237    modules: {
238        toolbar: [
239        	 [{ 'header': [2, 3, 4, 5, 6, false] }],
240        
241           ['bold', 'italic', 'underline', 'strike'],
242           ['blockquote', 'code-block', 'link'],
243
244           
245           [{ 'list': 'ordered'}, { 'list': 'bullet' }],
246
247           ['clean']
248       ]
249    },
250  placeholder: 'You can start typing here...',
251  theme: 'snow'
252});
253
254var form = document.querySelector('#post-form');
255form.onsubmit = function() {
256  // Populate hidden form on submit
257  var about = document.querySelector('textarea[name=Description]');
258  about.value = quill.root.innerHTML;
259 
260  
261  console.log("Submitted", $(form).serialize(), $(form).serializeArray());
262  
263  // No back end to actually submit to!
264
265  return false;
266};
267
268</script>

268</body></html>