Home
I.P. Leroy
WYSIWYG Editor Form

WYSIWYG Editor Form

Form with CKEditor

This tailwind example is contributed by I.P. Leroy, on 04-Mar-2023. Component is made with Tailwind CSS v3. It is responsive.

Form Widget

Author I.P. Leroy

14.7k

Fork Fullscreen

<div class="max-w-2xl mx-auto p-4">
    <form action="/submit-post" method="POST">
        <div class="mb-6">
            <label for="title" class="block text-lg font-medium text-gray-800 mb-1">Title</label>
            <input type="text" id="title" name="title" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:border-indigo-500" required>
        </div>

<div class="mb-6">
            <label for="content" class="block text-lg font-medium text-gray-800 mb-1">Content</label>
            <textarea id="content" name="content" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:border-indigo-500" rows="6" required></textarea>
        </div>

<div class="mb-6">
            <label for="image" class="block text-lg font-medium text-gray-800 mb-1">Image</label>
            <input type="file" id="image" name="image" accept="image/*" class="w-full">
        </div>

<div class="flex justify-end">
            <button type="submit" class="px-6 py-2 bg-indigo-500 text-white font-semibold rounded-md hover:bg-indigo-600 focus:outline-none">Submit</button>
        </div>
    </form>
</div>
<script src="https://cdn.ckeditor.com/ckeditor5/34.1.0/classic/ckeditor.js"></script>
<script>
    ClassicEditor
    .create(document.querySelector('#content'))
    .catch(error => {
      console.error(error);
    });
</script>

Related Examples

Music Player

Author:
Abhijit Sen

2 years ago

16.1k
Survey form
User survey form

Author:
JaxStone

2 years ago

15k
Book appointment form

Author:
Lukas Müller

2 years ago

24.8k
Feedback form
Collect opinions about your company's service

Author:
Arya

2 years ago

13.1k
Read more / Show more button with hide button
"hide" button that appears when the additional content is displayed:

Author:
Prajwal Hallale

2 years ago

21k
Appointment booking form

Author:
Leif99

2 years ago

16.4k
Responsive registration form
form with social login buttons

Author:
Sophia Baker

2 years ago

36.6k
Speedometer Example
Internet speed meter, gauge meter

Author:
Brandon D

2 years ago

13.4k
Form for editing items

Author:
Sophia Baker

2 years ago

15.9k
Number counter input

Author:
Prem..

2 years ago

15.1k
Working back to top button
The "Scroll to top" button becomes visible when the user starts to scroll the page Clicking on that button takes you back to the top of the page. This is a great feature to have on any website especially if your content is long.

Author:
Prashant

2 years ago

13.9k
Verify otp form

Author:
Jakub Novak

1 year ago

16.7k
Code Block with Copy Button
this example uses clipboard.js to copy the code

Author:
Alok

2 years ago

17.4k
Working reading progress bar
show how much of the page has been scrolled

Author:
Freja Jensen

2 years ago

12.1k

Explore components by Tags

Didn't find component you were looking for?

Search from 2100+ components