Form-Builder-Plugin-Landing-Page

Form Builder Plugin Landing Page

Background: We are redesigning the www.powr.io/plugins/form-builder landing page. This new design will completely replace the previous page, this is not an A/B test.

Mock up: https://www.figma.com/file/ueUiMtNFaxnak9q0kxqucE/Landing-Page?node-id=408%3A400

Note: All copy on this page should be created as simple copies. Please pay close attention to capitalization.

✅[Existing logic] Scenario: Landing page should have WebApplication schema

Given I am on the Form Builder landing page

When I inspect the page

Then there should be a application/ld+json script

And it should contain the WebApplication schema

✅Scenario: Page has an SEO meta title in simple copies

Given I search for POWr Form Builder in Google

When I find the www.powr.io/plugins/form-builder page in the results

Then the meta title should read: Free Form Builder | Best Online Form Builder App 2020

Note: Currently this is hardcoded. See line 14, app_details/show.html

✅Scenario: Page has an SEO meta description in simple copies

Given I search for POWr Form Builder in Google

When I find the www.powr.io/plugins/form-builder page in the results

Then the meta description should read: No coding required. Get started free. Create any form for any website. Save time and collect more leads.

Note: Currently this is hardcoded. See line 14, app_details/show.html

Scenario: Page has Header section

Given I am on the www.powr.io/plugins/form-builder page

When I read the Header section

Then it should match the Tech specs and content in this mock up: https://www.figma.com/file/ueUiMtNFaxnak9q0kxqucE/Landing-Page?node-id=408%3A400

✅Scenario: Page has Navigation after the Header section

Given I am on the www.powr.io/plugins/form-builder page

When I go to the navigation section

Then it should match the Tech specs and content in this mock up: https://www.figma.com/file/ueUiMtNFaxnak9q0kxqucE/Landing-Page?node-id=408%3A400

❌Scenario: Navigation section should be fixed when the user scrolls down the page

Given I am on the www.powr.io/plugins/form-builder page

When I scroll down below the Navigation section

Then the Navigation bar should be in fixed position as I scroll down the page

Scenario: Navigation section should take original position when user scrolls back up

Given I am at the bottom of the www.powr.io/plugins/form-builder page

When I scroll back up to the top of the page

Then the Navigation bar should take its original position once I reach the Navigation/Overview section.

✅Scenario: Clicking on ‘Features’ scrolls down to Features section

Given I am on the www.powr.io/plugins/form-builder page

When I click on the ‘Features’ option in the Navigation menu

Then the page will scroll down to the top of ‘Features’ section

And the ‘Features’ link in the Navigation should switch to the blue ‘active’ state.

✅Scenario: Clicking on ‘Integrations’ scrolls down to Integrations section

Given I am on the www.powr.io/plugins/form-builder page

When I click on the ‘Integrations’ option in the Navigation menu

Then the page will scroll down to the top of ‘Integrations’ section

And the ‘Integrations’ link in the Navigation should switch to the blue ‘active’ state.

✅Scenario: Clicking on ‘Pricing’ scrolls down to Pricing section

Given I am on the www.powr.io/plugins/form-builder page

When I click on the ‘Pricing’ option in the Navigation menu

Then the page will scroll down to the top of ‘Pricing’ section

And the ‘Pricing’ link in the Navigation should switch to the blue ‘active’ state.

✅Scenario: Clicking on ‘Platforms’ scrolls down to Platforms section

Given I am on the www.powr.io/plugins/form-builder page

When I click on the ‘Platforms’ option in the Navigation menu

Then the page will scroll down to the top of ‘Platforms’ section

And the ‘Platforms’ link in the Navigation should switch to the blue ‘active’ state.

✅Scenario: Page has Overview section

Given I am on the www.powr.io/plugins/form-builder page

When I go to the Overview section

Then it should match the Tech specs and content in this mock up: https://www.figma.com/file/ueUiMtNFaxnak9q0kxqucE/Landing-Page?node-id=408%3A400

✅Scenario: Page has Quote section

Given I am on the www.powr.io/plugins/form-builder page

When I go to the Quote section

Then it should match the Tech specs and content in this mock up: https://www.figma.com/file/ueUiMtNFaxnak9q0kxqucE/Landing-Page?node-id=408%3A400

✅Scenario: Page has Features section

Given I am on the www.powr.io/plugins/form-builder page

When I go to the Features section

Then it should match the Tech specs and content in this mock up: https://www.figma.com/file/ueUiMtNFaxnak9q0kxqucE/Landing-Page?node-id=408%3A400

✅Scenario: Page has Integrations section

Given I am on the www.powr.io/plugins/form-builder page

When I go to the Integrations section

Then it should match the Tech specs and content in this mock up: https://www.figma.com/file/ueUiMtNFaxnak9q0kxqucE/Landing-Page?node-id=408%3A400

✅Scenario: Page has Testimonials section

Given I am on the www.powr.io/plugins/form-builder page

When I go to the Testimonials section

Then it should match the Tech specs and content in this mock up: https://www.figma.com/file/ueUiMtNFaxnak9q0kxqucE/Landing-Page?node-id=408%3A400

✅Scenario: Page has Pricing section

Given I am on the www.powr.io/plugins/form-builder page

When I go to the Pricing section

Then it should match the Tech specs and content in this mock up: https://www.figma.com/file/ueUiMtNFaxnak9q0kxqucE/Landing-Page?node-id=408%3A400

✅Scenario: Clicking ‘See All Features’ links to /pricing

Given I am on the www.powr.io/plugins/form-builder page

When I click on ‘See All Features’ in the Pricing section

Then I will be redirected to www.powr.io/pricing for Form Builder

✅Scenario: Clicking ‘See All Platforms’ opens platforms list

Given I am on the www.powr.io/plugins/form-builder page

When I click on ‘See All Platforms’ in the Platforms section

Then a modal will pop up that displays a full list of platforms

Tech note: This should match what we previously had on the Homepage.

✅Scenario: Page has Platforms list

Given I am on the www.powr.io/plugins/form-builder page

When I go to the Platforms section

Then it should match the Tech specs and content in this mock up: https://www.figma.com/file/ueUiMtNFaxnak9q0kxqucE/Landing-Page?node-id=408%3A400

✅Scenario: Page has Social Proof section above footer

Given I am on the www.powr.io/plugins/form-builder page

When I go to the Social Proof section

Then it should match the Tech specs and content in this mock up: https://www.figma.com/file/ueUiMtNFaxnak9q0kxqucE/Landing-Page?node-id=408%3A400

✅Scenario: Clicking ‘Get Started’ opens sign up modal

Given I am on the www.powr.io/plugins/form-builder page

When I click on the ‘Get Started’ button

Then it will open the sign up modal

✅Scenario: Page uses standard footer

Given I am on the www.powr.io/plugins/form-builder page

When I scroll to the footer

Then it should match the standard POWr footer.

❌Scenario: Page is mobile-optimized

Given I am on the www.powr.io/plugins/form-builder page

When I go to the Platforms section

Then it should match the mobile mock up in this file: https://www.figma.com/file/ueUiMtNFaxnak9q0kxqucE/Landing-Page?node-id=408%3A400

Scenario: Hide the Payments section for Ecwid/Shopify

Given I am on the www.powr.io/plugins/form-builder page

And my platform is Ecwid or Shopify

When I go to the Features section

Then it I should not see the ‘Easy Payment Options’ section.