Skip to content

WIP: Forms: PoC: Fullscreen mode. #43235

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 4 commits into
base: trunk
Choose a base branch
from
Open

WIP: Forms: PoC: Fullscreen mode. #43235

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
ec2c913
working!
lezama Apr 24, 2025
e917997
changelog
lezama Apr 24, 2025
cb6258f
fix js loading
lezama Apr 24, 2025
f5db451
fix admin
lezama Apr 24, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions projects/packages/forms/changelog/add-forms-fullscreen-mode
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
Significance: patch
Type: added

Forms: Full screen mode
18 changes: 9 additions & 9 deletions projects/packages/forms/src/blocks/contact-form/class-contact-form-block.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -260,6 +260,15 @@ public static function load_editor_scripts() {
return;
}

// Create a Contact_Form instance to get the default values
$dashboard_view_switch = new Dashboard_View_Switch();
$contact_form = new Contact_Form( array() );
$defaults = $contact_form->defaults;
$admin_url = $dashboard_view_switch->get_forms_admin_url( 'spam' );
$akismet_active_with_key = Jetpack::is_akismet_active();
$akismet_key_url = admin_url( 'admin.php?page=akismet-key-config' );
$preferred_view = $dashboard_view_switch->get_preferred_view();

$handle = 'jp-forms-blocks';

Assets::register_script(
Expand All @@ -275,15 +284,6 @@ public static function load_editor_scripts() {
)
);

// Create a Contact_Form instance to get the default values
$dashboard_view_switch = new Dashboard_View_Switch();
$contact_form = new Contact_Form( array() );
$defaults = $contact_form->defaults;
$admin_url = $dashboard_view_switch->get_forms_admin_url( 'spam' );
$akismet_active_with_key = Jetpack::is_akismet_active();
$akismet_key_url = admin_url( 'admin.php?page=akismet-key-config' );
$preferred_view = $dashboard_view_switch->get_preferred_view();

$data = array(
'defaults' => array(
'to' => $defaults['to'],
Expand Down
1 change: 1 addition & 0 deletions projects/packages/forms/src/blocks/contact-form/edit.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,7 @@ import NewsletterIntegrationSettings from './components/jetpack-newsletter-integ
import SalesforceLeadFormSettings from './components/jetpack-salesforce-lead-form/jetpack-salesforce-lead-form-settings';
import VariationPicker from './variation-picker';
import './util/form-styles.js';
import './util/fullscreen-link-generator.js';

const validFields = filter( childBlocks, ( { settings } ) => {
return (
Expand Down
198 changes: 198 additions & 0 deletions projects/packages/forms/src/blocks/contact-form/util/form-styles.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -130,3 +130,201 @@ window.jetpackForms.generateStyleVariables = function ( formNode ) {
'--jetpack--contact-form--button-outline--line-height': buttonOutlineLineHeight,
};
};

// Add fullscreen form styles
const fullscreenStyles = `
.jetpack-contact-form-fullscreen {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 999999;
background-color: rgba(255, 255, 255, 0.98);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
overflow: auto;
padding: 2rem;
}

.jetpack-contact-form-fullscreen .contact-form {
max-width: 600px;
width: 100%;
box-shadow: 0 5px 30px rgba(0, 0, 0, 0.1);
border-radius: 8px;
padding: 40px;
background: #fff;
position: relative;
}

.jetpack-contact-form-progress {
position: fixed;
top: 0;
left: 0;
height: 4px;
background-color: #0675c4;
transition: width 0.3s ease;
}

.jetpack-contact-form-step {
transition: opacity 0.3s ease, transform 0.3s ease;
opacity: 1;
transform: translateY(0);
}

.jetpack-contact-form-step:not(:first-child) {
opacity: 0;
transform: translateY(20px);
}

.jetpack-contact-form-step:not(.is-active) {
animation: slide-in 0.4s forwards;
}

@keyframes slide-in {
0% {
opacity: 0;
transform: translateY(20px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}

.jetpack-contact-form-nav {
display: flex;
justify-content: space-between;
margin-top: 30px;
}

.jetpack-contact-form-prev,
.jetpack-contact-form-next {
background-color: #0675c4;
color: white;
border: none;
padding: 10px 20px;
border-radius: 4px;
cursor: pointer;
font-size: 16px;
transition: background-color 0.2s ease;
}

.jetpack-contact-form-prev:disabled {
background-color: #ccc;
cursor: not-allowed;
}

.jetpack-contact-form-prev:not(:disabled):hover,
.jetpack-contact-form-next:hover {
background-color: #055c9d;
}

.jetpack-contact-form-close {
position: fixed;
top: 20px;
right: 20px;
width: 40px;
height: 40px;
background-color: rgba(0, 0, 0, 0.1);
border: none;
border-radius: 50%;
font-size: 24px;
line-height: 40px;
text-align: center;
cursor: pointer;
transition: background-color 0.2s ease;
z-index: 1000000;
}

.jetpack-contact-form-close:hover {
background-color: rgba(0, 0, 0, 0.2);
}

.jetpack-contact-form-fullscreen .grunion-field-wrap label {
font-size: 1.2em;
margin-bottom: 12px;
display: block;
}

.jetpack-contact-form-fullscreen .grunion-field-wrap input[type="text"],
.jetpack-contact-form-fullscreen .grunion-field-wrap input[type="email"],
.jetpack-contact-form-fullscreen .grunion-field-wrap input[type="url"],
.jetpack-contact-form-fullscreen .grunion-field-wrap input[type="tel"],
.jetpack-contact-form-fullscreen .grunion-field-wrap textarea,
.jetpack-contact-form-fullscreen .grunion-field-wrap select {
width: 100%;
padding: 12px;
font-size: 16px;
border-radius: 4px;
border: 1px solid #ddd;
}

.jetpack-contact-form-fullscreen .grunion-field-submit-wrap input[type="submit"] {
width: 100%;
padding: 12px 20px;
font-size: 16px;
border-radius: 4px;
background-color: #0675c4;
color: white;
border: none;
cursor: pointer;
transition: background-color 0.2s ease;
}

.jetpack-contact-form-fullscreen .grunion-field-submit-wrap input[type="submit"]:hover {
background-color: #055c9d;
}

/* Validation styling */
.jetpack-contact-form-error-message {
color: #d63638;
font-size: 14px;
margin-top: 5px;
padding: 5px 0;
font-weight: 500;
}

.jetpack-contact-form-fullscreen .grunion-field-wrap input.has-error,
.jetpack-contact-form-fullscreen .grunion-field-wrap textarea.has-error,
.jetpack-contact-form-fullscreen .grunion-field-wrap select.has-error {
border-color: #d63638;
box-shadow: 0 0 0 1px #d63638;
}

.jetpack-contact-form-validation-errors {
background-color: #fcf0f1;
border-left: 4px solid #d63638;
color: #d63638;
margin: 0 0 15px 0;
padding: 8px 12px;
display: none;
}

.jetpack-contact-form-fullscreen input[type="checkbox"].has-error + label,
.jetpack-contact-form-fullscreen input[type="radio"].has-error + label {
color: #d63638;
}

/* Field animation */
.jetpack-contact-form-step {
animation: form-field-appear 0.3s forwards;
}

@keyframes form-field-appear {
0% {
opacity: 0;
transform: translateY(10px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
`;

const style = document.createElement( 'style' );
style.appendChild( document.createTextNode( fullscreenStyles ) );
document.head.appendChild( style );
Loading
Loading