-
OpWarmAsked on July 14, 2017 at 11:30 AM
Hello,
I've created a form that has an image offset to the left of my form. I'm trying to inset a divider to visually separate the image from the fields. I know that Jotform is not supposed to be in a two column format, so I'm not sure this can be done at all. I haven't been able to find a divider widget that works, and inserting the line in the image itself spaces out the form unevenly. I've attached a mocked up image of how I'd like it to look.
There probably isn't... but please let me know if there is a way to insert a vertical divider or line.
-
Mike_G JotForm SupportReplied on July 14, 2017 at 2:04 PM
What you would like to achieve is possible with the help of a form divider and CSS codes.
I see that you already have a form divider added to your form.
First, set the form divider's properties similar to what is shown in the image below.
Note: Please use the existing form divider in your form because I have based my CSS codes there.
After that, position by dragging the form divider in-between the image in your form and the rest of the form fields.
And lastly, add the following CSS codes below to your form following the instruction in this guide — How-to-Inject-Custom-CSS-Codes
li#id_11 {
width: 1px !important;
display: inline-block !important;
position: absolute !important;
padding: 0px !important;
}
#cid_11 div {
border-right: 1px solid #e6e6e6;
height: 325px !important;
}
#cid_11 div {
border-bottom: 0px solid #e6e6e6;
height: 1px;
margin-top: 0px !important;
margin-bottom: 0px !important;
}
Here's a clone version of your form where I have applied the changes above.
https://form.jotformpro.com/71945071559969
Feel free to clone it to your account so you can have it examined better. — How-to-Clone-an-Existing-Form-from-a-URL
If you have other questions regarding this, please feel free to contact us again anytime.
-
Mike_G JotForm SupportReplied on July 14, 2017 at 2:21 PM
Apologies for any inconvenience. I have tried to load the clone version of your form in most commonly used browsers and encountered an issue with Mozilla Firefox. To rectify the issue, I have made some minor changes in the CSS codes I have provided you above. Please use the updated CSS codes below instead in your form.
li#id_11 {
width: 1px !important;
display: inline-block !important;
padding: 0px !important;
}
#cid_11 div {
border-right: 1px solid #e6e6e6;
height: 325px !important;
}
#cid_11 div {
border-bottom: 0px solid #e6e6e6;
height: 1px;
margin-top: 0px !important;
margin-bottom: 0px !important;
}
-
OpWarmReplied on July 18, 2017 at 9:54 AM
This is exactly what I was looking for, thank you! Final question: is there any way to optimize this form for mobile devices with these changes?
-
aubreybourkeReplied on July 18, 2017 at 11:08 AM
You can try adding the following CSS to improve the responsiveness on moblie devices:
@media screen and (max-width: 350px){
#id_10, #id_4, #id_5, #id_6, #id_2 {
top : -300px !important;
}}