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.

Styling Forms with my themes shortcodes

  1. Hello,

    I'm trying to style my forms using my themes shortcodes.
    But when I copy/paste the CSS class in GravityForms that doesn't work.

    Please find below my themes shortcodes (I intended to use the "class="button large black round" by exemple).
    http://www.uxde.net/demo/laverde/all-shortcodes/

    And one of my form can be found here (doesn't look good eh?) :
    http://boxicomane.com/ajouter-box/

    Thanks a lot,

    Posted 7 years ago on Tuesday February 12, 2013 | Permalink
  2. I see the result of the shortcodes on that page, but not the actual usage. Can you post how the shortcode is used to achieve buttons like that?

    From looking at the source of that page, it appears the classes "button large black round" can be used to make a regular link (<a href=") look like a button. However, Gravity Forms uses an actual form input for the submit button. So, you won't be able to apply the CSS classes directly, since the styles would not apply the same to an input and an anchor.

    The approach would be to find the styles for the class you want to use, then copy those styles to the end of your theme's stylesheet, and change the selector from "a" to the corresponding Gravity Form selector. For the submit button, this would be equivalent:

    [css]
    body .gform_wrapper .gform_footer input[type="submit"] {
    /* add the styles for the "button large black round"
    /* here  ... */
    Posted 7 years ago on Wednesday February 13, 2013 | Permalink
  3. Hi Chris,

    OK I think I got it, have to try!

    Thanks for your help,
    T.

    Posted 7 years ago on Wednesday February 13, 2013 | Permalink
  4. You're welcome and good luck.

    Posted 7 years ago on Sunday February 17, 2013 | Permalink