Use display grid to arrange form

This commit is contained in:
2026-05-06 13:55:17 +02:00
parent dc9fd1d14b
commit 82ac843c03

View File

@@ -49,9 +49,10 @@
background-color: #f5f5f5; background-color: #f5f5f5;
} }
.go-form-table tr { .go-form-grid {
background-color: #ffffff !important; display: grid;
border: none; grid-template-columns: auto auto;
column-gap: 16px;
} }
</style> </style>
@@ -61,49 +62,47 @@
<input type="hidden" name="action" value="go_form_submit"> <input type="hidden" name="action" value="go_form_submit">
<input type="hidden" name="form_id" value="<?php echo esc_attr($form_id); ?>"> <input type="hidden" name="form_id" value="<?php echo esc_attr($form_id); ?>">
<table class="go-form-table"> <div class="go-form-grid">
<tbody>
<tr> <div>
<td> <label for="first_name">First Name*:</label><input type="text" name="first_name" id="first_name" required>
<label for="first_name">First Name*:</label><input type="text" name="first_name" id="first_name" required> </div>
</td>
<td> <div>
<label for="last_name">Last Name*:</label><input type="text" name="last_name" id="last_name" required> <label for="last_name">Last Name*:</label><input type="text" name="last_name" id="last_name" required>
</td> </div>
</tr>
<tr> <div>
<td> <button type="button" id="egd-search" class="button">Search EGD</button>
<button type="button" id="egd-search" class="button">Search EGD</button> </div>
</td>
<td> <div>
<label for="rank">Rank:</label> <label for="rank">Rank:</label>
<select name="rank" id="rank"> <select name="rank" id="rank">
<?php <?php
foreach ($ranks as $value => $label) { foreach ($ranks as $value => $label) {
echo "<option value='" . esc_attr($value) . "'>" . esc_html($label) . "</option>\n"; echo "<option value='" . esc_attr($value) . "'>" . esc_html($label) . "</option>\n";
} }
?> ?>
</select> </select>
</td> </div>
</tr>
<tr> <div>
<td> <label for="country">Country:</label><input type="text" name="country" id="country">
<label for="country">Country:</label><input type="text" name="country" id="country"> </div>
</td>
<td> <div>
<label for="club">Club:</label><input type="text" name="club" id="club"> <label for="club">Club:</label><input type="text" name="club" id="club">
</td> </div>
</tr>
<tr> <div>
<td> <label for="egd_number">EGD Number:</label><input type="text" name="egd_number" id="egd_number">
<label for="egd_number">EGD Number:</label><input type="text" name="egd_number" id="egd_number"> </div>
</td>
<td> <div>
<label for="email">Email:</label><input type="email" name="email" id="email"> <label for="email">Email:</label><input type="email" name="email" id="email">
</td> </div>
</tr> </div>
</tbody>
</table>
<label for="comment">Comment</label> <label for="comment">Comment</label>