Month: April 2021

When building software user interfaces, I create HTML forms to manage any app settings. I’ll usually have a few text and radio inputs like this:

Using PHP, I grab a database record and access its properties to populate the form. Filling out the text inputs is straight-forward:

<?php $clickToCallRecord = $db_service->getClickToCallRecord($installation_complete_id); ?>

<div class="form-group">
    <label>Phone number:</label>
    <input class="form-control" type="tel" name="phone_number" value="<?php echo $clickToCallRecord['phone_number']; ?>" placeholder="(123)-456-7890">
</div>
<div class="form-group">
    <label>Message:</label>
    <input class="form-control" type="text" name="message_text" value="<?php echo $clickToCallRecord['message_text']; ?>" placeholder="Call Us Now">
</div>
<div class="form-group">
    <label>Background Color:</label>
    <input class="form-control" type="text" value="<?php echo $clickToCallRecord['bg_color']; ?>" name="bg_color">
</div>

Checking the correct radio input requires our code to evaluate the data value. I add a PHP variable to each of the inputs as attributes. Those variables will render to either “checked” or blank:

<?php
    $top_checked = "";
    $bottom_checked = "";
    $position = $clickToCallRecord['position'];
    if($position == "top"){
        $top_checked = "checked";
        $bottom_checked = "";
    }else{
        $top_checked = "";
        $bottom_checked = "checked";
    }

    $show_checked = "";
    $hide_checked = "";
    $display = $clickToCallRecord['display'];
    if($display == "show"){
        $show_checked = "checked";
        $hide_checked = "";
    }else{
        $show_checked = "";
        $hide_checked = "checked";
    }

?>

<div class="form-group">
    <label>Position:</label>
    <div>
        <div class="form-check form-check-inline">
          <input <?php echo $top_checked; ?> class="form-check-input" type="radio" name="position" value="top">
          <label class="form-check-label" for="matchtype">Top</label>
        </div>
        <div class="form-check form-check-inline">
          <input <?php echo $bottom_checked; ?> class="form-check-input" type="radio" name="position"  value="bottom">
          <label class="form-check-label" for="matchtype">Bottom</label>
        </div>
    </div>
</div>
<hr />
<div class="form-group">
    <label>Display:</label>
    <div>
        <div class="form-check form-check-inline">
          <input <?php echo $show_checked; ?> class="form-check-input" type="radio" name="display" value="show">
          <label class="form-check-label" for="matchtype">Show</label>
        </div>
        <div class="form-check form-check-inline">
          <input <?php echo $hide_checked; ?> class="form-check-input" type="radio" name="display"  value="hide">
          <label class="form-check-label" for="matchtype">Hide</label>
        </div>
    </div>
</div>

This example comes from a Shopify app that helps stores increase conversions by adding a UI element prompting customers to call a phone number.