-
tristansmithAsked on October 1, 2014 at 10:35 AM
-
David JotForm SupportReplied on October 1, 2014 at 12:21 PM
Hi,
You can customize this by following this steps:
1. You can use button style
OR
2. You can inject custom CSS and get the page break field ID and insert some CSS script.
Example:
/*Code Starts Here*/
Note: .form-pagebreak-back # will differ from the pagebreak field ID
/* Page break button*/
#form-pagebreak-back_7{width: 348px;
margin-top: -10px; cursor: pointer;-moz-border-radius:.5em;
-webkit-border-radius:.5em;
border-radius:.5em;padding:8px 18px;color: #154d0e;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
text-shadow:1px 1px 0px #518d8a;border:1px solid #268a16 !important;-moz-box-shadow:inset 0px 1px 0px 0px #c9efabzz;
-webkit-box-shadow:inset 0px 1px 0px 0px #c9efab;
box-shadow:inset 0px 0px 0px 0px #c9efab;background: #4ea20a; /* old browsers */
background: -moz-linear-gradient(top, #7bd82f 0%, #4ea20a 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#518d8a), color-stop(100%,#518d8a)); /* webkit */
background: linear-gradient(top, #7bd82f 0%, #4ea20a 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#7bd82f', endColorstr='#4ea20a', GradientType=0 ); /* ie */
}
#form-pagebreak-back_7:hover{
border:1px solid #268a16 !important;
background: #518D76; /* old browsers */
background: -moz-linear-gradient(top, #80dd32 0%, #5bb215 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#80dd32), color-stop(100%,#5bb215)); /* webkit */
background: linear-gradient(top, #80dd32 0%, #5bb215 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#80dd32', endColorstr='#5bb215', GradientType=0 ); /* ie */
}
#form-pagebreak-back_7:active{
border:1px solid #268a16 !important;
position: relative;
top: 1px;
background: #5bb215; /* old browsers */
background: -moz-linear-gradient(top, #5bb215 0%, #80dd32 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#5bb215), color-stop(100%,#80dd32)); /* webkit */
background: linear-gradient(top, #5bb215 0%, #80dd32 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#5bb215', endColorstr='#80dd32', GradientType=0 ); /* ie */
}
/*Code Ends Here*/
For your reference here are some of the functions that are included in the code:
#form-pagebreak-back_7 - You can set your color,size,height etc inside this function.
#form-pagebreak-back_7:hover - This is when you hover your mouse and see the effects changed, you can set it here.
#form-pagebreak-back_7:active - After clicking on the submit button it sets to active link and the settings inside here will take effect.
Here sets the roundess of the button:
-moz-border-radius:.5em;
-webkit-border-radius:.5em;
border-radius:.5em;
background: - sets the background color
border: - The border property is used as a shorthand method to specify one or more of the 3 border values (width, style, and color) all in one place. This property applies to all 4 sides
width: - The width property is used to specify the width of the content area of an element's box
This block of code below sets the gradient color of your button and its browser's flexibility to display the settings (You can play around with colors, just change the one that starts with "#" ex. #518D76 change to #000000)
background: #518D76; /* old browsers */
background: -moz-linear-gradient(top, #80dd32 0%, #5bb215 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#80dd32), color-stop(100%,#5bb215)); /* webkit */
background: linear-gradient(top, #80dd32 0%, #5bb215 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#80dd32', endColorstr='#5bb215', GradientType=0 ); /* ie */
Gradient Sample:
Just let me know if you have more questions. You can play around with the colors and style but the basic format to follow is the above steps.
-
tristansmithReplied on October 1, 2014 at 12:31 PMThis is ridiculous.
I have asked many questions over the last day and you still have not address my questions?
Did you refer to the page I am working on?
Do you see a white line above the “get free report Button”?
I want to get rid of this!!!!!!!!!!!
Tristan Smith
Cabrillo Mortgage and Realty
www.1SanDiegoHomes.com
619-564-6986 direct
619-202-7729 fax
... -
tristansmithReplied on October 1, 2014 at 12:38 PM
Again, you did not address my simple question. I have a white line that shows up in my form that I want to get rid of. Try looking at the web page before responding!
-
Elton Support Team LeadReplied on October 1, 2014 at 2:01 PM
@tristansmith
Our sincere apologies.
It happens that you have posted several questions that's why we are getting confused. Your question on this thread does not contain any explanation that's why we are unable to get it straight. May we suggest you to stick to 1 question per thread to avoid any confusions.
Upon looking at your form now http://form.jotformpro.com/form/42734704083958 I can't seem to find the white line you've mentioned. Were you able to sort this out?
Additionally, if you want to move the the form header title onto the box (as well as remove the error background highlight), you can add this CSS codes.
.form-all {padding-top: 78px;}
.form-line-error {background: none;}
.form-required{display:none;}
Result:
If there's anything else you need help with, let us know here.
Regards!