Over-riding default html and CSS output

All Topics → → Over-riding default html and CSS output

Hi,

Liking the look of Formidable so far, but have a question. We’re implementing a site based on Twitter Bootstrap and would like to change the default HTML and CSS output of forms to match Bootstrap structure and naming. Is there any way we can over-ride the templates used?

I know we can change the HTML output and certain styling elements after building the form, but there’s not enough control through this method. Could also put some changes in bootstrap.css to try and make it match, but would prefer to over-ride the templates (in a future-proof way) if possible.

Cheers

Stef

With Formidable Pro, there is a "customize HTML" tab on each form settings page. This page gives you access to almost all of the HTML and CSS classes/ids that will go into your form. You should be able to customize your output form however you would like.

Hi,

This is good for doing one form at a time, but we plan on using Formidable on a multi-site install with a number of users at different levels of ability, so we would like to make sure that each newly created form is automatically styled and marked up with Bootstrap, rather than having to customise each one individually.

I've been looking at the Action and Filter Hooks and wonder whether these would be able to do it.

All in all, we're going to need to either:

add classes into existing form html tags, which I guess would be relatively straightforward

AND

wrap certain form fields in new html tags with classes applied

This seems like it might be a bit more tricky

For example, default Formidable output is  <label /> <input />. Our forms need the following structure:

<div class="control-group">
<label class="control-label" />
<div class="controls">
<input />
</div>
</div>

Note the levels of nesting here. We'd like to be able to get this kind of thing inserted automatically. Would this be best done with the Hooks, or is there a better way?

 

Thanks

 

 

I am unable to verify your account. Please log in for support.

Hi,

Sorry had forgotten to log in before. Logging in for suppport re the question above.

Thanks

This will need to be done with custom code. Here's a hook for changing the default HTML.
http://formidablepro.com/knowledgebase/frm_custom_html/

Or, for fields that are already created, you can override the HTML at the time it is displayed.
http://formidablepro.com/knowledgebase/frm_setup_new_fields_vars/

I've had a look at those links and can't quite see how to use them.

Can you show how we'd do the specific example above? Hopefully from that it'll make sense and we can figure out the rest.

 

The code Steph linked to above would be added to your theme's functions.php or to a new plugin. This type of customization requires a bit of coding knowledge, if the information provided in the links above is beyond your ability, we recommend you hire a developer to complete these customizations.

I also have this question. We are wanting to add a class to the form overall (form-horizontal), but I can't find where I can do this

I must be an idiot.

http://formidablepro.com/knowledgebase/action-hooks/frm_form_classes/

Topic closed.