ONBOARD-315 • One-Step Registration Form

ONBOARD-315

One-Step Registration Form

NB: We assume that this Jira ticket went through a series of refinement sessions with the Engineering team and other team members (UX/UI, Product management, etc.)

1. Business Problem

Our current registration process requires the user to go through a 3-step process, with no clear option to return back to the previous step, as well as a recaptcha process. This overcomplicates the flow before the user moves on to the next multi-step process - working hours, providers, services, design, etc.

2. Aim

Create an optimized one-page registration form with logical field ordering, clear required field indicators, and intelligent auto-generation of company login URLs. The goal is to reduce registration time, and improve conversion.

3. User Story

As a business owner signing up for SimplyBook.me,
I want to complete a simple, well-organized one-page registration form,
So that I can quickly start using the booking system without confusion or frustration.

Form Field Structure (Grouped Sections)

Section	Fields	Required	Visual Design
User Information	Your name, Your business email, Password	✅ All required	Light gray background, rounded corners
Business Information	Your business name, Company login (URL), Business category, Phone number	✅ Required (except Phone)	Light gray background, rounded corners
Business Address	Country, State/Region, City, ZIP, Street address	✅ Required (except State)	Light gray background, rounded corners
Terms & Opt-ins	Terms*, Marketing, Marketplace	✅ Terms required ⚠️ Others optional	Below sections, with border separator

✅ 4. Acceptance Criteria

AC1: Grouped Form Structure & Field Order

Scenario: User views registration page with grouped sections

GIVEN I am a new user visiting the registration page

THEN I should see a single-page form with fields grouped into logical sections

AND I should see a note "* Required fields" near the top

AND all required fields should be marked with red asterisk (*)

AND the form should be organized into 3 main sections:

Section 1: User Information

• Your name * & Your business email * (side by side)

• Password * (with show/hide toggle)

Section 2: Business Information

• Your business name *

• Company login (part of URL) * (auto-generates from business name)

• Business category * & Phone number (side by side)

Section 3: Business Address

• Country * & State/Region (side by side)

• City * & ZIP * (side by side)

• Street address *

AND Terms checkbox *, Marketing checkbox, Marketplace checkbox should appear after all sections

AND "Sign up now" button should be at the bottom

AC2: Password Field Functionality

Scenario: Password field has show/hide toggle

GIVEN I am filling out the password field

THEN I should see an eye icon button next to the password input

WHEN I click the eye icon

THEN the password should toggle between visible and hidden

AND the icon should change to indicate state

AND password should require minimum 8 characters

AC3: Company Login Auto-Generation

Scenario: Company login auto-generates from business name

GIVEN I am on the registration form

WHEN I type "Your business name" = "John's Café & Spa!"

THEN the "Company login" field should auto-populate with "johns-cafe-spa"

AND the URL preview should show "https://johns-cafe-spa.simplybook.me"

AND the conversion rules should be:

• Convert to lowercase

• Remove special characters (keep only a-z, 0-9, hyphens)

• Replace spaces with hyphens

• Remove consecutive hyphens

• Remove leading/trailing hyphens

AND the field should remain editable

AND a warning should display: "⚠️ Cannot be changed later"

AC4: Required Field Indicators

Scenario: All required fields are clearly marked

GIVEN I am viewing the registration form

THEN I should see "* Required fields" note at the top

AND required field labels should display red asterisk (*) after label text

AND optional fields should NOT have asterisks: Phone number, State/Region

AC5: Form Validation & Submission

Scenario: User submits complete form

GIVEN I have filled all required fields

AND I have checked "I agree to Terms and Conditions"

WHEN I click "Sign up now"

THEN the form should validate all required fields

AND the account should be created

AND a confirmation email should be sent to the user

AND the user should receive the 6-digit confirmation code in the email

Scenario: User tries to submit with missing fields

WHEN I click "Sign up now" with empty required fields

THEN browser should prevent submission

AND native validation messages should appear

AND page should scroll to first empty field

AC6: Website Responsiveness

Scenario: Form displays correctly on different screen sizes

GIVEN I am viewing the registration form on a website

THEN the form should adapt to different screen sizes

AND form should be scrollable without horizontal overflow

AND all form elements should be properly visible and accessible

AC7: reCAPTCHA v3 Integration

Scenario: Invisible reCAPTCHA v3 protects form submission

