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.

Why doesn't this form have a uniform style?

  1. 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

    Posted 13 years ago on Tuesday November 22, 2011 | Permalink
  2. 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.

    Posted 13 years ago on Tuesday November 22, 2011 | Permalink
  3. 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

    Posted 13 years ago on Tuesday November 22, 2011 | Permalink
  4. jGalt
    Member

    Here is the user registration page: http://tinyurl.com/77fdqk8 Please let me know if you would like admin access.

    Posted 13 years ago on Tuesday November 22, 2011 | Permalink
  5. 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;
    }
    Posted 13 years ago on Tuesday November 22, 2011 | Permalink
  6. 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?

    Posted 13 years ago on Wednesday November 23, 2011 | Permalink
  7. 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.

    Posted 13 years ago on Wednesday November 23, 2011 | Permalink