PLEASE NOTE: These forums are no longer utilized and are provided as an archive for informational purposes only. All support issues will be handled via email using our support ticket system. For more detailed information on this change, please see this blog post.

Form does not show text boxes

  1. This may just be an issue with the theme that i am using, but it seems that just adding the gravityform to my page does not seem to display the outlines of the boxes where users add their content.
    I have even tried adding custom css to the theme for the form and nothing seems to change.
    At the very least I would have expected the form to show plain formatting.

    I am viewing this in FF 5.0
    page viewed here: http://rootplus.ca/test-page

    I have tried using the examples you have just to see if anything would change, but nothing is. It previews fine, and i have read that if it previews fine, then its a css issue with the theme.
    This theme does have styling to it's contact form that I am replacing with GF.

    Also a side question: Is it possible to just create my own stylesheet and then link the GF to that instead. I believe i can just copy the forms.css file and make my changes.

    thanks

    Posted 12 years ago on Tuesday July 12, 2011 | Permalink
  2. Your theme styles are hiding the borders on the text fields and textarea elements. See line 127 of your theme's style.css file.

    [css]
    input[type="text"] {
    	border:0;
    	font:1em "Trebuchet MS", Helvetica, Garuda, sans-serif;
    	line-height:1em;
    	padding:4px;
    	background:none;
    	color:#fefefe;
    	outline:none;
    }
    
    textarea {
    	border:0;
    	background:none;
    	color:#fefefe;
    	font:1em "Trebuchet MS", Helvetica, Garuda, sans-serif;
    	line-height:1.4em;
    	overflow:auto;
    	outline:none;
    	resize:vartical;
    }

    I'm not sure why they've done that unless it's to accommodate a background image of some sort. If you disable the border properties on those rules, you'll see that the fields display in their default state.

    screenshot: http://bit.ly/n5Pe3n

    You would need to remove or revise those rules to make the form display properly. You could also just create new rules with better CSS specificity to override those settings like this..

    [css]
    body .gform_wrapper .gform_body input[type=text] {
    	border: 1px solid #eee
    }

    Yes, you can go to your form settings page and set the "output CSS" option to no. That way the default form styles don't get loaded and you can then copy the styles over to another stylesheet and modify them extensively if you prefer.

    Posted 12 years ago on Tuesday July 12, 2011 | Permalink
  3. I appreciate the help.. This is what their form looks like: http://rootplus.ca/contact-us
    They do have the ability to put a background image in (not working anymore right now after a theme update)

    If i set the output to No - does it just take the settings from the main css stylesheet of the theme? If so then thats okay. When i did turn it off, it made the form look very weird, so I turned it back on.
    Thanks

    Posted 12 years ago on Wednesday July 13, 2011 | Permalink