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.

Changing HTML markup

  1. I've built a few new WP sites using the Roots starter theme which itself uses Twitter Bootstrap as a framework. I love the way Twitter Bootstrap makes forms look and I'm wanting to use Gravity Forms within the theme.

    You can see how Bootstrap forms work here:
    http://twitter.github.com/bootstrap/base-css.html#forms

    It requires the markup of forms in a certain way, and unfortunately this isn't compatible with Gravity Forms.

    Is it possible to alter the way Gravity Forms outputs the html so that I can get it to work with Bootstrap? I'm new to WordPress and Gravity Forms, but was wondering whether I could do something with the Gform_pre_render function, but I'm not sure where to start.

    Posted 12 years ago on Friday May 25, 2012 | Permalink
  2. David Peralty

    You won't be able to change the entirety of how the markup is output. You would probably be able to change the CSS and JS much easier though. Apply the Bootstrap rules as much as possible to the markup that Gravity Forms creates.

    Posted 12 years ago on Friday May 25, 2012 | Permalink
  3. Thanks, I was hoping to avoid that, and to clean up the markup outputted by GF so that it is suitable for my working. It doesn't look like this is going to be possible.

    Either way it's going to require quite a bit of work, but it sounds like the only way is to update the CSS. I know a few people (including the people behind Roots) are working on a way to get GF working well with Bootstrap, but looks like a CSS only way for me.

    Is there a CSS example or snippet I can use as a template?
    Thanks.

    Posted 12 years ago on Friday May 25, 2012 | Permalink
  4. David Peralty

    Gravity Forms comes with a forms.css file you could look at as a starting point. At least in identifying the styles that are available in every form that you can begin to edit/manipulate.

    Posted 12 years ago on Friday May 25, 2012 | Permalink