Automattic / Automattic/jetpack

Contact Form Block: allow same-line labels

Open
#40,738 3 comments 0 reactions 0 assignees View on GitHub
[Block] Form [Experiment] AI labels added [Feature Group] Content Management [Feature] Forms [Feature] Forms Blocks [Pri] Normal Customer Report [LEGACY] Enhancement New Feature Triaged
Dominant language
PHP
Stars
1.8k
Forks
898
Avg merge
1d 18h
Merged PRs (30d)
774

Description

### What

Right now our form block puts the field label and the field itself on separate lines, like this:

![add-form-field](https://user-images.githubusercontent.com/3476361/197656462-554116ae-0616-4e48-b606-5907511b13f3.png)

This user would like the option to let the labels show up next to the fields, like this:

Screen Shot 2022-10-24 at 6 49 16 PM

### Why

Just a design preference; passing along [a request from this thread.](https://wordpress.com/forums/topic/single-line-contact-form/)

### How

There are lots of ways we could do this with float or flex or whatever, but for the front end, a toggle on the form block settings would work.

Contributor guide

Open the contributing guide

Research direction

Start by locating the Contact Form Block’s settings and front-end rendering entry points. Confirm how the existing stacked label layout is produced, then add the optional same-line presentation and verify both toggle states in the block preview and rendered form.

Written by the indexing model from the issue text.

Assessment

Tech stack
php, react, wordpress
Domain
design, frontend
Issue type
Feature
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.