How to create form in Drupal 7

Question

I want to create a form in Drupal 7 similar to what it is in the following link : https://bmicalculator.cc/?gclid=CIrvnaXv1MQCFQwnjgodvWgAlQ

Form should start with text "BMI Calculator", then 2 columns similar in link and then note text similar to "BMI can be inaccurate for people..."

I know little bit Drupal Form Api so that I can create form but how to display text at the top, how to create form in 2 columns and then again text after form.

I am new to Drupal and hence don't have deep understanding of how drupal works.

Answer 1

To display the text at top, use the #markup item in the form render array. You can then embed the html that you need in this markup.

For the two columns, use the #container type in your form render array. This allows you to wrap a <div> around the child elements. You can then float the div as needed.

So an example would be

$form = array(
/*
 * ... form header info here
 */
 'header' => array(
   '#markup'=>'<h1> BMI Calc </h1>',
 ),
 'col1'=>array(
   '#type'=>'container',
   'subitemA'=>array(
      //some stuff
   ),
   'subitemB'=>array(
      //some stuff
   ),
   '#attributes' => array(
     'class' => array('class-name'),  //use css to float left
     //alternatively float left using style in this area
     ),
   ),
   'col2'=>array(
     '#type'=>'container',
     'subitemA'=>array(
        //some stuff
     ),
     'subitemB'=>array(
        //some stuff
     ),
     '#attributes' => array(
       'class' => array('class-name'),  //use css to float left
       //alternatively float left using style in this area
       //NOTE: still float left, the divs will align as two columns unless
       //screen space is too small, then it will stack responsively.
     ),
   ),
);

Hope this helps.