Multiple Page: Keep a field visible

Also, I have a text box at the top...

I'd like for...

1. this to always be visible
2. how can I style this so that the question above the text box is central (how do I also style the text)
3. how can I style the text box... deeper, 1 pixel border dark grey, font size say 40px?

Thanks.

Hi there,

Thank you for your message.

You can use the following CSS code.

/**
1. this to always be visible
2. how can I style this so that the question above the text box is central...
*/
.page-section[style*="display:none;"]:first-of-type,
.page-section[style*="display: none;"]:first-of-type {
    display: block !important;
    position: relative !important;
    top: auto !important;
    left: auto !important;
    visibility: hidden;
    height: 0;
}
#id_251, #cid_251 {
    visibility: visible;
    margin-left: auto;
    margin-right: auto;
    width: 100% !important;
}
#id_251 * {
    text-align: center !important;
}

/** how do I also style the text */
#label_251 {
    color: #555;
    font-size: 21px;
}

/** 3. how can I style the text box... deeper, 1 pixel border dark grey, font size say 40px? */
#input_251 {
    border: 1px solid darkgray;
    color: #555;
    font-size: 40px;
}

Related Guide: How to Inject Custom CSS Codes.

Once applied, it should look something like so.

Please give it a try and let us know how it goes.

Hello

Thank you very much for helping me with this.  We're almost there... is there a way to make the text box remain on the screen even though the user moves to another page?

Kindly check out my demo form here: https://form.jotform.com/202493176720959

If this is fine with you, you can clone it back to your account.

How-to-Clone-an-Existing-Form-from-a-URL

Meanwhile, I'll be answering you on your last question on the ticket linked below:

https://www.jotform.com/answers/2559520

Hi

If you could please look at form : 202511816128347

The above CSS (near the top of this post) you kindly gave to me for styling the text box (Jotform Support Ariel_P Answered on September 04, 2020 at 02:44 PM) doesn't appear to be working? Some of the styling is there, but, no changes are reflected in the live form?

Here's a tough question...

Is there a way I can keep displaying this text box even though the user ends up on another page? Is there a way to place this and the entered contents into each page? Why? I need a way for the user to enter a title and this tile (along with their options) will be emailed. Unless of course, there is another way?

In addition, I need to place 5 links on the very top of each page... I need these to be clickable rather than have a 'next or back' button. Besides which, the next and back buttons are already used (and hidden) and have conditions already passed to them? Tricky eh?

Thank you.

Hi there,

Thank you for contacting Support.

Seems like your form has undergone few changes since last time. Here's an updated version of the CSS you can use.

/**
1. this to always be visible
2. how can I style this so that the question above the text box is central...
*/
.page-section[style*="display:none;"]:first-of-type,
.page-section[style*="display: none;"]:first-of-type {
    display: block !important;
    position: relative !important;
    top: auto !important;
    left: auto !important;
    visibility: hidden;
    height: 0;
}
.page-section[style*="display:none;"]:first-of-type li,
.page-section[style*="display: none;"]:first-of-type li {
    display:none;
}
.form-section > li:first-of-type{
    margin-top:80px;
}
.page-section:first-of-type li:first-of-type{
    margin-top:12px !important;
}
#id_372, #cid_372 {
    display:block !important;
    visibility: visible;
    margin-left: auto;
    margin-right: auto;
    width: 100% !important;
}
#id_372 * {
    text-align: center !important;
}

/** how do I also style the text */
#label_372 {
    color: #555;
    font-size: 21px;
}

/** 3. how can I style the text box... deeper, 1 pixel border dark grey, font size say 40px? */
#input_372 {
    border: 1px solid darkgray;
    color: #555;
    font-size: 40px;
}

Here's a demo form with the CSS above applied. Feel free to clone the form and use it as you please: https://form.jotform.com/202802646085959.

Please note that the rules above are bound to the "Project Name" field's ID and the form's layout, changes on those might render the code useless. Just let us know if that happens, so we can update the code.

Let us know if you have any questions or if you need further assistance.