Style pledge form

plugins/wporg-5ftf/views/form-pledge-manage.php

@@ -7,15 +7,19 @@ use function WordPressDotOrg\FiveForTheFuture\get_views_path;
 /** @var bool  $updated */
 ?>
 
-<form id="5ftf-form-pledge-manage" action="" method="post">
+<form class="pledge-form" id="5ftf-form-pledge-manage" action="" method="post">
 	<?php
 	require get_views_path() . 'inputs-pledge-org-info.php';
-	require get_views_path() . 'inputs-pledge-org-logo.php';
-	require get_views_path() . 'inputs-pledge-org-email.php';
 	require get_views_path() . 'inputs-pledge-contributors.php';
+	require get_views_path() . 'inputs-pledge-org-email.php';
 	?>
 
 	<div>
-		<input type="submit" id="5ftf-pledge-submit" name="action" class="button button-primary" value="<?php esc_attr_e( 'Update Pledge', 'wporg' ); ?>" />
+		<input
+			type="submit"
+			id="5ftf-pledge-submit"
+			name="action"
+			value="<?php esc_attr_e( 'Update Pledge', 'wporg' ); ?>"
+		/>
 	</div>
 </form>

plugins/wporg-5ftf/views/form-pledge-new.php

@@ -15,7 +15,7 @@ use function WordPressDotOrg\FiveForTheFuture\get_views_path;
 
 	<?php foreach ( $messages as $message ) : ?>
 		<div class="notice notice-error">
-			<?php echo wpautop( $message ); ?>
+			<?php echo wp_kses_post( $message ); ?>
 		</div>
 	<?php endforeach; ?>
 
@@ -24,22 +24,26 @@ use function WordPressDotOrg\FiveForTheFuture\get_views_path;
 <?php if ( true === $complete ) : ?>
 
 	<div class="notice notice-info">
-		<?php echo wpautop( __( 'Thank you for your submission. You will receive an email confirmation.', 'wporg' ) ); ?>
+		<?php esc_html_e( 'Thank you for your submission. You will receive an email confirmation.', 'wporg' ); ?>
 	</div>
 
 <?php else : ?>
 
-	<form id="5ftf-form-pledge-new" action="" method="post">
+	<form class="pledge-form" id="5ftf-form-pledge-new" action="" method="post">
 		<?php
 		require get_views_path() . 'inputs-pledge-org-info.php';
-		require get_views_path() . 'inputs-pledge-org-logo.php';
-		require get_views_path() . 'inputs-pledge-org-email.php';
 		require get_views_path() . 'inputs-pledge-contributors.php';
+		require get_views_path() . 'inputs-pledge-org-email.php';
 		require get_views_path() . 'inputs-pledge-new-misc.php';
 		?>
 
 		<div>
-			<input type="submit" id="5ftf-pledge-submit" name="action" class="button button-primary" value="<?php esc_attr_e( 'Submit Pledge', 'wporg' ); ?>" />
+			<input
+				type="submit"
+				id="5ftf-pledge-submit"
+				name="action"
+				value="<?php esc_attr_e( 'Submit Pledge', 'wporg' ); ?>"
+			/>
 		</div>
 	</form>
 

plugins/wporg-5ftf/views/inputs-pledge-contributors.php

@@ -14,14 +14,14 @@ namespace WordPressDotOrg\FiveForTheFuture\View;
 	</label>
 	<input
 		type="text"
-		class="large-text"
 		id="5ftf-pledge-contributors"
 		name="pledge-contributors"
 		value=""
 		required
+		aria-describedby="5ftf-pledge-contributors-help"
 	/>
-	<p>
+	<p id="5ftf-pledge-contributors-help">
-		<!-- Instructions for inputting wporg usernames -->
+		<?php esc_html_e( 'Separate each username with a comma.', 'wordpressorg' ); ?>
 	</p>
 </div>
 

plugins/wporg-5ftf/views/inputs-pledge-new-misc.php

@@ -5,7 +5,7 @@ namespace WordPressDotOrg\FiveForTheFuture\View;
 /** @var bool  $readonly */
 ?>
 
-<div class="form-field">
+<div class="form-field form-field__agree">
 	<p>
 		<!-- Statement of agreement to pledge, link to further info maybe? -->
 	</p>

plugins/wporg-5ftf/views/inputs-pledge-org-email.php

@@ -7,17 +7,20 @@ namespace WordPressDotOrg\FiveForTheFuture\View;
 
 <div class="form-field">
 	<label for="5ftf-pledge-email">
-		<?php esc_html_e( 'Contact Email', 'wordpressorg' ); ?>
+		<?php esc_html_e( 'Administrator Email', 'wordpressorg' ); ?>
 	</label>
 	<input
 		type="email"
-		class="large-text"
 		id="5ftf-pledge-email"
 		name="org-pledge-email"
 		value="<?php echo esc_attr( $data['org-pledge-email'] ); ?>"
 		required
+		aria-describedby="5ftf-pledge-email-help"
 		<?php echo $readonly ? 'readonly' : ''; ?>
 	/>
