Placeholder Forms

Hello :wave:

Thanks for this component :heart: It fits perfectly what I try to achieve now. Actually my first thought was it would be super cool if it can be combine with Reply Template component. But unfortunately it’s not possible as the posts above explained it. :confused:


I’ve found a workaround for this to use it as a template, it works with link to new topics and link to new personal messages.

Here is how made it:

1. Create a Placeholder form (to keep it simple I use the example in OP)

Your email: =NAME=-=COUNTRY=@example.com


2. Create a link to new topic:
I set up in the link:

  1. category
  2. title
  3. body

If you want to add empty lines, use \ so it won’t break the link or to make it invisible you can use   which will add a space in the new line. It will be a part of the template and makes empty line,

<a href="https://meta.discourse.org/new-topic?category==CATEGORY=&title=This is a topic created by =NAME=&body=Hello :wave:
&nbsp;
This is a test topic... Let's see the placeholder form.
\
Your email: =NAME=-=COUNTRY=@example.com
">Use template as new topic</a>

3. Create a topic preview

Selected category

=CATEGORY=

Topic title

This is a topic created by =NAME=

Topic body

Hello :wave:

This is a test topic… Let’s see the placeholder form.

Your email: =NAME=-=COUNTRY=@example.com


4. Create “Use template as new topic” button (in the example above this is a link you can make button from this)

Make a [wrap] element from this text. This makes it available to target it with CSS and style it. I add this to below.

<a href="https://meta.discourse.org/new-topic?category==CATEGORY=&title=This is a topic created by =NAME=&body=Hello :wave:
&nbsp;
This is a test topic... Let's see the placeholder form.
\
Your email: =NAME=-=COUNTRY=@example.com
">[wrap=template-button]Use template as new topic[/wrap]</a>

Styling [wrap=template-button]
something like :arrow_down_small:

Common / CSS

[data-wrap="template-button"] {
  background: var(--tertiary);
  color: var(--secondary);
  border-radius: var(--d-button-border-radius);
  padding: 0.5em 0.65em;
  transition: background 0.25s;
  &:focus,
  &:hover {
    background: var(--tertiary-hover);
    color: var(--secondary); 
  }
}

The template button will looks like this :arrow_down_small:

template-button


Demo

Use template as new topic


I hope this little tutorial will help someone who needs something similar :slightly_smiling_face:

Edit: I’ve seted up a category chooser which add the ability to create topic in different categories.


Check the raw version of this post…

7 Likes