jGalt
Member
I am creating my first form with the user registration add on. Can someone please tell me why the same type of fields within a single form do not have a uniform style?
Notice how the field size and the spacing between the labels varies:
http://web.me.com/shovebox/filechute/gf_reg_formatting_problem.png
Please provide a URL to the site online. Thank you.
I'm going to guess there are some styles in your theme's stylesheet that are causing this. But we need to see it live to know if that's the case.
jGalt
Member
Ideally, I would like the form to have the same appearance as the theme's contact page that you can view here: http://tinyurl.com/6tj5bz8
jGalt
Member
Here is the user registration page: http://tinyurl.com/77fdqk8 Please let me know if you would like admin access.
Your contact us form is not a gravity form, therefore it has it's own styling. You can easily pull this off with CSS by applying similar styles to Gravity Forms, this should get you started, if you want to place this into your theme's stylesheet:
[css]
.gform_wrapper input[type="text"], .gform_wrapper input[type="url"], .gform_wrapper input[type="email"], .gform_wrapper input[type="tel"], .gform_wrapper input[type="number"], .gform_wrapper input[type="password"] {
background: url(images/contact_input.png) repeat-x #F7F7F7 !important;
border: 1px solid #CCC !important;
width: 100% !important;
color: #111 !important;
padding: 8px !important;
-webkit-border-radius: 8px !important;
-moz-border-radius: 8px !important;
border-radius: 8px !important;
}
jGalt
Member
Thank you for your reply. I am a newbie and that helped me a lot.
I am still stuck on a few issues:
http://tinyurl.com/77fdqk8
1.) Where can I edit the appearance on the multi-select field?
2.) What do I need to edit so the shadow image on the inside of the fields shows? I tried setting the field color to transparent but there was still no image inside.
3.) I have created a custom submit button on the bottom of my form using a shortcode from my theme. I assume the button is being generated by CSS and it's nto an image. Is there a way that I can make this the form's submit button and hide the Gravity Form submit button?
For #1 - I'm assuming you are talking about the drop down at the top? You should be able to target that just as we did with the input types above apply the CSS or styling you are looking to have.
For #2 - SInce I can't see the file structure very well of your theme without being inside, update the path of the background: to: http://thinkbigfactory.com/test/wp-content/themes/Envisioned/epanel/page_templates/images/contact_input.png
That will show the shadowing.
For the submit button, if you want to use images instead of text you need to do that on the form settings:
http://www.gravityhelp.com/documentation/page/Form_Settings
You can pull off that style though with CSS - you wouldn't need to use an image to do so.
