Need help styling the form

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

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

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.

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

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!

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

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!!!!!

Hi jrexi,

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

Bob