-
EloineChapAsked on January 20, 2015 at 9:31 PM
I am a bit frustrated again I figured now how to get the space above off the form but now on the web page I want to insert an image to the right. I can't figure out how to control the width of the form. When I put in pixel dimensions it centers the for with all this space on the left and right and I want it to only be a certain with with room to put an image to the right. I could do a work around with an iframe to display the form but I don't want to do that. I can't figure out what to put in the CSS to do this?
Here is the example again http://www.losmedanos.edu/alumstory/
-
CharlieReplied on January 20, 2015 at 9:51 PM
Hi,
I assume that the image you would like to insert to the right is the one named "Covers in the Past"?
You could however use a background image attribute in the CSS. I cloned your form and added my custom CSS code in the Form Designer.
Here's my custom CSS code:
.form-all {
background-image: url(http://www.losmedanos.edu/openhouse/covers.png);
background-repeat: no-repeat;
background-position: right top; padding-top:68px;
z-index: 999;
}
Here's my demo cloned form for this: http://www.jotform.com/form/50198689434973
Another method is we can use to insert an image using the image field in the form builder and position it to the right. But, let me know if the above one works for you.
Thank you.
-
EloineChapReplied on January 21, 2015 at 12:30 PM
Hey Charlie thanks for this and it's close to what I wanted and since I asked the question I reverted to using a table to try and achieve this look. I am going to want the image clickable though because there will be either ads or buttons in that right column so a background image will work just for an image but not if I want that image to be interactive. So I just needed to be able to control the width of the form and not have all the extra space appear on the left an the right.
I don't seem to be choosing the correct thing to modify because I don't see where I can control the outer shell of the form to contain it. If I decrease the width of the form it just centers it and then adds extra space on the left and the right. What thing am I overlooking?
-
David JotForm Support ManagerReplied on January 21, 2015 at 2:14 PM
Have you considered using the image field and position the image with CSS?
Then preview your form and get the ID, by doing a right click on the image and clicking on "Inspect Element", to style that specific element:
You can inject the custom CSS code like this to make it appear on the right:
#cid_13{
position: absolute;
margin-top: -920px;
margin-left: 510px;
}
See the form here, you will see the image is clickable:
http://form.jotformpro.com/form/50205277425955?
On regards of the space on the left and right, are you referring to this space?:
-
EloineChapReplied on January 21, 2015 at 2:27 PM
No I didn't consider using the image field and that looks like a great option.
Yes the space on the left is what's bothering me the most. I want to be able to align it flush left and I am not sure how to do that?
-
David JotForm Support ManagerReplied on January 21, 2015 at 4:29 PM
Please try injecting this CSS code after decreasing a bit the width of the form if you want to:
.form-section {
margin-left: -30px;
}
Here is how all the elements of the form will be aligned to the left:
Let us know if this helps you, we will be glad to assist you.
-
EloineChapReplied on January 21, 2015 at 4:55 PM
Ah ha!! That did it! Thanks, I didn't know what class names controlled what.
Thanks, Eloine
-
raulReplied on January 21, 2015 at 6:05 PM
On behalf of my colleagues, you're welcome.
If you need further assistance, please let us know.
Best Regards.