GIVEN I am on the registration page

THEN I should NOT see any reCAPTCHA checkbox or "I am not a robot" challenge

AND reCAPTCHA v3 should load automatically in the background

WHEN I fill out the form and click "Sign up now"

THEN reCAPTCHA should generate a token automatically

AND the token should be sent with form data to backend

AND backend should verify token with Google before creating account

AND if reCAPTCHA score < 0.5, registration should be blocked

AND user should see generic error: "Registration failed. Please try again."

Scenario: reCAPTCHA v3 technical implementation

GIVEN reCAPTCHA v3 is properly configured

THEN reCAPTCHA script should load from https://www.google.com/recaptcha/api.js

AND site key should be configured for "registration" action

AND token should be generated on form submit (not page load)

AND token should expire after 2 minutes

AND backend verification should use secret key

AND score threshold should be configurable (default 0.5)

📊 5. Amplitude Event Tracking & Success Metrics

Event 1: registration_page_viewed

Funnel Start

Trigger Point

When registration page loads and becomes visible

Event Properties

Property	Type	Example
`page_url`	String	https://simplybook.it/uk/default/registration
`device_type`	String	desktop \| tablet
`referrer`	String	google_search \| facebook_ad \| direct

Implementation Code

// Track page view on load
document.addEventListener('DOMContentLoaded', () => {
      amplitude.track('registration_page_viewed', {
        page_url: window.location.href,
        device_type: getDeviceType(), // desktop | tablet
        referrer: getReferrerSource(),
        utm_source: getURLParam('utm_source') || 'direct',
        session_id: getSessionId(),
        timestamp: Date.now()
      });
});

Event 2: registration_form_started

Engagement

Trigger Point

When user focuses on first input field

Implementation Code

let formStarted = false;

document.querySelectorAll('input, select').forEach(field => {
  field.addEventListener('focus', function() {
    if (!formStarted) {
      formStarted = true;
      
      amplitude.track('registration_form_started', {
        first_field_focused: this.id,
        device_type: getDeviceType(), // desktop | tablet
        session_id: getSessionId()
      });
      
      sessionStorage.setItem('form_start_time', Date.now());
    }
  }, { once: true });
});

Event 3: registration_completed

Conversion (Primary KPI)

Trigger Point

When account successfully created

Event Properties

Property	Type	Example
`time_to_complete`	Number (seconds)	185 (3 min 5 sec)
`business_category`	String	medical \| sports \| beauty
`country`	String	US \| UK \| UA
`marketing_opt_in`	Boolean	true \| false

Implementation Code

// reCAPTCHA v3 implementation
function initializeRecaptcha() {
  grecaptcha.ready(() => {
    // reCAPTCHA is ready, no visible UI needed
    console.log('reCAPTCHA v3 initialized');
  });
}

function handleSubmit(event) {
  event.preventDefault();
  
  const formStartTime = sessionStorage.getItem('form_start_time');
  const timeToComplete = (Date.now() - formStartTime) / 1000;
  
  // Generate reCAPTCHA token
  grecaptcha.ready(() => {
    grecaptcha.execute('YOUR_SITE_KEY', { action: 'registration' })
      .then(token => {
        const formData = {
          userName: document.getElementById('userName').value,
          email: document.getElementById('email').value,
          businessName: document.getElementById('businessName').value,
          category: document.getElementById('category').value,
          country: document.getElementById('country').value,
          marketingOptIn: document.getElementById('marketing').checked,
          recaptchaToken: token // Include reCAPTCHA token
        };
        
        fetch('/api/register', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify(formData)
        }).then(response => {
          if (response.ok) {
                   amplitude.track('registration_completed', {
                     time_to_complete: timeToComplete,
                     business_category: formData.category,
                     country: formData.country,
                     marketing_opt_in: formData.marketingOptIn,
                     device_type: getDeviceType(), // desktop | tablet
                     session_id: getSessionId()
                   });
            
            window.location.href = '/dashboard';
          } else {
            // Handle reCAPTCHA failure or other errors
            alert('Registration failed. Please try again.');
          }
        });
      });
  });
}

// Load reCAPTCHA script
const script = document.createElement('script');
script.src = 'https://www.google.com/recaptcha/api.js?render=YOUR_SITE_KEY';
script.onload = initializeRecaptcha;
document.head.appendChild(script);