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,21 +62,21 @@
<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>
</td> </div>
<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>
</td> </div>
<td>
<div>
<label for="rank">Rank:</label> <label for="rank">Rank:</label>
<select name="rank" id="rank"> <select name="rank" id="rank">
<?php <?php
@@ -84,26 +85,24 @@
} }
?> ?>
</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">
</td> </div>
<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">
</td> </div>
<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>