Have users complete form when creating a topic?

Is it possible to have users complete a form when they create a topic? (ie, when you open the create topic window, have a form in the topic appear that they need to create)

Using the topic template when creating a category, I can put in some prompts for what users should enter. But this is different than a form. The prompts can be deleted (so unsophisticated users are not sure what to do with them), and the page starts getting crowded if there are several prompts on the same page.

A form would be a cleaner, simpler user experience in the case where I want users to fill in a few key pieces of information in their topic when they are creating a topic.

Is this possible? I found this theme component but, while I’m not yet sure what it does, I don’t think it accomplishes what I have in mind. I also see this request several years ago–looks like no action was taken.

Also, I know the Custom Wizard plugin allows you to create a form for users to complete, but in this case I need the form to be within a discourse topic (so that it then appears as a topic with all the accompanying functionality, such as tagging, replies, etc). And I need the user experience to stay clearly within the app (I believe the Wizard plugin takes them to a separate page with different menu, etc)

3 Likes

This stuff is certainly technically possible in a theme component.

3 Likes

A very related old topic for those who are interested:

1 Like

Thanks.

How do you think it could work?

Here are some ideas I have, though they still have some questions to answer:

Basics that are there now: Placeholders. But right now its "all or nothing"

The simplest structure I can think of to mimic form behavior would be where the “form” comes up in the editor (the “d-editor” that comes up when you hit create topic).

In that editor, you could provide different “sections”, like:

Name


Location


Issue


Each section title would be a placeholder, so when the user would click on it, the title (e.g., Name) would disappear.

So far, setting this up is possible with the placeholder text theme component.

But–that won’t quite get you there for form-like behavior, because the placeholders that are there now appear “all or nothing”, like I describe next.


Form-like behavior with placeholders. But how do you access divs in the editor?

To make this more like a form, each section has to behave independently.

Right now, with the placeholder text theme component, it’s all or nothing–if the user clicks on the editor, all of the placeholder titles disappear.

So, to have basic form behavior, instead of having all titles either appear or disappear, we’d need to have each placeholder title section behave independently. So when the user clicks on the placeholder “Name”, only that placeholder disappears, while the other placeholders (“Location” and “Issue”) stay.

That would be possible if each placeholder could be part of its own div with unique id within the text editor. Then, with jquery, you could show and hide the placeholder depending on if the user clicked in the area. That requires adding separate divs within what is now a textarea, which I am not sure how to do.

Question for this approach: How can you access divs within the editor’s textarea, so that you can take action when user clicks on them?


Alternative: using the existing template text option. But how to make the text not editable?

Probably an alternative would be that the section headers don’t “disappear” when the user clicks. So the section headers (example: Name, Location, and Issue) would be text that would stay on the page. To make it more form-like, compared to the current basic topic template default:

  1. The section header text could not be edited by the user (ie, contenteditable="false")
  2. The section break points could not be removed by the user
  3. There would be space below the section header where it’s clear the user can type. In the current default template, they’d have to go to where the text is, hit return, to create space to type.

Question for this approach: How can you enter template text, but (i) have that text be not editable by the user and (ii) have clear places for the user to enter information below each piece of text?


Maybe there is a better way to get at form-like behavior?

2 Likes

You’d presumably need to perform a pass on the template before rendering a more complex set of entry fields instead of a monolithic text area.

Then post process it to insert the text in the right spots.

You’d need some markup standard to identify the headings/text entry points …

That could be a more lightweight solution as everything would be kept in the front end world. (everything would still be stored as a single text post).

The major downside of that approach would be that it would be much more difficult to search and aggregate this way …

Sounds like a fun project :slight_smile:

I am looking for something that stays on front-end for now. Parsing and searching different parts of the form is not required at this point, and I assume in most use cases. This is about being sure users enter their responses in a consistent way.

I don’t understand what you mean by these:

I’m hoping to revisit this. I’m hoping there is a way on the front end to have users fill in what looks (to them) like a form. So, for example, when they go to create a topic, they would see something like:

“Name”


“Location”


“Issue”


This can all stay on the front end. I have no need (would be nice, but no need right now) to parse the different sections of what users submit–it can all be submitted like it is now. The goal is to ensure a more uniform submission from users, and give them a clean UI when there are different prompts.

The difference between this and what is available now by adding in a topic template:
  1. The user could not delete these prompts (ie, could not delete “Name”, “Location”, and “Issue”).

  2. Ideally, I could add some form like styling, to make it more obvious to the user where they are supposed to type. To enable a cleaner UI for a user creating a topic in the case there are several different prompts. With topic templates, the user has to create their own space to type in their responses for each prompt. Additionally, the create topic window starts looking pretty crowded when you have different prompts in the case of using the current topic templates.

@sam had previously replied:

It seems like indeed this should be possible. My biggest issue: How do I in a theme component (or plugin) change what appears within the create topic window? Right now, it seems like an iframe black box when I’ve tried to do it.

I know there my be some way to get in there, given that that is what topic templates do and what the placeholder plugin does. But I haven’t figured out how they do it.

Any tips on what I can do with code to change what’s in a topic create window?

1 Like

Have a look at Developer’s guide to Discourse Themes. That’s where to start.

If you mean the user name and location, they are in the user profile, so they might not be needed?

Thanks for your reply. I’m familiar with how to build themes and plug-ins. What I’m looking here for is guidance on the specific code for getting into the I-frame of the topic create form. I don’t need anyone to lay it all out, but any guidance would be appreciated. I’ve struggled before finding a way to make any changes to that form.

The example of name, location, etc. was just a hypothetical as a common form. In my particular case, there are different prompts I would need.

3 Likes