Buy Now
Sign in

Need help styling the form

jrexi , October 18 2011, 18:25
J
jrexi 7
October 18 2011, 18:25 #106930
Hi All,

I'm looking to style the background and 'container' of my form and am having some problems. I know this can be done with CSS, but I'm not sure where to put the code or how to write it. I'm not just looking to change the background color, rather I'm looking to have a top image, middle image and bottom image for my form container. The middle image will repeat for as much as it needs to depending on the length of the form.

Can somebody help me out?

Thanks in advance for your help!

John
GreyHead 64
October 19 2011, 14:12 #106983
Hi John,

Not much we can do to help here. You can style your form and edit the Form HTML to do whatever you like in the way of design.

Bob
ChronoForms technical support
If you'd like to buy me a coffee or two, thank you very much
J
jrexi 7
October 19 2011, 14:19 #106985
"GreyHead":
Hi John,

Not much we can do to help here. You can style your form and edit the Form HTML to do whatever you like in the way of design.

Bob


Thanks Bob. Can you at least give me an example of what syntax I should put in the CSS or HTML to create a form container. I'd be able to take it from there and start styling away.
GreyHead 64
October 20 2011, 09:46 #107049
Hi jrexi,

Use View Source on your form page to check the Form ID it varies between Cv3 and CFv4. The form is shown in <form> tags like this
<form class="Chronoform" method="post" id="chronoform_test_form" name="test_form" action="http://my_domain/index.php?option=com_chronoforms&chronoform=test_form&event=submit"> . . . </form>

You can use the CSS selector e.g. form#chronoform_test_form to identify the form block.

Bob
ChronoForms technical support
If you'd like to buy me a coffee or two, thank you very much
J
jrexi 7
October 20 2011, 18:52 #107092
Hi Bob,

I tried to follow the example you gave, but am still having problems.

I added the following to my CSS:
/* FORM SPECIFIC STYLING */

form#chronoform_Request_Information {
  background-image:url(http//www.j4media.com/images/forms/container.png);
  background-repeat:no-repeat;
  
}


When I load the form in my page, no background image appears. You can see the live example at:

http://www.j4media.com/index.php/form-example

What am I doing wrong? Thank You so much for your help!
GreyHead 64
October 20 2011, 19:26 #107098
Hi jrexi,

Please debug your CSS carefully. There is a : missing from the URL and there is no image at http://www.j4media.com/images/forms/container.png

Bob
ChronoForms technical support
If you'd like to buy me a coffee or two, thank you very much
J
jrexi 7
October 21 2011, 00:23 #107114
Ah, good eye Bob

The missing : was the culprit. The reason why you didn't think there was an image was because its just a white frame and you probably looked at it on a white background.

Thank you so much for your help!!!!!
GreyHead 64
October 21 2011, 09:14 #107138
Hi jrexi,

Ah good, I didn't look for a white image :-(

Bob
ChronoForms technical support
If you'd like to buy me a coffee or two, thank you very much