Forms

To create a valid form on our online experiment platform, a few requirements need to be considered. At first a context checksum is required to guarantee the location of a participant. In addition the action parameter of the form is set through the context API, to specify where the form-data is submitted. On the example below you can see the minimum requirements described here.

Requirements

To have an idea of what you can do in a Generic PHP step, see the example hereafter. This is a form including eleven input fields. These fields are representing one football player each and the participant is asked to rate the players performance during the match.

Form Example

To get to this result you can see the code below. From the vast amount of code you can already tell that this is not the best way to generate such a form. Preferably you should use a for loop in combination with some if-conditions to adjust for the different cases.

<form action="<?= $context->getFrontUrl(); ?>" method="post">

  <?php if (!empty($message)): ?>
    <div class="alert alert-danger">
      <?= $message; ?>
    </div>
  <?php endif; ?>
  
<div class="container">
  <div class="row">
    <div class="footballPerformanceHeadline">Football - Player Performance Evaluation</div>
    <div>
      Please select a value between 1 (very bad) and 10 (very good) for the individual player performance.
    </div>
  </div>
  <div class="row">
    <div class="col-xs-3 col-xs-offset-3">
      <div>
        Nr. 11
      </div>
      <div>
        <input class="form-control" size="3" name="nr11">
      </div>
    </div>
    <div class="col-xs-3">
      <div>
        Nr. 10
      </div>
      <div>
        <input class="form-control" size="3" name="nr10">
      </div>
    </div>
  </div>
  
  <div class="row">
    <div class="col-xs-3">
      <div>
        Nr. 9
      </div>
      <div>
        <input class="form-control" size="3" name="nr9">
      </div>
    </div>
    <div class="col-xs-3">
      <div>
        Nr. 8
      </div>
      <div>
        <input class="form-control" size="3" name="nr8">
      </div>
    </div>
    <div class="col-xs-3">
      <div>
        Nr. 7
      </div>
      <div>
        <input class="form-control" size="3" name="nr7">
      </div>
    </div>
    <div class="col-xs-3">
      <div>
        Nr. 6
      </div>
      <div>
        <input class="form-control" size="3" name="nr6">
      </div>
    </div>
  </div>
  
    <div class="row">
      <div class="col-xs-3">
        <div>
          Nr. 5
        </div>
        <div>
          <input class="form-control" size="3" name="nr5">
        </div>
      </div>
      <div class="col-xs-3">
        <div>
          Nr. 4
        </div>
        <div>
          <input class="form-control" size="3" name="nr4">
        </div>
      </div>
      <div class="col-xs-3">
        <div>
          Nr. 3
        </div>
        <div>
          <input class="form-control" size="3" name="nr3">
        </div>
      </div>
      <div class="col-xs-3">
        <div>
          Nr. 2
        </div>
        <div>
          <input class="form-control" size="3" name="nr2">
        </div>
      </div>
    </div>
  
    <div class="row">
      <div class="col-xs-4 col-xs-offset-4">
        <div>
          Nr. 1
        </div>
        <div>
          <input class="form-control" size="3" name="nr1">
        </div>
      </div>
    </div>  
  </div>


  <input type="submit" value="Submit" class="btn btn-default">
  <input type="hidden" name="contextChecksum" value="<?= $context->getChecksum(); ?>">
</form>