How do I segment the different areas of our form so it's easier for the entry person?

  • 0
  • 1
  • Question
  • Updated 3 years ago
  • Answered
See attached - this is what I might want to do...


Photo of Michelle

Michelle

  • 0 Points

Posted 3 years ago

  • 0
  • 1
I'm not sure what your question is. Are you asking how to create Sections on the form?
Photo of Michelle

Michelle

  • 0 Points
Yes I would like to create sections in the form so it's easier to complete.
There is a form element called Section. Just customize your form and insert a Section Heading, and optionally give the section a name.
Photo of Owen

Owen

  • 0 Points
Mark, I am looking to add some style, in a similar fashion that Michelle is trying to do above but I do not want to use a form section. I would like to insert a text field with html enabled and point to the unexpanded divider image, so the separator image style remains the same but I am not introducing the full section element. I have spent some time looking at styles and source but my skills are not strong enough to identify the actual path where I can access the divider images, if that is at all possible. I have used the icon library to add icons to some of my reports and forms so I can figure the syntax out. Can you point me towards these standard form images?
I'm sorry but I am not understanding what you man by these "standard form images".  Can you edit your question and post a screen shot (comments here do not allow attachments).  Then add a comment that you have posted a screen shot.
Photo of Owen

Owen

  • 0 Points
Sorry Mark, it is not my original question, just jumping in on Michelle's question because it is similar *I think*, so unless I am missing something I will not be able to insert/attach a screenshot. I guess my confusion is when you add a new section a divider appears below the section title depending on the form properties. My initial assumption was the divider was an image but now I am thinking it is a horizontal rule <hr>. What I am trying to do is add a <hr> just like the collapsed section <hr> but without all of the rest of that <div>'s overhead/instructions.

The cheat that popped into my mind was take a screenshot of the <hr>, save it as an image, then crop it and upload it to my App, I have a table for custom images, and access it that way. Unless you recommend against this approach I think that is what I will do.
OK, just in case this is a helpful tip, if you have a section break but do not name the section, then it will be a non collapsable horizontal line, natively.  Is that what you are truing to make?  Somewhere in my notes I probably have a record of the font name which is used natively for the section headers is you are trying to match to them.
Photo of Owen

Owen

  • 0 Points
Thanks for that last tip but if I am trying to pull in the collapsed style and I think the unnamed section uses the expanded <div> style. The font name might be useful if it is not too difficult to find.
Courtesy of Laura Hiliier another QuickBase Solution provider,

Form section colors

Here's what I use to replicate "section headers" using a Form Text Element:

<p style="color:#427CD8; font-weight:lighter; font-size:12px;font-family:HelveticaNeue-Roman, HelveticaNeue, Helvetics Neue, Helvetica, Arial, sans-serif;letter-spacing:0.025em;margin-top: 0px; margin-bottom: -10px">Custom Section Heading Text</p>

You can play around with the font-size (px) and remove the margin-top and margin-bottom which removes forced spacing above/below the text.  You can also make the letter-spacing 0.015em if you want to.
Photo of Owen

Owen

  • 0 Points
AWESOME! (delivered like Spicoli from fast Times) Thanks Mark and Laura!!
Photo of QuickBasePros_IDS

QuickBasePros_IDS, Champion

  • 5,030 Points 5k badge 2x thumb
Thanks Mark for sharing.  Glad it helps you Owen.