Placeholder Forms

Theme component
,
46

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