How to keep a field remain visible as a top bar

Hello, how can i do it so that the PRICE tab is always visible. So when someone scrolls down (where the top row is not visible anymore) the price tab would still be shown either on top or at the bottom?

Thanks

Hi Joris,

Thanks for reaching out to Jotform Support. If you mean you want the Price field to remain visible as a top bar, then you can easily do that by Injecting CSS Codes into your form. Let me walk you through it:

1. First, copy this code:

/*thread 30114463 - make price field remain visible as a top bar*/

/* Sticky full-width top bar */

#id_100 {

  position: fixed;

  top: 0;

  left: 0;

  width: 100%;

  z-index: 999999;

  background-color: #1a73e8; /* bar color */

  padding: 12px 20px;

  box-shadow: 0 2px 5px rgba(0,0,0,0.2);

  display: flex;

  align-items: center;

  justify-content: flex-start;

  margin: 0;

}



/* Label styling */

#id_100 label {

  color: #fff;

  font-weight: bold;

  margin-right: 15px;

}



/* Hide the input completely */

#id_100 input {

  display: none;

}



/* Show the value as uneditable text */

#id_100::after {

  content: attr(data-price); /* set the value via data-price attribute */

  color: #fff;

  font-size: 16px;

  font-weight: normal;

}



/*ends here*/

2. In Form Builder, click on the Paint Roller icon on the right side of the page to open Form Designer.

3. Now, in the Form Designer menu, click on the Styles tab, scroll down and paste the code into the Inject CSS Code box. That’s it. The code is automatically saved.

Check out the screencast below to see how it looks on a cloned form now:

Give it a try and let us know how it goes.

thank you. But how can i edit the button (make it look nice) and also, how can i edit this (and other stuff) seperately for desktop and phone displays?

best

Hi Joris,

You can customize the button color by changing the #1a73e8 value of the background-color code. You can use the hex code of your preferred color to make it work. Regarding with further customization, you can add more CSS and use Media Query.

We don't provide custom form creation or designing services, but you're welcome to work with a third party who may be able to help you. You can check out our Jotform Solutions Partner Directory for a list of consultants who've asked to be included. 

You can get in touch with the right Solutions Partner for you by sorting them by location, type of service, industry, language support, or partner tier. Just fill out the contact form for the Jotform partner you'd like to work with, so they can make the necessary preparations to help you.

Keep in mind, though, that these parties operate independently of Jotform, so we assume no responsibility or liability for their work or their actions. 

Let us know if you have any other questions.

Hi Joris,

Because your latest question was about a different feature, I've created a separate thread for it here. Our support member will attend to it shortly.

Let us know if you need any more help.

Hello, Raymae,

So the partners in the list you provided are hired to make the forms more visually pleasing? Or thay can do other stuff as well?

Hi Joris,

Jotform partners have their own expertise in different areas, and they’re not limited to making things more visually pleasing. They can build forms the way you want based on your agreement.

We can’t make the changes you’re asking for, but we can guide you on how to do them in Jotform. If you explain more about what else needs to be done, we can help by showing you how.

Reach out anytime if more questions come to mind.

thanks.

Hi Joris,

I’ve created a new thread for your other question to make things easier to follow, and someone from the Support Team will help you with it here.

Let us know if you have any other questions.