-
NALIAFormsAsked on February 16, 2015 at 6:05 PM
-
Jeanette JotForm SupportReplied on February 16, 2015 at 9:04 PM
Are you looking for something like this:
http://form.jotformpro.com/form/43145921788968
That form was entirely modified with Form Designer, our tool to help you to give them a great style.
Please check our tutorial and do get back to us should you need further help.
http://www.jotform.com/help/300-Form-Designer-Tutorial-Let-s-create-fantastic-forms-
-
NALIAFormsReplied on February 16, 2015 at 9:16 PM
Not quite. I just want a header with a separator and a smaller black arrow,..no frame and no background color
-
Ashwin JotForm SupportReplied on February 17, 2015 at 5:35 AM
Hello NALIAForms,
Please take a look at the following form and see if this is what you are looking to achieve: http://form.jotformpro.com/form/50472115126950?
You can inject the following custom css code in your form to set the border and background color transparent:
.form-collapse-table {
background: transparent !important;
border-color: transparent !important;
}
Please be noted that arrow is actually an image and it is possible to to change the arrow image by injecting following custom css code (you need to replace the text "YOUR IMAGE URL" with your image URL):
.form-collapse-right-hide {
background: url(YOUR IMAGE URL) no-repeat center;
}
The following guide should help you on how to inject custom css code: http://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes
Hope this helps.
Do get back to us if you have any questions.
Thank you!
-
NALIAFormsReplied on February 17, 2015 at 11:32 AM
Awesome! Thanks,,..however here is a example of the type of look I am going for. I hope this gives you an idea of the finished look I want. Also, can you please give me a example of your comment
"Please be noted that arrow is actually an image and it is possible to to change the arrow image by injecting following custom css code (you need to replace the text "YOUR IMAGE URL" with your image URL):"
Can I just upload a image to replace the arrow??
-
Ashwin JotForm SupportReplied on February 17, 2015 at 12:43 PM
Hello NALIAForms,
What I meant was that, you can display your own image instead of default arrow image. Here are the steps you should follow:
1. Upload the arrow image in your server. You can also upload image in JotForm as well and you may like to take a look at the following thread on how to upload image and use it in your form: http://www.jotform.com/answers/393576
2. Grab the URL of the image you have uploaded.
3. Paste the URL in place of the bold text in following custom css code:
.form-collapse-right-hide {
background: url(ARROW IMAGE URL SHOULD BE PASTED HERE) no-repeat center;
}
Example:
If you arrow image URL is : http://www.jotform.com/image/blackArrow.jpg
then your custom css code should be:
.form-collapse-right-hide {
background: url(http://www.jotform.com/image/blackArrow.jpg) no-repeat center;
}
Hope this helps.
Do get back to us if you have any questions.
Thank you!
-
NALIAFormsReplied on February 17, 2015 at 1:26 PM
Cooool!! Thanks that helps!! How about separator? I want the seperator to show as illustrated in the example I sent. I want to remain constant. The explain you sent me only shows the separator when field collapse. Please advice
-
SeanReplied on February 17, 2015 at 3:25 PM
Hello NALIAForms
I am glad that my colleague suggestion is working out for you. I have also looked into your most recent request and I was able to amend the CSS code below to place a black separator between each collapse.
Here is the test form:
http://form.jotformpro.com/form/50476117080955.form-collapse-table {
background: transparent !important;
border-color: transparent !important;
border-bottom: 2px solid #000 !important;
}Do let us know if further assistance is needed.
Cheers! -
NALIAFormsReplied on February 17, 2015 at 3:55 PM
Man you guys are awesome!! I am about to upgrade my service plan! Your customer service is great!!! Thanks!
-
Jeanette JotForm SupportReplied on February 17, 2015 at 4:37 PM
We are very happy to hear you are now a raving fan of us, never hesitate to contact us whenever you need our help.
Cheers!