Formatting "Description shown to end users

Have you tried adding a break tag
where you want the breaks?
Also, you show one below the box, and one in the box, is that something you are trying to achieve?

I want this format on my first screen : 

Explanation for approvers (* mandatory if purchase for Project or special request):

Purpose of resource usage :

Expected result of resource usage :

Details on resource usage :

Reason of resource usage :

Estimated duration of use:

But I have this one (without breaks between each part): 

Explanation for approvers (* mandatory if purchase for Project or special request): Purpose of resource usage : Expected result of resource usage : Details on resource usage : Reason of resource usage : Estimated duration of use:

I tried to add <br> on the ticket fields but doesn't work : 

This is what you mean ? 

Do you have any idea ? 

Hello,

I worked with a developer, 

I changed the CSS : 

#request_custom_fields_360014941759_hint{     white-space: pre !important; }

And that's OK

You can close the ticket

Hi Ioic,

Thanks for the update! I was going to also propose that you make each of those lines into its own custom fields so you can capture the customer's response to each individually but it sounds like you've got it all figured out :)

Have a great day!

Can someone explain where to go to update the CSS so that it adds carriage returns? I want to add carriage returns in for the "Type" field, in the Description to show to end users on the submission page:

i.e. I want the Description to show to end users to show:

Question: e.g. “How do I change my default homepage?”.

Incident: e.g. “I can’t access X”.

Problem: e.g. “Nobody in my office can access the system”.

Task: an action that needs to be carried out by an agent, to resolve the ticket.

instead of:

Question: e.g. “How do I change my default homepage?”. Incident: e.g. “I can’t access X”. Problem: e.g. “Nobody in my office can access the system”. Task: an action that needs to be carried out by an agent, to resolve the ticket.

Hi @Ioic, I now have encountered the same issue/question, how do I set a line breaker between sentences in the "Description shown to end users". 

I don't understand your comments above - can you please explain or show me how to set the line breaker?  thanks so much

"...I worked with a developer, 

I changed the CSS : 

#request_custom_fields_360014941759_hint{     white-space: pre !important; }

Hi. I wanted a global solution to this problem, rather than a field specific one.

I've modified the CSS to apply the same white-space hint to all paragraphs (<p>) inside to request-forms. Someone may know some good reason why this is a bad idea. Please tell me if you do!

I did the following:

• Navigate into Guide Admin
• Select Customize Theme from sidebar
• Choose 'Customize' on the theme you wish to modify (Ours is based on Copenhagen, your situation may be different. Stop here if anything fails from here onward)
• Select 'Edit Code' (bottom right)
• Scroll down and select 'style.css' from the sidebar
• use the Find feature to search for the string '.request-form textarea'
• Underneath that clause add:

• /***** My Request Form Customization *****/
  .request-form p {
    white-space: pre !important;
  }

• Hit 'Publish'

It will apply this change to every form field description, which was what I wanted.

So far it seems to be working as intended.

Edit: If anyone's wondering how to configure this per field when using the Selway template (as @terry24's great steps only work for Copenhagen), see below.

I'd recommend making a copy of the current Theme and Previewing the changes before applying to your Production theme.

• Navigate into Guide Admin
• Select Customize Theme from sidebar
• Choose 'Customize' on the theme you wish to modify.
• Select 'Edit Code' (bottom right)
• Scroll down and select 'style.css' from the sidebar
• Add the following, with the highlighted the Field ID: 

#request_custom_fields_5384261552785_hint {
  white-space: pre !important;
}

• Hit Save and Preview
• Once satisfied with the changes, apply them your Production Theme and Publish

Result:

Sarosh Dholoo, you said this works for Copenhagen, is there a version for the US on this? I’m having the same issue and couldn't figure it out. I just want this on a specific field we have. Thanks!

@eddy15 Copenhagen is just the name of the theme, it's not based on your geolocation.

My steps are per field specifically for the Selway theme as that's what we use, whereas Terry's were for the Copenhagen theme for all fields. Each template will have its own settings and yours may have the sections outlined in Terry's steps or it may not. Selway did not so we're doing it per field. Example:

Thank you so much, Sarosh! This is working for me now! 

@sarosh  I tried to implement what you stated but it's not working. In the Description hint field I tried breaking the line and also adding the break tag but my description hint is still not reflecting the line breaks.

Seeing as this is still relatively recent in terms of interest, I thought Id share my experience of this.

I tried the above methods and ended up implementing something that offers the best of both worlds.

The first method (individual custom field application) works great. but I had concerns around the required extra vigilance in administration and tracking of which fields have this applied (already several hundred fields in operation). 

Also required an update in behaviour that ensured more vigilant confirmation testing of every field's presentation moving forward.

The second method (global application) by Terry works great for all fields by targeting the <p> elements, but my experience was that text would spill outside of the request form div container. Unless I added manual line breaks to handle the word wrap.
This quickly made my older fields look chaotic and messy.

So if anyone wants to mix these two great ideas, the following is something I have applied at a global level in the style.css:
 

/***** Global Request Form Customization *****/
.request-form p,
.request-form .hint {
 white-space: pre-wrap !important;
 word-wrap: break-word !important;
}

I placed the code in the same region as all of the "My Activities and New Request"" style handlers.
(greyed code for orientation purposes only)

Example is in a query initiated workflow I am implementing for our HR department as they transition from shared mailbox task culture to Zendesk.
As you can see, this means I can add no-code line breaks in field descriptions whilst conveniently handling any text wrap spill.
Ill provide further feedback if this bites me, but “so-far so-good”.

The field set-up:
 

The finished product:
 

Hope this helps someone some day.

Is there a way to do this only on a specific form?

hello @ifra 

it seems that this code doesn't work anymore with new version of Copenhagen, any solution on your side ? :)

Hi Max,

I'll get back to you soon :)

Thank You

Ifra

Hi @ifra  just wanted to see if you had a solution for this. You have been so helpful in the Zendesk community!

@mark20 i tried your suggestion but it is not working. Confirming you add that to CSS? Thanks!