<img height="1" width="1" alt="" style="display:none" src="https://www.facebook.com/tr?id=1457322577899094&amp;ev=PixelInitialized">
3 min read

Markdown and HTML: Tips to Leverage the Power of Custom Forms

Feb 20, 2020 1:24:41 PM

DD Forms and Markdown

what is markdown

Markdown is a text-to-HTML conversion tool, free and open-source, designed to be lightweight and intuitive. It helps users to edit text in an easy and clean way - which is why we've decided it was the right tool for our DD Portal.

We highly recommend you save this Markdown Guide page and have it handy whenever you want to edit your Forms so they can be extra beautiful on top of being super smart.

when to use markdown

You know that DD Custom Forms already come with some integrated formatting on things such as the ticket title, the questions, the boxed statement question type, and other small things here and there.

markdownblog001

If, however, you want to increase readability and potentially add bits in bolditalic, strikethrough, ordered and unordered lists, tables (!), links, images, linked images, and embed videos...

... well, you can!

PLEASE NOTE: you can use HTML and Markdown inside your question subtitles, but it won't work for question titles. We decided it was much tidier and resulted in better consistency if we kept the questions themselves with the same style.

As a general rule, use Markdown and HTML sparingly to avoid making your forms too busy to be used successfully.

 

check out some examples

Here's a couple of examples of things you can quickly achieve with just a few lines of Markdown:

markdownblog002

markdownblog003

Markdown can be really helpful in case you need to add a few lines of explanation in the Question Subtitle.

PLEASE NOTE: the example below shows the use of H2 and H3. While it's there to show what can be achieved, you shouldn't overuse heading styles when adding content in your question subtitles. And definitely do not use H1, ever. That's just really bad UX practice - trust us!

 

This is what you type when creating a Form in your Admin Console:

markdownblog004

And this is what is rendered in the Client Portal:

markdownblog005

Neat, huh?

DD Forms and HTML

If you happen to come across snippets of HTML code and don't want to spend time converting it to Markdown, feel free to just go with the HTML code. Don't cheat though, no scripts, no sneaky css. Just simple and clean HTML.

Embedding Videos

The most common example is a video embed, as the hosting space (YouTube, Wistia, Vimeo, etc) will typically give you a snippet ready to grab and use.

Pasting the embed code will make the video playable within the form, without getting redirected to a new page!

What you type in the Admin Console

markdownblog006

What shows in the Client Portal:

markdownblog007

Displaying Tables

Tables, the joy and bane of web development. You shouldn't use them, but they're oh so convenient and you can't really do without them. So, if you must, feel free to add HTML tables to your forms. They will render.

It's a bit of work, but if you can it pays off to transfer your precious table content inside Markdown syntax.

PLEASE NOTE: there's a 1k characters limit to the question subtitles so if you have a hefty amount of either HTML or Markdown, it might pay off to distribute it to multiple statement type questions.

 

 

That's it for now folks! Until next time.

Serena Cappellini

Written by Serena Cappellini

Featured