Configuring Stylesheets

HandyMail comes equipped with methods that facilitate the addition of your own classes to its HTML output. By default, there are no classes added to the generated HTML.

IMPORTANT: Classes need to be applied before creating form fields with the add_field() method.

Quickstyles: Default theme & Bootstrap

If you wish to apply the supplied default theme, or your Twitter Bootstrap theme, there are helper methods that can instantaneously do this for you:

$form->set_style_profile(); // Assigns default HandyMail classes to form elements.
$form->set_style_profile("bootstrap"); // Assigns Bootstrap V3 classes to form elements.

Read onwards if you wish to go fully custom.

Configuring HandyMail to use your stylesheet

There are three different class types defined within HandyMail.

1. Main Form Classes
2. Alert Classes
3. Error Classes

Each of these is covered individually in the following sections.

1. Main Form Classes

These classes are tied to the actual form elements themselves. They can be set with the set_classes() method that takes an array of selectors.

All of these are optional and can be omitted as desired.

// Adding the default HandyMail selectors
$main_classes = array(
        // "element_key" => "class"
        "form" => "", 
        "fieldset" => "",
        "fieldset_label" => "",
        "fieldbox" => "",
        "field" => "",
        "submit" => "",
        "helper" => "", 
        "checkbox" => "",
        "radio" => ""
);

$form->set_classes($main_classes);

The diagram below maps the supported element keys to their corresponding form elements on the page.

Note: Consecutive calls to the set_classes() method update and replace any previously set values.

2. Form Alert Classes

These classes concern the presentation of container for the response messages (errors, waiting, success). This container is generated in <div> tags above the <form> element.

These classes can help clarify the submission status for your users. They are set with the set_alert_classes() method.

$alert_classes = array(
        // "alert_key" => "class"
        "success" => "", // Applied upon successful, validated submissions.
        "waiting" => "", // Applied when waiting for response.
        "error" => "" // Applied when there are errors.
);

$form->set_alert_classes($alert_classes);

3. Form Error Classes

These are more specific error classes that can be applied to specific form elements when errors occur. They are set with the set_error_classes() method.

$error_class = array(
        // "error_key" => "class"
        "fieldbox" => "", // Applied to the fieldbox element (check diagram) in the event of an error
        "field_label" => "", // Applied to the field label in the event of an error
        "field_feedback" => "" // Class to apply to feedback error text that is appended below the input field.
);

$form->set_error_classes($error_class);