Uploaded image for project: 'Planet4'
  1. Planet4
  2. PLANET-3342

Left/right side layout version of the EN form block

XMLWordPrintable

      Let's discuss how we could add a left/right side layout option to the EN form block. All our petition pages have the signup form on the right side (or left, based on the language).

      I see three layout options:

      1. static: the block would be part of the layout, practically resizing any other block that is next to it. scrolling on the page would move the form so potentially it would leave the viewport - not the best solution. example: https://secure.greenpeace.org.uk/page/s/no-new-oil
      2. absolute positioning: the form block has a fixed position, not part of the layout, scrolling is not changing its position. better for conversions but potentially makes the content difficult to consume. this option is only working on desktop size screens, on small screens we'd need to fall back to static positioning. example: https://heartoftheamazon.org/
      3. collapsible: the block is part of the layout, but when you scroll down it collapses to not cover the content but still stays in the viewport. this is the best solution, would it be very complicated to implement? also works nice on small screens, where it collapses to the bottom (could also collapse to the top) example: https://www.peoplevsoil.org/en/

      Question: how should we proceed with the design? Should we ask for a wireframe from our designers or could we just do a prototype?

        1. 1_XL_form block_V1-Best case scenario_MVP@2x.png
          183 kB
          William Morris-Julien
        2. 10_S_form block_V1-Best case scenario_MVP_full@2x.png
          107 kB
          William Morris-Julien
        3. 2_XL_form block_V1-Best case scenario_MVP_filled in@2x.png
          199 kB
          William Morris-Julien
        4. 3_XL_form block_V1-Best case scenario_MVP_error field@2x.png
          204 kB
          William Morris-Julien
        5. 4_XL_form block_V1-Worst case scenario_MVP@2x.png
          416 kB
          William Morris-Julien
        6. 5_XL_form block_V1-Best case scenario_future@2x.png
          199 kB
          William Morris-Julien
        7. 6_XL_form block_V1-Worst case scenario_Future @2x.png
          432 kB
          William Morris-Julien
        8. 7_L_form block_V1-Best case scenario_MVP@2x.png
          156 kB
          William Morris-Julien
        9. 8_M_form block_V1-Best case scenario_MVP@2x.png
          151 kB
          William Morris-Julien
        10. 9_S_form block_V1-Best case scenario_MVP@2x.png
          67 kB
          William Morris-Julien
        11. arabic_en_s_m_l_xl.jpg
          815 kB
          William Morris-Julien
        12. form_error.jpg
          748 kB
          William Morris-Julien
        13. form_l_measurements.jpg
          720 kB
          William Morris-Julien
        14. form_m&s_measurements.jpg
          1.05 MB
          William Morris-Julien
        15. form_worsest_case_measurements.jpg
          1.03 MB
          William Morris-Julien
        16. form_xl_arabic.jpg
          876 kB
          William Morris-Julien
        17. form_xl_measurements.jpg
          916 kB
          William Morris-Julien
        18. form.jpg
          607 kB
          William Morris-Julien
        19. form-admin-current.png
          38 kB
          Konstantinos Kokkorogiannis
        20. form-block.png
          66 kB
          Gabor Galgocz
        21. from_worst.jpg
          277 kB
          William Morris-Julien

            wmorrisj William Morris-Julien
            gabor.galgocz Gabor Galgocz
            Votes:
            0 Vote for this issue
            Watchers:
            1 Start watching this issue

              Created:
              Updated:
              Resolved: