twitter-bootstrapvalidform

Integrating ValidForm Builder with Twitter Bootstrap

I have successfully used ValidFormBuilder to create a safe web form. Hurray for this great tool! Now I want to use the ValidForm inside a website that is based on Twitter Bootstrap.

I would really like it I could style the ValidForm elements using the Twitter Bootstrap CSS. I can imagine this should be done by adding CSS-classes to the ValidForm-elements.

How can this be done?

More specifically:

  1. How can I set the role-attribute of the <form> element to form?
  2. How can I add the class form-control to the <input> elements?
  3. How can I add the classes btw and btn-default to the <input type="submit"> element?

I would like to create a form that uses the Twitter Bootstrap Forms CSS mentioned here: http://getbootstrap.com/css/#forms

Thanks in advance for your help!

Solution

  • To add classes btw and btn-default to a button:

    Add custom class to ValidFrom Builder button:

    $objForm->addButton(
    "Button label",
    array(
        // Set for example a Twitter Bootstrap class on this button
        "fieldclass" => "btn btn-large"
    )
);

    I got this example straight from the documentation

    Add custom attributes to text field

    $objForm->addField(
    "first-name",
    "First name",
    ValidForm::VFORM_STRING,
    array(),
    array(),
    array(
        // Prefixing meta keys with 'field' will make sure
        // this meta is applied in the <input> element instead
        // of it's wrapping <div>
        "fieldrole" => "example-role"
    )
);

    This will output:

    <div class="vf__optional">
    <label for="first-name">First name</label>
    <input type="text" value="" name="first-name" id="first-name" class="vf__string vf__text" role="autocomplete">
</div>

    When you want to add a custom class to the submit element, you'll need some javascript. This will be addressed in the upcoming 4.0 release of ValidForm Builder.

    Adding data attributes to form element

    Assuming you're in the correct namespace etc.:

    $objForm = new ValidForm("formName", null, null, array("data" => array("role" => "cool-role")));

    This should output something close to:

    <form ... data-role='cool-role'>