Form Styling Updated

- basic styling and quality of life updates
- default select Uncategorized for Category
- re-order form inputs
- change image description to input from textarea
- display form inside "card" (lifted from another WordPress form screen)

Author: FeXd

quick-weblog.php

@@ -17,58 +17,76 @@ function quick_weblog_form() {
   ?>
   <style>
     #quick-weblog {
-      background-color: red;
-      padding: 20px;
+      padding: 1em 0;
     }
     #quick-weblog div {
-      border: 2px solid yellow;
-      background-color: lightblue;
-      padding: 20px;
+      padding: 0.75em 0;
+    }
+    #quick-weblog div:nth-last-child(1) {
+      padding-bottom: 0;
+    } 
+    #quick-weblog div:nth-child(1) {
+      padding-top: 0;
+    } 
+    #quick-weblog div label {
+      font-weight: 600;
+    }
+    #quick-weblog div input,
+    #quick-weblog div textarea,
+    #quick-weblog div select {
+      display: block;
+      max-width: 600px;
+      width: 99%;
+    }
+    #quick-weblog div input[type=submit] {
+      width: auto;
     }
   </style>
-  
-  <form id="quick-weblog" method="post" action="<?php echo esc_url( admin_url('admin-post.php') ); ?>">
-    <div>
-      <label for="title"><?php _e( 'Title', 'quick-weblog' ); ?></label>
-      <input type="text" name="title" id="title" required>
-    </div>
-
-    <div>
-      <label for="image_url"><?php _e( 'Image URL', 'quick-weblog' ); ?></label>
-      <input type="text" name="image_url" id="image_url" required>
-    </div>
-
-    <div>
-      <label for="image_description"><?php _e( 'Image Description', 'quick-weblog' ); ?></label>
-      <textarea name="image_description" id="image_description" required></textarea>
-    </div>
-
-    <div>
-      <label for="quote"><?php _e( 'Quote', 'quick-weblog' ); ?></label>
-      <textarea name="quote" id="quote" required></textarea>
-    </div>
-
-    <div>
-      <label for="url"><?php _e( 'URL', 'quick-weblog' ); ?></label>
-      <input type="text" name="url" id="url" required>
-    </div>
-
-    <div>
-      <label for="category"><?php _e( 'Category', 'quick-weblog' ); ?></label>
-      <?php wp_dropdown_categories( array( 'name' => 'category', 'orderby' => 'name', 'taxonomy' => 'category' ) ); ?>
-    </div>
-
-    <div>
-      <label for="tags"><?php _e( 'Tags', 'quick-weblog' ); ?></label>
-      <input type="text" name="tags" id="tags" required>
-    </div>
-
-    <div>
-      <input type="hidden" name="action" value="quick_weblog_submit_form">
-      <?php wp_nonce_field( 'quick_weblog_submit_form', 'quick_weblog_form_nonce' ); ?>
-      <input type="submit" value="<?php _e( 'Submit', 'quick-weblog' ); ?>">
-    </div>
-  </form>
+
+  <div class="card">
+    <form id="quick-weblog" method="post" action="<?php echo esc_url( admin_url('admin-post.php') ); ?>">
+      <div>
+        <label for="url"><?php _e( 'Post URL', 'quick-weblog' ); ?></label>
+        <input type="text" name="url" id="url" required>
+      </div>
+
+      <div>
+        <label for="title"><?php _e( 'Post Title', 'quick-weblog' ); ?></label>
+        <input type="text" name="title" id="title" required>
+      </div>
+
+      <div>
+        <label for="image_url"><?php _e( 'Image URL', 'quick-weblog' ); ?></label>
+        <input type="text" name="image_url" id="image_url" required>
+      </div>
+
+      <div>
+        <label for="image_description"><?php _e( 'Image Description', 'quick-weblog' ); ?></label>
+        <input type="text" name="image_description" id="image_description" required>
+      </div>
+
+      <div>
+        <label for="quote"><?php _e( 'Quote', 'quick-weblog' ); ?></label>
+        <textarea name="quote" id="quote" rows="6" required></textarea>
+      </div>
+
+      <div>
+        <label for="category"><?php _e( 'Category', 'quick-weblog' ); ?></label>
+        <?php wp_dropdown_categories( array( 'name' => 'category', 'orderby' => 'name', 'taxonomy' => 'category', 'selected' => 1) ); ?>
+      </div>
+
+      <div>
+        <label for="tags"><?php _e( 'Tags', 'quick-weblog' ); ?></label>
+        <input type="text" name="tags" id="tags" required>
+      </div>
+
+      <div>
+        <input type="hidden" name="action" value="quick_weblog_submit_form">
+        <?php wp_nonce_field( 'quick_weblog_submit_form', 'quick_weblog_form_nonce' ); ?>
+        <input type="submit" value="<?php _e( 'Submit', 'quick-weblog' ); ?>">
+      </div>
+    </form>
+  </div>
   <?php
 }