-
seventhreeAsked on June 26, 2021 at 8:00 PM
https://form.jotform.com/211767256879068
Hello,
Could you please help with a few changes.
1) Remove header and footer separator
2) Remove the required star up top (*) as it already shows the bottom required field
3) I enabled 2 columns as per another thread, but I wasn't able to move the items on the left up:
4) And lastly, I wanted a wall of text to go under the image. I added a long text box with read only value, but users can still click this and shrink it. Ideally this needs to look like the header, where it's just text and not a form field
Thanks,
Page URL: https://form.jotform.com/211767256879068 -
Bojan Support Team LeadReplied on June 27, 2021 at 7:38 AM
Greetings.
To achieve remove header and footer separators and asterisks next to the required questions, please add the following CSS to your form:
.form-header-group {
margin-bottom: none !important;
}
.form-buttons-wrapper {
border-top: none !important;
}
.form-required {
display: none !important;
}
To display questions next to the image you have added, you will need to modify your forms a little.
You need to add Section Collapse elements before the Email field and after the Phone field. You also need to set the Section Visibility to Visible and Button Visibility to Hidden:
After that, add the following CSS:
@media screen and (min-width: 770px) {
#section_12 {
position: absolute;
top: 325px;
width: 675px;
}
}
To add static text on your form, you can use the Paragprah field:
You can see all these changes on the following form:
https://form.jotform.com/211772832785969If you wish, feel free to clone the example form to your account. You can click here to see how to achieve this.
Let us know if you have any additional questions.
-
seventhreeReplied on June 27, 2021 at 11:06 AM
Hi Bojan, thank you for the feedback and the changes were all OK, just one detail: it looks good on desktop, but its off on tablet/phone mode.
I cloned the form and moved the image and paragraph text where I feel looks better.
It now looks OK on phone mode.
Tablet mode: The items are currently aligned to the left, could these be centered.
Desktop mode: Could you help move the image/paragraph to the right as where it previously was?
https://www.jotform.com/build/211774514186155
Thank You!
-
Billy JotForm SupportReplied on June 27, 2021 at 8:46 PM
Desktop mode: Could you help move the image/paragraph to the right as where it previously was?
To perform this, change "min-width" to "max-width"
Open the form using the regular builder and drag the image to where you want it to be.
Tablet mode: The items are currently aligned to the left, could these be centered.
Yes, items can be centered with the help of CSS codes. However, where would the image be placed?
We'll be waiting for your response.
-
seventhreeReplied on June 28, 2021 at 2:50 PM
Hello,
I apologize, I attached the wrong URL, please see here: https://form.jotform.com/211774547580159
The correct order on mobile/tablet should be:
Image
Image Description
Name
Email
Phone
Take Photo Widget
MessageAs stated on the previous message, mobile looks OK now:
Tablet/Desktop do not look OK and need the following adjustments
Tablet: Center Items, they are currently left aligned
|
And on desktop, image and description need to be placed on the right hand side
Thank you.
-
Jovanne JotForm SupportReplied on June 28, 2021 at 8:26 PM
Hi,
Please allow me some time to conduct some tests, and I will get back to you as soon as I have more information.
Thank you.
-
Jovanne JotForm SupportReplied on June 28, 2021 at 9:15 PM
Hi,
Please try adding this custom CSS code:
/* desktop */
@media screen and (min-width: 992px){
#section_12 {
position: absolute;
top: 224px;
width: 675px;
}
img.form-image {
float: right;
}
li#id_3 {
margin-top: -20px;
}
ul.form-section.page-section {
height: 1100px;
}
li#id_15 {
width: 300px;
margin-left: 376px;
margin-top: -75px;
}
}
/* tablet */
@media only screen and (min-width: 600px) and (max-width: 768px){
li#id_15 {
margin: 0 auto;
}
ul#section_12 {
margin-left: 180px;
}
li#id_2 {
margin-left: -105px;
}
}
Please give it a try and let us know if this worked for you.
-
seventhreeReplied on June 29, 2021 at 9:56 AM
I have added as requested and it breaks the form, please look or clone:
-
seventhreeReplied on June 29, 2021 at 10:26 AM
Hello Team,
I decided to start a new form and arrange it differently.
Thank you for your time and help, you can close this case :)
Regards!