-
AdminRSCMAsked on September 14, 2017 at 3:05 PM
Is there a cay to style the background color on this form to have a triangle down arrow?
https://www.jotform.com/build/72565388958174/settings#preview
see attached image of what i'm trying to achieve.
using this css:
#triangle-down { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-top: 100px solid #172751; }
-
MikeReplied on September 14, 2017 at 4:38 PM
If you would like to place the CSS triangle after the form container, you may try using a .form-all:after selector for your CSS.
-
AdminRSCMReplied on September 15, 2017 at 10:19 AM
Hmm- so add this css to the custom css box?
.form-all:after {
width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-top: 100px solid #172751;
}
https://form.jotform.us/72565388958174
This did not work- just created a large blue gap at the bottom of the form on the live site and on the preview form, just a small triangle at the bottom.
-
Kevin Support Team LeadReplied on September 15, 2017 at 12:12 PM
I think de to the form's width, would be a bit hard to display the triangle, but you may try with this code:
.form-all:after {
width: 47%;
height: 0;
top: 144px;
margin-left: auto;
margin-right: auto;
position: relative;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 143px solid #172751;
z-index: 100;
}
Please note that you will need to change your form's background color in order to notice the difference between the triangle and the form's background.
-
AdminRSCMReplied on September 15, 2017 at 2:41 PM
Attached is the look on my live site.
Im trying to make my form look like the blue form attached- below the first attached image.
Any advice?
-
MikeReplied on September 15, 2017 at 4:37 PM
I am not sure if a similar CSS can be applied to your form, but you can clone the next form and check its CSS to get an idea.
-
AdminRSCMReplied on September 21, 2017 at 9:07 AM
-
MarvihReplied on September 21, 2017 at 11:05 AM
Hi try this one instead https://form.jotformpro.com/72634076076964
How to clone click HERE
Let us know if you need help.Thanks,
-
AdminRSCMReplied on September 25, 2017 at 11:17 AM
This form looks good- up until screen size 1320pixels. The bottom of the form( the triangle) starts to look off. Is there a way to maintain the bottom triangle at all screen sizes?
-
MarvihReplied on September 25, 2017 at 12:01 PM
It should be mobile responsive. Can you try adding "Mobile Responsive" widget and check again.
-
AdminRSCMReplied on September 25, 2017 at 12:30 PM
http://flexogenix.com/knee-pain-relief-charlotte/
If you check out my live form, now the padding around the inside of form is gone, and not all of the form fields are full width and even?
-
Kevin Support Team LeadReplied on September 25, 2017 at 12:52 PM
I have just checked your form and this is how it displays:
Please inject the following CSS code in order to display the fields with full width:
[data-type="control_dropdown"] .form-input, [data-type="control_dropdown"] .form-input-wide{
width: 100% !important;
}
@media only screen and (max-width: 40em){
[data-type=control_phone] .form-sub-label-container:first-child {
width: 100% !important;
}
}
This guide will help you injecting the code: https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes
I hope this helps.