+	<p id="5ftf-pledge-email-help">
+		<?php esc_html_e( 'This email will be used to verify your organization’s contribution profile, and later manage any changes.', 'wordpressorg' ); ?>
+	</p>
 
 	<?php if ( is_admin() ) : ?>
 		<?php if ( $data['pledge-email-confirmed'] ) : ?>

plugins/wporg-5ftf/views/inputs-pledge-org-info.php

@@ -11,7 +11,6 @@ namespace WordPressDotOrg\FiveForTheFuture\View;
 	</label>
 	<input
 		type="text"
-		class="large-text"
 		id="5ftf-org-name"
 		name="org-name"
 		value="<?php echo esc_attr( $data['org-name'] ); ?>"
@@ -20,13 +19,25 @@ namespace WordPressDotOrg\FiveForTheFuture\View;
 	/>
 </div>
 
+<div class="form-field form-field__logo">
+	<label for="5ftf-org-logo">
+		<?php esc_html_e( 'Logo', 'wordpressorg' ); ?>
+	</label>
+	<br />
+	<?php /* @todo Display existing logo here */ ?>
+	<input
+		type="file"
+		id="5ftf-org-logo"
+		name="org-logo"
+	/>
+</div>
+
 <div class="form-field">
 	<label for="5ftf-org-url">
 		<?php esc_html_e( 'Website Address', 'wordpressorg' ); ?>
 	</label>
 	<input
 		type="url"
-		class="large-text"
 		id="5ftf-org-url"
 		name="org-url"
 		value="<?php echo esc_attr( $data['org-url'] ); ?>"
@@ -40,12 +51,26 @@ namespace WordPressDotOrg\FiveForTheFuture\View;
 		<?php esc_html_e( 'Organization Blurb', 'wordpressorg' ); ?>
 	</label>
 	<textarea
-		class="large-text"
 		id="5ftf-org-description"
 		name="org-description"
+		rows="5"
 		required
 		<?php echo $readonly ? 'readonly' : ''; ?>
-	>
+	><?php /* phpcs:ignore -- php tags should be on the same line as textarea to prevent extra whitespace */
-		<?php echo esc_html( $data['org-description'] ); ?>
+		echo esc_html( $data['org-description'] );
-	</textarea>
+	/* phpcs:ignore */ ?></textarea>
+</div>
+
+<div class="form-field">
+	<label for="5ftf-org-number-employees">
+		<?php esc_html_e( 'Number of Employees Being Contributed', 'wordpressorg' ); ?>
+	</label>
+	<input
+		type="number"
+		id="5ftf-org-number-employees"
+		name="org-number-employees"
+		value="<?php echo esc_attr( $data['org-number-employees'] ); ?>"
+		required
+		<?php echo $readonly ? 'readonly' : ''; ?>
+	/>
 </div>

plugins/wporg-5ftf/views/inputs-pledge-org-logo.php

@@ -1,17 +0,0 @@
-<?php
-namespace WordPressDotOrg\FiveForTheFuture\View;
-
-/** @var array $data */
-/** @var bool  $readonly */
-?>
-
-<div class="form-field">
-	<label for="5ftf-org-logo">
-		<?php esc_html_e( 'Logo', 'wordpressorg' ); ?>
-	</label>
-	<input
-		type="file"
-		id="5ftf-org-logo"
-		name="org-logo"
-	/>
-</div>

themes/wporg-5ftf/css/objects/_objects.scss

@@ -8,5 +8,6 @@
 @import "../../../pub/wporg/css/objects/notices";
 @import "buttons";
 @import "image";
+@import "pledge-form";
 @import "pullquote";
 @import "site-header";

themes/wporg-5ftf/css/objects/_pledge-form.scss

@@ -0,0 +1,59 @@
+.pledge-form {
+
+	.form-field {
+		margin-bottom: ms(4);
+
+		label {
+			margin-bottom: ms(-5);
+			display: inline-block;
+			font-weight: 600;
+			font-size: 16px;
+			color: $color__text-input;
+		}
+
+		input[type="text"],
+		input[type="url"],
+		input[type="number"],
+		input[type="email"],
+		textarea {
+			display: block;
+			width: 100%;
+			padding: ms(-5) ms(-2);
+			background: $color__background-input;
+			border: 1px solid $color__border-input;
+			box-shadow: none;
+		}
+
+		input[type="number"] {
+			max-width: 10em;
+			height: auto;
+		}
+
+		> p {
+			margin-top: ms(-5);
+			font-size: ms(-2);
+		}
+	}
+
+	.form-field__logo {
+
+		input {
+			padding: ms(-6) 0;
+			line-height: 1;
+		}
+	}
+
+	.form-field__agree {
+
+		label {
+			margin-bottom: 0;
+		}
+	}
+	
+	input[type="submit"] {
+		display: inline-block;
+		height: auto;
+		padding: ms(-3) ms(0);
+		font-weight: 600;
+	}
+}

themes/wporg-5ftf/css/settings/_colors.scss

@@ -4,6 +4,7 @@ $color__background-hr: #eee;
 $color__background-button: #eee;
 $color__background-pre: #eee;
 $color__background-ins: #fff9c0;
+$color__background-input: #f9f9f9;
 
 $color__text-screen: #21759b;
 $color__text-input: #32373c;