I'd like to use an editor more like gutenberg or medium-style on the front end to submit articles
I haven't been able to find any documentation relating to toolset
hidden link
I've created a frontend form that I'm trying to style and make simple and minimalistic but it's a bit hard with the old clunky style wysiwyg editor. I tried using a text area instead but then I can't add any media or style the text. I'd like to use a medium style editor to achieve this but can't find any documentation to make it work.
In the area for adding new tools, with the autocomplete for adding the tags how can I change the style of the dropdown, the text is way too small. And then can I add these tags buy using a comma or pressing enter? at the moment I have to click the tag then click 'add'
Can I change the 'add' text on the button or add a symbol to the button?
thanks, you may need credentials to login and see the page, how do I securely send them to you?
I'm afraid there aren't many options for customising or styling the forms in the way you describe, if you want to implement such changes it's essentially a custom project that you'll need to develop yourself (or recruit someone to develop it for you).
To answer the simplest part first, you can change the text of the button to add tags in the form settings in the messages section. If you wanted to add an icon, try adding a category-like taxonomy to your form to see how that works: the + icon is added via CSS, which is what you would need to replicate, as the message texts are text only, not HTML. Modifying the auto-suggest recommendation could also be modified using CSS, there are no settings for it.
The main topic is rather more complex, with WYSIWYG editors the only option for rich text editing. I had a quick look at other form plugins (Toolset is a big suite and I wouldn't hesitate to suggest another plugin specifically for your forms if there were a suitable alternative) but I couldn't find any that offer something other than textareas or traditional WYSIWYG editors for rich text input.
There is a project called Frontenberg (hidden link) that demonstrates using the Gutenberg editor on the front-end, as explained here: hidden link
That may be overkill for your needs, and I'm not sure a non-WordPress audience would grok the Gutenberg editor anyway.
Perhaps a better alternative would be to use this JavaScript library to add a Medium-like editor that you can apply to a textarea: hidden link
You can see a demo here: hidden link
I think it should be do-able, to include a textarea field in your form and apply this library to it, but it's outside the scope of support to implement it.
Hi Nigel, thank you so much for your recommendations. I'll have a look into all of these and especially adding the medium style editor you've recommended.
one quick question, I've been trying to find where to change the auto complete suggestions in the dropdown area but in the inspector view of chrome I can't find the selector that's driving it. I tried looking for it yesterday but I don't know where it's hiding, I could be blind! do you know what the selector is for it so I can style it?
I have checked the URL you mentioned above: hidden link
The content area is blank, I don't see any frontend form.
For the autocomplete style, I suggest you setup the CSS codes manually, for example: hidden link
And I have enabled private message box, in case you need more assistance for it, please also point out the autocomplete field you want to style, take a screenshot for it.
Oh AMAZING! that was the selector I was looking for Nigel, thanks so much. I didn't scroll far enough down the source code to find it by the look of it. thanks so much for the tip 🙂
Thanks, it helped resolve the display of the auto-complete, but the medium style editor is still a work in progress, but thanks for pointing me in a couple of directions.
This ticket is now closed. If you're a WPML client and need related help, please open a new support ticket.