WYSIWYG Editor Form

Form with CKEditor

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

Form Widget

Author I.P. Leroy

Tailwind v3.4 16.3k 22

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

Abhijit Sen

3 years ago

18.4k
Survey form
User survey form

JaxStone

3 years ago

17.6k
Book appointment form

Lukas Müller

3 years ago

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

Arya

4 years ago

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

Prajwal Hallale

3 years ago

22.2k
Responsive registration form
form with social login buttons

Sophia Baker

3 years ago

46.7k
Appointment booking form

Leif99

3 years ago

18.5k
Form for editing items

Sophia Baker

3 years ago

18.8k
Speedometer Example
Internet speed meter, gauge meter

Brandon D

4 years ago

15.2k
Number counter input

Prem..

3 years ago

16.7k
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.

Prashant

4 years ago

15.6k
Verify otp form

Jakub Novak

3 years ago

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

Alok

3 years ago

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

Freja Jensen

3 years ago

13.4k