Create Pledge: Make form functional (#31)

This broadly enables & styles the pledge forms across the frontend and wp-admin. - Switches field `readonly` control to a variable called `$readonly` - Create `PledgeMeta\get_pledge_meta()` which will fetch data from `$_POST`, a pledge post, or defaults. - Add Number of Employees field - Update form content to match mockup: - fields now have help text - success message uses content from mockup - logo field is moved to the "org info" section - Style form in theme, add some similar styles to the admin Fixes #7, fixes #28
2025-04-19 01:43:44 +03:00 · 2019-10-08 18:29:35 -04:00 · 2019-10-08 18:29:35 -04:00 · 0f675ae6c3
parent 0111c36db4
commit 0f675ae6c3
13 changed files with 313 additions and 127 deletions
--- a/plugins/wporg-5ftf/assets/css/admin.css
+++ b/plugins/wporg-5ftf/assets/css/admin.css
@ -1 +1,37 @@
-/* rounded corners on contributor avatar */
+.pledge-form .form-field {
+	margin-bottom: 16px;
+}
+
+.pledge-form .form-field label {
+	margin-bottom: 8px;
+	display: inline-block;
+}
+
+.pledge-form .form-field input[type=text],
+.pledge-form .form-field input[type=url],
+.pledge-form .form-field input[type=number],
+.pledge-form .form-field input[type=email],
+.pledge-form .form-field textarea {
+	display: block;
+	width: 100%;
+	padding: 8px;
+}
+
+.pledge-form .form-field input[type=number] {
+	max-width: 10em;
+	height: auto;
+}
+
+.pledge-form .form-field > p {
+	margin-top: 8px;
+	font-size: 0.9em;
+}
+
+.pledge-form .form-field__logo input {
+	padding: 8px 0;
+	line-height: 1;
+}
+
+.pledge-form .form-field__agree label {
+	margin-bottom: 0;
+}
--- a/plugins/wporg-5ftf/includes/pledge-form.php
+++ b/plugins/wporg-5ftf/includes/pledge-form.php
@ -1,6 +1,6 @@
 <?php
 /**
- *
+ * Render and process the pledge forms.
 */

 namespace WordPressDotOrg\FiveForTheFuture\PledgeForm;
@ -25,6 +25,7 @@ function render_form_new() {
 	$action   = filter_input( INPUT_POST, 'action' );
 	$messages = [];
 	$complete = false;
+	$data     = PledgeMeta\get_pledge_meta();

 	if ( 'Submit Pledge' === $action ) {
 		$processed = process_form_new();
@ -37,6 +38,7 @@ function render_form_new() {
 	}

 	ob_start();
+	$readonly = false;
 	require FiveForTheFuture\PATH . 'views/form-pledge-new.php';

 	return ob_get_clean();
@ -48,7 +50,7 @@ function render_form_new() {
 * @return string|WP_Error String "success" if the form processed correctly. Otherwise WP_Error.
 */
 function process_form_new() {
-	$submission = filter_input_array( INPUT_POST, get_input_filters() );
+	$submission = filter_input_array( INPUT_POST, PledgeMeta\get_input_filters() );

 	$has_required = PledgeMeta\has_required_pledge_meta( $submission );

@ -78,7 +80,7 @@ function process_form_new() {
 		return $created;
 	}

-	//PledgeMeta\save_pledge_meta( $created, $submission );
+	PledgeMeta\save_pledge_meta( $created, $submission );

 	return 'success';
 }
@ -93,6 +95,9 @@ function render_form_manage() {
 	$messages = [];
 	$updated  = false;

+	// @todo Get pledge ID from somewhere.
+	$data = PledgeMeta\get_pledge_meta();
+
 	if ( 'Update Pledge' === $action ) {
 		$processed = process_form_manage();

@ -104,6 +109,7 @@ function render_form_manage() {
 	}

 	ob_start();
+	$readonly = false;
 	require FiveForTheFuture\PATH . 'views/form-pledge-manage.php';

 	return ob_get_clean();
@ -115,7 +121,7 @@ function render_form_manage() {
 * @return string|WP_Error String "success" if the form processed correctly. Otherwise WP_Error.
 */
 function process_form_manage() {
-	$submission = filter_input_array( INPUT_POST, get_input_filters() );
+	$submission = filter_input_array( INPUT_POST, PledgeMeta\get_input_filters() );

 	$has_required = PledgeMeta\has_required_pledge_meta( $submission );

@ -133,26 +139,6 @@ function process_form_manage() {
 	}
 }

-/**
- *
- *
- * @return array
- */
-function get_input_filters() {
-	return array_merge(
-		// Inputs that correspond to meta values.
-		wp_list_pluck( PledgeMeta\get_pledge_meta_config( 'user_input' ), 'php_filter' ),
-		// Inputs with no corresponding meta value.
-		array(
-			'contributor-wporg-usernames' => [
-				'filter' => FILTER_SANITIZE_STRING,
-				'flags'  => FILTER_REQUIRE_ARRAY,
-			],
-			'pledge-agreement'            => FILTER_VALIDATE_BOOLEAN,
-		)
-	);
-}
-
 /**
 *
 *
@ -166,8 +152,10 @@ function has_existing_pledge( $domain, int $current_pledge_id = 0 ) {
 		'post_type'   => Pledge\CPT_ID,
 		'post_status' => array( 'pending', 'publish' ),
 		'meta_query'  => array(
-			'key'   => PledgeMeta\META_PREFIX . 'org-domain',
-			'value' => $domain,
+			array(
+				'key'   => PledgeMeta\META_PREFIX . 'org-domain',
+				'value' => $domain,
+			),
 		),
 	);

--- a/plugins/wporg-5ftf/includes/pledge-meta.php
+++ b/plugins/wporg-5ftf/includes/pledge-meta.php
@ -13,10 +13,11 @@ defined( 'WPINC' ) || die();

 const META_PREFIX = FiveForTheFuture\PREFIX . '_';

-add_action( 'init', __NAMESPACE__ . '\register_pledge_meta' );
-add_action( 'admin_init', __NAMESPACE__ . '\add_meta_boxes' );
-add_action( 'save_post', __NAMESPACE__ . '\save_pledge', 10, 2 );
+add_action( 'init',                               __NAMESPACE__ . '\register_pledge_meta' );
+add_action( 'admin_init',                         __NAMESPACE__ . '\add_meta_boxes' );
+add_action( 'save_post',                          __NAMESPACE__ . '\save_pledge',           10, 2 );
 add_action( 'updated_' . Pledge\CPT_ID . '_meta', __NAMESPACE__ . '\update_generated_meta', 10, 4 );
+add_action( 'admin_enqueue_scripts',              __NAMESPACE__ . '\enqueue_assets' );

 /**
 * Define pledge meta fields and their properties.
@ -25,30 +26,36 @@ add_action( 'updated_' . Pledge\CPT_ID . '_meta', __NAMESPACE__ . '\update_gener
 */
 function get_pledge_meta_config( $context = '' ) {
 	$user_input = array(
-		'org-description' => array(
+		'org-description'      => array(
 			'single'            => true,
 			'sanitize_callback' => 'sanitize_text_field',
 			'show_in_rest'      => true,
 			'php_filter'        => FILTER_SANITIZE_STRING,
 		),
-		'org-name'        => array(
+		'org-name'             => array(
 			'single'            => true,
 			'sanitize_callback' => 'sanitize_text_field',
 			'show_in_rest'      => true,
 			'php_filter'        => FILTER_SANITIZE_STRING,
 		),
-		'org-url'         => array(
+		'org-url'              => array(
 			'single'            => true,
 			'sanitize_callback' => 'esc_url_raw',
 			'show_in_rest'      => true,
 			'php_filter'        => FILTER_VALIDATE_URL,
 		),
-		'pledge-email'    => array(
+		'org-pledge-email'     => array(
 			'single'            => true,
 			'sanitize_callback' => 'sanitize_email',
 			'show_in_rest'      => false,
 			'php_filter'        => FILTER_VALIDATE_EMAIL,
 		),
+		'org-number-employees' => array(
+			'single'            => true,
+			'sanitize_callback' => 'absint',
+			'show_in_rest'      => false,
+			'php_filter'        => FILTER_VALIDATE_INT,
+		),
 	);

 	$generated = array(
@ -135,17 +142,20 @@ function add_meta_boxes() {
 * @param array   $box
 */
 function render_meta_boxes( $pledge, $box ) {
-	$editable = current_user_can( 'edit_pledge', $pledge->ID );
+	$readonly = ! current_user_can( 'edit_page', $pledge->ID );
 	$data     = array();

 	foreach ( get_pledge_meta_config() as $key => $config ) {
 		$data[ $key ] = get_post_meta( $pledge->ID, META_PREFIX . $key, $config['single'] );
 	}

+	echo '<div class="pledge-form">';
+
 	switch ( $box['id'] ) {
 		case 'pledge-email':
 			require FiveForTheFuture\get_views_path() . 'inputs-pledge-org-email.php';
 			break;
+
 		case 'org-info':
 			require FiveForTheFuture\get_views_path() . 'inputs-pledge-org-info.php';
 			break;
@ -154,43 +164,8 @@ function render_meta_boxes( $pledge, $box ) {
 			require FiveForTheFuture\get_views_path() . 'inputs-pledge-contributors.php';
 			break;
 	}
-}

-/**
- * Check that an array contains values for all required keys.
- *
- * @return bool|WP_Error True if all required values are present. Otherwise WP_Error.
- */
-function has_required_pledge_meta( array $submission ) {
-	$error = new WP_Error();
-
-	$required = array_keys( get_pledge_meta_config( 'user_input' ) );
-
-	foreach ( $required as $key ) {
-		if ( ! isset( $submission[ $key ] ) || is_null( $submission[ $key ] ) ) {
-			$error->add(
-				'required_field_empty',
-				sprintf(
-					__( 'The <code>%s</code> field does not have a value.', 'wporg' ),
-					sanitize_key( $key )
-				)
-			);
-		} elseif ( false === $submission[ $key ] ) {
-			$error->add(
-				'required_field_invalid',
-				sprintf(
-					__( 'The <code>%s</code> field has an invalid value.', 'wporg' ),
-					sanitize_key( $key )
-				)
-			);
-		}
-	}
-
-	if ( ! empty( $error->get_error_messages() ) ) {
-		return $error;
-	}
-
-	return true;
+	echo '</div>';
 }

 /**
@ -209,7 +184,7 @@ function save_pledge( $pledge_id, $pledge ) {
 		return;
 	}

-	if ( ! $pledge instanceof WP_Post || $pledge->post_type !== Pledge\CPT_ID ) {
+	if ( ! $pledge instanceof WP_Post || Pledge\CPT_ID !== $pledge->post_type ) {
 		return;
 	}

@ -217,7 +192,7 @@ function save_pledge( $pledge_id, $pledge ) {
 		return;
 	}

-	if ( ( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE ) || $pledge->post_status === 'auto-draft' ) {
+	if ( ( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE ) || 'auto-draft' === $pledge->post_status ) {
 		return;
 	}

@ -279,6 +254,94 @@ function update_generated_meta( $meta_id, $object_id, $meta_key, $_meta_value )
 	}
 }

+/**
+ * Check that an array contains values for all required keys.
+ *
+ * @return bool|WP_Error True if all required values are present. Otherwise WP_Error.
+ */
+function has_required_pledge_meta( array $submission ) {
+	$error = new WP_Error();
+
+	$required = array_keys( get_pledge_meta_config( 'user_input' ) );
+
+	foreach ( $required as $key ) {
+		if ( ! isset( $submission[ $key ] ) || is_null( $submission[ $key ] ) ) {
+			$error->add(
+				'required_field_empty',
+				sprintf(
+					__( 'The <code>%s</code> field does not have a value.', 'wporg' ),
+					sanitize_key( $key )
+				)
+			);
+		} elseif ( false === $submission[ $key ] ) {
+			$error->add(
+				'required_field_invalid',
+				sprintf(
+					__( 'The <code>%s</code> field has an invalid value.', 'wporg' ),
+					sanitize_key( $key )
+				)
+			);
+		}
+	}
+
+	if ( ! empty( $error->get_error_messages() ) ) {
+		return $error;
+	}
+
+	return true;
+}
+
+/**
+ * Get the input filters for submitted content.
+ *
+ * @return array
+ */
+function get_input_filters() {
+	return array_merge(
+		// Inputs that correspond to meta values.
+		wp_list_pluck( get_pledge_meta_config( 'user_input' ), 'php_filter' ),
+		// Inputs with no corresponding meta value.
+		array(
+			'contributor-wporg-usernames' => [
+				'filter' => FILTER_SANITIZE_STRING,
+				'flags'  => FILTER_REQUIRE_ARRAY,
+			],
+			'pledge-agreement'            => FILTER_VALIDATE_BOOLEAN,
+		)
+	);
+}
+
+/**
+ * Get the metadata for a given pledge, or a default set if no pledge is provided.
+ *
+ * @param int    $pledge_id
+ * @param string $context
+ * @return array Pledge data
+ */
+function get_pledge_meta( $pledge_id = 0, $context = '' ) {
+	// Get existing pledge, if it exists.
+	$pledge = get_post( $pledge_id );
+
+	$keys = get_pledge_meta_config( $context );
+	$meta = array();
+
+	// Get POST'd submission, if it exists.
+	$submission = filter_input_array( INPUT_POST, get_input_filters() );
+
+	foreach ( $keys as $key => $config ) {
+		if ( isset( $submission[ $key ] ) ) {
+			$meta[ $key ] = $submission[ $key ];
+		} else if ( $pledge instanceof WP_Post ) {
+			$meta_key = META_PREFIX . $key;
+			$meta[ $key ] = get_post_meta( $pledge->ID, $meta_key, true );
+		} else {
+			$meta[ $key ] = $config['default'] ?: '';
+		}
+	}
+
+	return $meta;
+}
+
 /**
 * Isolate the domain from a given URL and remove the `www.` if necessary.
 *
@ -292,3 +355,18 @@ function get_normalized_domain_from_url( $url ) {

 	return $domain;
 }
+
+/**
+ * Enqueue CSS file for admin page.
+ *
+ * @return void
+ */
+function enqueue_assets() {
+	$ver = filemtime( FiveForTheFuture\PATH . '/assets/css/admin.css' );
+	wp_register_style( '5ftf-admin', plugins_url( 'assets/css/admin.css', __DIR__ ), [], $ver );
+
+	$current_page = get_current_screen();
+	if ( Pledge\CPT_ID === $current_page->id ) {
+		wp_enqueue_style( '5ftf-admin' );
+	}
+}
--- a/plugins/wporg-5ftf/views/form-pledge-manage.php
+++ b/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>
--- a/plugins/wporg-5ftf/views/form-pledge-new.php
+++ b/plugins/wporg-5ftf/views/form-pledge-new.php
@ -13,33 +13,41 @@ use function WordPressDotOrg\FiveForTheFuture\get_views_path;

 <?php if ( ! empty( $messages ) ) : ?>

+	<div class="notice notice-error notice-alt">
 	<?php foreach ( $messages as $message ) : ?>
-		<div class="notice notice-error">
-			<?php echo wpautop( $message ); ?>
-		</div>
+		<p><?php echo wp_kses_post( $message ); ?></p>
 	<?php endforeach; ?>
+	</div>

 <?php endif; ?>

 <?php if ( true === $complete ) : ?>

-	<div class="notice notice-info">
-		<?php echo wpautop( __( 'Thank you for your submission. You will receive an email confirmation.', 'wporg' ) ); ?>
+	<div class="notice notice-success notice-alt">
+		<p><?php esc_html_e( 'Thanks for pledging Five for the Future! Your new pledge profile has been created, and we’ve emailed you a link you can use to edit your pledge in the future. Your contributors have also been emailed a link to confirm their contributions with your organization.', 'wporg' ); ?></p>
+
+		<p><?php esc_html_e( 'Once your pledge has been approved by a moderator, it will appear in the pledges list.', 'wporg' ); ?></p>
+
+		<p><?php esc_html_e( 'Want to hire additional employees to contribute to WordPress? Post a job listing on jobs.wordpress.net.', 'wporg' ); ?></p>
 	</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>

--- a/plugins/wporg-5ftf/views/inputs-pledge-contributors.php
+++ b/plugins/wporg-5ftf/views/inputs-pledge-contributors.php
@ -1,9 +1,9 @@
 <?php
 namespace WordPressDotOrg\FiveForTheFuture\View;

-/** @var bool $editable */
-/** @var array $data */
 /** @var array $contributors */
+/** @var array $data */
+/** @var bool  $readonly */
 ?>

 <?php if ( empty( $contributors ) ) : ?>
@ -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>
-		<!-- Instructions for inputting wporg usernames -->
+	<p id="5ftf-pledge-contributors-help">
+		<?php esc_html_e( 'Separate each username with a comma.', 'wordpressorg' ); ?>
 	</p>
 </div>

--- a/plugins/wporg-5ftf/views/inputs-pledge-new-misc.php
+++ b/plugins/wporg-5ftf/views/inputs-pledge-new-misc.php
@ -1,11 +1,11 @@
 <?php
 namespace WordPressDotOrg\FiveForTheFuture\View;

-/** @var bool $editable */
 /** @var array $data */
+/** @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>
--- a/plugins/wporg-5ftf/views/inputs-pledge-org-email.php
+++ b/plugins/wporg-5ftf/views/inputs-pledge-org-email.php
@ -1,23 +1,26 @@
 <?php
 namespace WordPressDotOrg\FiveForTheFuture\View;

-/** @var bool $editable */
 /** @var array $data */
+/** @var bool  $readonly */
 ?>

 <div class="form-field">
-	<label for="5ftf-pledge-email" class="screen-reader-text">
-		<?php esc_html_e( 'Email', 'wordpressorg' ); ?>
+	<label for="5ftf-pledge-email">
+		<?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['pledge-email'] ); ?>"
+		value="<?php echo esc_attr( $data['org-pledge-email'] ); ?>"
 		required
-		<?php echo ( $editable ) ? '' : 'readonly'; ?>
+		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'] ) : ?>
--- a/plugins/wporg-5ftf/views/inputs-pledge-org-info.php
+++ b/plugins/wporg-5ftf/views/inputs-pledge-org-info.php
@ -1,8 +1,8 @@
 <?php
 namespace WordPressDotOrg\FiveForTheFuture\View;

-/** @var bool $editable */
 /** @var array $data */
+/** @var bool  $readonly */
 ?>

 <div class="form-field">
@ -11,12 +11,24 @@ 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'] ); ?>"
 		required
-		<?php echo ( $editable ) ? '' : 'readonly'; ?>
+		<?php echo $readonly ? 'readonly' : ''; ?>
+	/>
+</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>

@ -26,26 +38,39 @@ namespace WordPressDotOrg\FiveForTheFuture\View;
 	</label>
 	<input
 		type="url"
-		class="large-text"
 		id="5ftf-org-url"
 		name="org-url"
 		value="<?php echo esc_attr( $data['org-url'] ); ?>"
 		required
-		<?php echo ( $editable ) ? '' : 'readonly'; ?>
+		<?php echo $readonly ? 'readonly' : ''; ?>
 	/>
 </div>

 <div class="form-field">
 	<label for="5ftf-org-description">
-		<?php _e( 'Organization Blurb', 'wordpressorg' ); ?>
+		<?php esc_html_e( 'Organization Blurb', 'wordpressorg' ); ?>
 	</label>
 	<textarea
-		class="large-text"
 		id="5ftf-org-description"
 		name="org-description"
+		rows="5"
 		required
-		<?php echo ( $editable ) ? '' : 'readonly'; ?>
-	>
-		<?php echo esc_html( $data['org-description'] ); ?>
-	</textarea>
+		<?php echo $readonly ? 'readonly' : ''; ?>
+	><?php /* phpcs:ignore -- php tags should be on the same line as textarea to prevent extra whitespace */
+		echo esc_html( $data['org-description'] );
+	/* 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>
--- a/plugins/wporg-5ftf/views/inputs-pledge-org-logo.php
+++ b/plugins/wporg-5ftf/views/inputs-pledge-org-logo.php
@ -1,17 +0,0 @@
-<?php
-namespace WordPressDotOrg\FiveForTheFuture\View;
-
-/** @var bool $editable */
-/** @var array $data */
-?>
-
-<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>
--- a/themes/wporg-5ftf/css/objects/_objects.scss
+++ b/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";
--- a/themes/wporg-5ftf/css/objects/_pledge-form.scss
+++ b/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;
+	}
+}
--- a/themes/wporg-5ftf/css/settings/_colors.scss
+++ b/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;