Begin Form Styling

- some ugly background colors and divs to get started
- don't try anything fancy

Author: FeXd

quick-weblog.php

@@ -15,31 +15,59 @@
 
 function quick_weblog_form() {
   ?>
-  <form method="post" action="<?php echo esc_url( admin_url('admin-post.php') ); ?>">
-    <label for="title"><?php _e( 'Title', 'quick-weblog' ); ?></label>
-    <input type="text" name="title" id="title" required>
-
-    <label for="image_url"><?php _e( 'Image URL', 'quick-weblog' ); ?></label>
-    <input type="text" name="image_url" id="image_url" required>
-
-    <label for="image_description"><?php _e( 'Image Description', 'quick-weblog' ); ?></label>
-    <textarea name="image_description" id="image_description" required></textarea>
-
-    <label for="quote"><?php _e( 'Quote', 'quick-weblog' ); ?></label>
-    <textarea name="quote" id="quote" required></textarea>
-
-    <label for="url"><?php _e( 'URL', 'quick-weblog' ); ?></label>
-    <input type="text" name="url" id="url" required>
-
-    <label for="category"><?php _e( 'Category', 'quick-weblog' ); ?></label>
-    <?php wp_dropdown_categories( array( 'name' => 'category', 'orderby' => 'name', 'taxonomy' => 'category' ) ); ?>
-
-    <label for="tags"><?php _e( 'Tags', 'quick-weblog' ); ?></label>
-    <input type="text" name="tags" id="tags" required>
-
-    <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' ); ?>">
+  <style>
+    #quick-weblog {
+      background-color: red;
+      padding: 20px;
+    }
+    #quick-weblog div {
+      border: 2px solid yellow;
+      background-color: lightblue;
+      padding: 20px;
+    }
+  </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>
   <?php
 }
@@ -89,7 +117,15 @@ function quick_weblog_submit_form() {
   // Create a new post
   $post_data = array(
     'post_title' => $title,
-    'post_content' => sprintf( '<blockquote class="wp-block-quote"><figure class="wp-block-image"><img decoding="async" src="%s" alt><figcaption class="wp-element-caption">%s</figcaption></figure><p>%s</p><cite><a href="%s" target="_blank" rel="noreferrer noopener">%s</a></cite></blockquote>', $image_url, $image_description, $quote, $url, $url ),
+    'post_content' => sprintf( '
+      <blockquote class="wp-block-quote">
+        <figure class="wp-block-image">
+          <img decoding="async" src="%s" alt>
+          <figcaption class="wp-element-caption">%s</figcaption>
+        </figure><p>%s</p>
+        <cite><a href="%s" target="_blank" rel="noreferrer noopener">%s</a></cite>
+      </blockquote>'
+      , $image_url, $image_description, $quote, $url, $url ),
     'post_category' => array( $category ),
     'tags_input' => $tags,
     'post_status' => 'publish'