Skip Navigation

[Resolved] Formatting and updates on frontend form submission for adding new posts

This support ticket is created 3 years, 5 months ago. There's a good chance that you are reading advice that it now obsolete.

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

Sun Mon Tue Wed Thu Fri Sat
- 9:00 – 13:00 9:00 – 13:00 9:00 – 13:00 9:00 – 13:00 9:00 – 13:00 -
- 14:00 – 18:00 14:00 – 18:00 14:00 – 18:00 14:00 – 18:00 14:00 – 18:00 -

Supporter timezone: Asia/Hong_Kong (GMT+08:00)

This topic contains 7 replies, has 3 voices.

Last updated by CarlyB2958 3 years, 5 months ago.

Assisted by: Luo Yang.

Author
Posts
#1818255

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?

Regards
Carly

#1818641

Nigel
Supporter

Languages: English (English ) Spanish (Español )

Timezone: Europe/London (GMT+00:00)

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.

#1819573

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?

thanks again.

#1820369

Hello,

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.

#1820507

Nigel
Supporter

Languages: English (English ) Spanish (Español )

Timezone: Europe/London (GMT+00:00)

Screenshot 2020-10-22 at 10.08.28.png

It disappears when I open the browser console (display: none), but it looks like a ul with class wpt-suggest-taxonomy-term.

#1821575

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 🙂

#1821755

Is this problem resolved, please let me know if you need more assistance for it. thanks

#1821757

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.