Silverstripe better form looking on templates

Question

I have a designed template on photoshop from a client. My interrogation... When I saw the template is: Can I put 2 fields side-by-side? I want to have f_firstname and f_lastname on one row... Is there anyway to inject tags or piece of code with classes like ex: div="column1of2" $field_here close div to have a 2 columns for 2 fields?

Actually, code generate each fields are on separates rows. That's not very pretty. Possible?

I have this code :

private static $allowed_actions = array(
    'FormInfolettre'
);

public function FormInfolettre() {
    $fields = new FieldList(
        EmailField::create('f_email', 'Votre courriel'),
        TextField::create('f_firstname', 'Votre prénom'),
        TextField::create('f_lastname', 'Votre nom'),
        TextField::create('f_message', 'Votremessage'),
);

    $actions = new FieldList(
        FormAction::create("Soumettre")->setTitle("Soumettre")
    );

    $required = new RequiredFields(
        array(
            'f_email',
            'f_firstname',
            'f_lastname',
            'f_message',

        ));

    $form = new Form($this, 'FormInfolettre', $fields, $actions, $required);

    return $form;
}

Answer 1

You can create FieldGroups for the container div and add extra css classes to the fields like

$fields = FieldList::create();

$firstName = TextField::create('FirstName','First Name')->addExtraClass('small-8 medium-4 large-5 columns');
$surname = TextField::create('Surname','Surname')->addExtraClass('small-12 medium-5 large-5 columns');

$nameGroup = FieldGroup::create($firstName, $surname);

$fields->push($nameGroup);

Answer 2

I believe this can be done in the new versions by adding your fields to groups then adding a class and CSS for those classes, one group that is left aligned and the other right aligned.

Alternatively, I forked an older version of Userforms a while back to accomplish this. https://github.com/helenclarko/silverstripe-userforms