I have a front-end form for registered users to submit entries, however I'd like to have a WYSIWYG editor like the dashboard. How would I get redactor working with this form?

My form:

<form method="post" action="j" accept-charset="UTF-8">
        <input type="hidden" name="action" value="entries/saveEntry">
        <input type="hidden" name="redirect" value="/">
        <input type="hidden" name="sectionId" value="3">
        <input type="hidden" name="enabled" value="1">

        <label for="title">Title</label>
        <input id="title" type="text" name="title">

         {% set jobTypeDropdown = craft.fields.getFieldbyHandle('jobType') %}
        <label for="fields[jobType]">Job Type</label>
        <select name="fields[jobType]">
            {% for option in jobTypeDropdown.settings.options %}
                <option value="{{ option.value }}">{{ option.label }}</option>
            {% endfor %}

        {% set jobCategoryDropdown = craft.fields.getFieldbyHandle('jobCategory') %}
        <label for="fields[jobCategory]">Job Category</label>
        <select name="fields[jobCategory]">
            {% for option in jobCategoryDropdown.settings.options %}
                <option value="{{ option.value }}">{{ option.label }}</option>
            {% endfor %}

        {% set jobStateDropdown = craft.fields.getFieldbyHandle('jobState') %}
        <label for="fields[jobState]">Job State</label>
        <select name="fields[jobState]">
            {% for option in jobStateDropdown.settings.options %}
                <option value="{{ option.value }}">{{ option.label }}</option>
            {% endfor %}

        <label for="field[jobCity]">Job City</label>
        <input type="text" name="fields[jobCity]">

        <label for="field[jobOverview]">Job Overview</label>
        <textarea id="jobOverview" name="fields[jobOverview]"></textarea>

        <label for="field[jobDescription]">Job Description</label>
        <textarea id="jobDescription" name="fields[jobDescription]"></textarea>

        <label for="field[howToApply]">How to Apply</label>
        <textarea id="howToApply" name="fields[howToApply]"></textarea>

         <button class="button login-btn" type="submit">Post Job</button>

3 Answers 3


It’s technically possible to include Craft’s copy of Redactor on the front end:

{% includeJsResource "lib/redactor/redactor.js" %}
{% includeCssResource "lib/redactor/redactor.css" %}

<textarea id="jobOverview" name="fields[jobOverview]"></textarea>
{% includeJs "$('#jobOverview').redactor();" %}

But it’s not recommended. Redactor’s API and config settings frequently change, and we generally try to keep it updated with each new Craft version. If you started including Craft’s version of Redactor, you’re going to have to start testing your website to make sure your front-end Redactor fields are still working properly each time you update Craft to a new version.

(I’m also not sure about the legal implications. Craft comes with a Developer license of Redactor which gives us unlimited use of it, but whether or not end users of Craft are allowed to use it is a gray area you should check with Imperavi on.)

You’ll be better off in the long run by grabbing your own copy of Redactor and installing it yourself for the front end site.


We checked with Imperavi and the Developer license we purchased for Craft is allowed to be used on the front and back-end of Craft, although we still don't recommend it for the reasons listed above.

  • 1
    Just curious if anyone is looking at this still... any reason we couldn't include our own front end copy of Redactor instead of using Craft's? That would seem cleaner.
    – Mike
    Commented Feb 8, 2017 at 13:52
  • @Mike No reason not to, and yes that would be smarter :) Commented Feb 27, 2017 at 20:04
  • Appreciate the follow up - thanks Brandon!
    – Mike
    Commented Feb 28, 2017 at 23:32
  • How can I do this in Craft 3? I saw the docs about Asset Bundles. Does one exist for Redactor, or would I have to create one? Should I create a new SE question for Craft 3? Thanks! Commented Jun 28, 2018 at 15:09

For Craft 3 you can use:

{%- do view.registerJsFile(view.getAssetManager().getPublishedUrl('@vendor/craftcms/redactor/lib/redactor/redactor.js')) -%}
{%- do view.registerCssFile(view.getAssetManager().getPublishedUrl('@vendor/craftcms/redactor/lib/redactor/redactor.css')) -%}

<textarea id="jobOverview" name="fields[jobOverview]"></textarea>
{% includeJs "$R('#jobOverview');" %}

Redactor has an Asset Bundle for those assets, so you can do:

{% do view.registerAssetBundle("craft\\redactor\\assets\\redactor\\RedactorAsset") %}

and this will add the script/link tags for the css/js on your document. Then just use the $R(...) js in your template to apply Redactor to your text fields.

  • I just upgraded a site from 3.4->3.7 and I needed to update my redactor include from above to this in order to work on a frontend form.
    – littlered
    Commented Mar 24, 2022 at 0:12

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.