In this article, we are going to go over how you can create a custom rich text form input on your Webflow site, and then pass that information through in the form of a custom field in Memberstack which can be later edited by both the admin and the member.
The first thing you're going to need to do is create the rich text input by following the video below:
Once you've done that, you should have a working rich text form field. On the Webflow side, everything remains the same as it was in the pervious video, but to be left with something like what you see in the next video, the custom code (below) will change:
Add the following code to the page <head> where your rich text editor is:
<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">
And add the following code to the page </body> where your rich text editor is:
<script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
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: 'Type something here...',
theme: 'snow'
});
var notesField = document.querySelector('[data-ms-member="notes"]');
if (notesField) {
var html = notesField.value;
var quillDelta = quill.clipboard.convert(html);
quill.setContents(quillDelta);
quill.on('text-change', function(delta, oldDelta, source) {
notesField.value = quill.root.innerHTML;
});
}
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;
notesField.value = quill.root.innerHTML;
console.log("Submitted", $(form).serialize(), $(form).serializeArray());
// No back end to actually submit to!
return false;
};
});
</script>
Comments
1 comment
Thank you! However, I noticed that the functionality only applies to a single rich text field. Could you explain how to extend this to accommodate multiple rich text fields on the same page?
Please sign in to leave a comment.