SlideShare a Scribd company logo

Form Block / Formbuilder

Janina Hard, https://2020.ploneconf.org/speakers/janina-hard Short presentation on my work for a block to build forms in Volto and other possible approaches https://2020.ploneconf.org/talks/form-block-formbuilder/view

1 of 11
Download to read offline
Form Block/Formbuilder
Line of thoughts and an approach
Janina Hard, 8. December 2020
About me
●
Webdeveloper since 2010 at Werkbank GmbH
Bochum
●
Working on bachelor degree in technical
computer science (FH Dortmund)
●
contributor for Plone since 2019 (Beethoven
Sprint)
Baseline
●
build a form builder, not a form framework
●
focus on non-technical users, not developers
●
Example Use-Cases:
– Simple contact forms
– Complex forms with grouping of form fields
There isn't just one way of doing it.
or:
„Every road leads to rome!“
Different criteria
●
Complexity of forms
– Validation
– Multipage
– Form Actions
●
Flexibility
●
User Interfaces
Different approaches
●
Form Folder content
type
– own content type to add
and edit forms
– we did it before
(EasyForm, FormGen)
– complex forms
●
Form Fields as regular
blocks
– every field is its own
block
– mix blocks and form
fields
– learned usage

Recommended

Accessible Web Forms
Accessible Web FormsAccessible Web Forms
Accessible Web FormsTom Hombergs
 
20151112 CITA BIM Gathering Keynote Dublin
20151112 CITA BIM Gathering Keynote Dublin20151112 CITA BIM Gathering Keynote Dublin
20151112 CITA BIM Gathering Keynote DublinLéon Berlo
 
European Teachers
European TeachersEuropean Teachers
European Teachersguest058a58
 
Structure of the competence model for an European teacher
Structure of the competence model for an European teacher  Structure of the competence model for an European teacher
Structure of the competence model for an European teacher guest058a58
 
Kate-Glushkova_portfolio-2019
Kate-Glushkova_portfolio-2019Kate-Glushkova_portfolio-2019
Kate-Glushkova_portfolio-2019Kate Glushkova
 
EU project proposal preparation process
EU project proposal preparation processEU project proposal preparation process
EU project proposal preparation processTomislav Rozman
 

More Related Content

Similar to Form Block / Formbuilder

Moving Interaction Design Off the Desktop and Into the World: Lessons from th...
Moving Interaction Design Off the Desktop and Into the World: Lessons from th...Moving Interaction Design Off the Desktop and Into the World: Lessons from th...
Moving Interaction Design Off the Desktop and Into the World: Lessons from th...egoodman
 
CV Isarakorn Prapatsorn EN 20200304
CV Isarakorn Prapatsorn EN 20200304CV Isarakorn Prapatsorn EN 20200304
CV Isarakorn Prapatsorn EN 20200304Isarakorn Prapatsorn
 
Nam Vo's Profile
Nam Vo's ProfileNam Vo's Profile
Nam Vo's ProfileNam Vo
 
Using Technology for Successful Communication
Using Technology for Successful CommunicationUsing Technology for Successful Communication
Using Technology for Successful Communicationnkelcher
 
Building complex sites with Joomla
Building complex sites with JoomlaBuilding complex sites with Joomla
Building complex sites with JoomlaPaul Delbar
 
Portfolio Franz Seher
Portfolio Franz SeherPortfolio Franz Seher
Portfolio Franz Seherdesignbusters
 
DWCNZ - Creating a Great User Experience in SharePoint
DWCNZ - Creating a Great User Experience in SharePointDWCNZ - Creating a Great User Experience in SharePoint
DWCNZ - Creating a Great User Experience in SharePointMarc D Anderson
 
M sc service-innovationlab
M sc service-innovationlabM sc service-innovationlab
M sc service-innovationlabLaurent Moccozet
 
SharePoint Forms & InfoPath – Go with what you know
SharePoint Forms & InfoPath – Go with what you knowSharePoint Forms & InfoPath – Go with what you know
SharePoint Forms & InfoPath – Go with what you knowRegroove
 
The Coolest Thing I do in Tech Comm Presentation, 4:15:15
The Coolest Thing I do in Tech Comm Presentation, 4:15:15The Coolest Thing I do in Tech Comm Presentation, 4:15:15
The Coolest Thing I do in Tech Comm Presentation, 4:15:15Paul Duarte
 
By the power of Plone - Case Carousel at University of Jyväskylä
By the power of Plone - Case Carousel at University of JyväskyläBy the power of Plone - Case Carousel at University of Jyväskylä
By the power of Plone - Case Carousel at University of JyväskyläRikupekka Oksanen
 
Web developer Valerio Foddai - EN
Web developer   Valerio Foddai - ENWeb developer   Valerio Foddai - EN
Web developer Valerio Foddai - ENValerio Foddai
 
Designing Great User Interfaces for Composite Applications
Designing Great User Interfaces for Composite ApplicationsDesigning Great User Interfaces for Composite Applications
Designing Great User Interfaces for Composite Applicationsdominion
 
Webmedia 2013: Enhancing Collaborative Sketching Activities with Context-awar...
Webmedia 2013: Enhancing Collaborative Sketching Activities with Context-awar...Webmedia 2013: Enhancing Collaborative Sketching Activities with Context-awar...
Webmedia 2013: Enhancing Collaborative Sketching Activities with Context-awar...Vivian Motti
 
Lavacon 2010: Stop Documenting and Start Designing - Smith & Aschwanden
Lavacon 2010: Stop Documenting and Start Designing - Smith & AschwandenLavacon 2010: Stop Documenting and Start Designing - Smith & Aschwanden
Lavacon 2010: Stop Documenting and Start Designing - Smith & AschwandenJames Smith
 
UI Design Based on Schematics and Calm Technology by Omar Sosa Tzec et al., C...
UI Design Based on Schematics and Calm Technology by Omar Sosa Tzec et al., C...UI Design Based on Schematics and Calm Technology by Omar Sosa Tzec et al., C...
UI Design Based on Schematics and Calm Technology by Omar Sosa Tzec et al., C...Omar Sosa-Tzec
 
ATDTK18 - design patterns for emergent learning technologies
ATDTK18 - design patterns for emergent learning technologiesATDTK18 - design patterns for emergent learning technologies
ATDTK18 - design patterns for emergent learning technologiesFloat
 

Similar to Form Block / Formbuilder (20)

Moving Interaction Design Off the Desktop and Into the World: Lessons from th...
Moving Interaction Design Off the Desktop and Into the World: Lessons from th...Moving Interaction Design Off the Desktop and Into the World: Lessons from th...
Moving Interaction Design Off the Desktop and Into the World: Lessons from th...
 
CV_Polozyukov E
CV_Polozyukov ECV_Polozyukov E
CV_Polozyukov E
 
CV Isarakorn Prapatsorn EN 20200304
CV Isarakorn Prapatsorn EN 20200304CV Isarakorn Prapatsorn EN 20200304
CV Isarakorn Prapatsorn EN 20200304
 
Online Professional Portfolios
Online Professional PortfoliosOnline Professional Portfolios
Online Professional Portfolios
 
Nam Vo's Profile
Nam Vo's ProfileNam Vo's Profile
Nam Vo's Profile
 
Using Technology for Successful Communication
Using Technology for Successful CommunicationUsing Technology for Successful Communication
Using Technology for Successful Communication
 
Building complex sites with Joomla
Building complex sites with JoomlaBuilding complex sites with Joomla
Building complex sites with Joomla
 
Prototype and test
Prototype and testPrototype and test
Prototype and test
 
Portfolio Franz Seher
Portfolio Franz SeherPortfolio Franz Seher
Portfolio Franz Seher
 
DWCNZ - Creating a Great User Experience in SharePoint
DWCNZ - Creating a Great User Experience in SharePointDWCNZ - Creating a Great User Experience in SharePoint
DWCNZ - Creating a Great User Experience in SharePoint
 
M sc service-innovationlab
M sc service-innovationlabM sc service-innovationlab
M sc service-innovationlab
 
SharePoint Forms & InfoPath – Go with what you know
SharePoint Forms & InfoPath – Go with what you knowSharePoint Forms & InfoPath – Go with what you know
SharePoint Forms & InfoPath – Go with what you know
 
The Coolest Thing I do in Tech Comm Presentation, 4:15:15
The Coolest Thing I do in Tech Comm Presentation, 4:15:15The Coolest Thing I do in Tech Comm Presentation, 4:15:15
The Coolest Thing I do in Tech Comm Presentation, 4:15:15
 
By the power of Plone - Case Carousel at University of Jyväskylä
By the power of Plone - Case Carousel at University of JyväskyläBy the power of Plone - Case Carousel at University of Jyväskylä
By the power of Plone - Case Carousel at University of Jyväskylä
 
Web developer Valerio Foddai - EN
Web developer   Valerio Foddai - ENWeb developer   Valerio Foddai - EN
Web developer Valerio Foddai - EN
 
Designing Great User Interfaces for Composite Applications
Designing Great User Interfaces for Composite ApplicationsDesigning Great User Interfaces for Composite Applications
Designing Great User Interfaces for Composite Applications
 
Webmedia 2013: Enhancing Collaborative Sketching Activities with Context-awar...
Webmedia 2013: Enhancing Collaborative Sketching Activities with Context-awar...Webmedia 2013: Enhancing Collaborative Sketching Activities with Context-awar...
Webmedia 2013: Enhancing Collaborative Sketching Activities with Context-awar...
 
Lavacon 2010: Stop Documenting and Start Designing - Smith & Aschwanden
Lavacon 2010: Stop Documenting and Start Designing - Smith & AschwandenLavacon 2010: Stop Documenting and Start Designing - Smith & Aschwanden
Lavacon 2010: Stop Documenting and Start Designing - Smith & Aschwanden
 
UI Design Based on Schematics and Calm Technology by Omar Sosa Tzec et al., C...
UI Design Based on Schematics and Calm Technology by Omar Sosa Tzec et al., C...UI Design Based on Schematics and Calm Technology by Omar Sosa Tzec et al., C...
UI Design Based on Schematics and Calm Technology by Omar Sosa Tzec et al., C...
 
ATDTK18 - design patterns for emergent learning technologies
ATDTK18 - design patterns for emergent learning technologiesATDTK18 - design patterns for emergent learning technologies
ATDTK18 - design patterns for emergent learning technologies
 

More from PloneFoundation

Pyruvate, a reasonably fast, non-blocking, multithreaded WSGI server
Pyruvate, a reasonably fast, non-blocking, multithreaded WSGI serverPyruvate, a reasonably fast, non-blocking, multithreaded WSGI server
Pyruvate, a reasonably fast, non-blocking, multithreaded WSGI serverPloneFoundation
 
Améliorer la gouvernance et la gestion interne de la ville avec Plone
Améliorer la gouvernance et la gestion interne de la ville avec PloneAméliorer la gouvernance et la gestion interne de la ville avec Plone
Améliorer la gouvernance et la gestion interne de la ville avec PlonePloneFoundation
 
Plone 6 Theming based on Barceloneta LTS
Plone 6 Theming based on Barceloneta LTSPlone 6 Theming based on Barceloneta LTS
Plone 6 Theming based on Barceloneta LTSPloneFoundation
 
Modernize Plone's Classic UI
Modernize Plone's Classic UIModernize Plone's Classic UI
Modernize Plone's Classic UIPloneFoundation
 
Volto: A Journey towards Personalization
Volto: A Journey towards PersonalizationVolto: A Journey towards Personalization
Volto: A Journey towards PersonalizationPloneFoundation
 
Bundle Splitting in Volto
Bundle Splitting in VoltoBundle Splitting in Volto
Bundle Splitting in VoltoPloneFoundation
 
Asking questions for the benefit of your future self - Growing with the Plone...
Asking questions for the benefit of your future self - Growing with the Plone...Asking questions for the benefit of your future self - Growing with the Plone...
Asking questions for the benefit of your future self - Growing with the Plone...PloneFoundation
 
Pyramid and the Pylons Project in the wild
Pyramid and the Pylons Project in the wildPyramid and the Pylons Project in the wild
Pyramid and the Pylons Project in the wildPloneFoundation
 

More from PloneFoundation (14)

Pyruvate, a reasonably fast, non-blocking, multithreaded WSGI server
Pyruvate, a reasonably fast, non-blocking, multithreaded WSGI serverPyruvate, a reasonably fast, non-blocking, multithreaded WSGI server
Pyruvate, a reasonably fast, non-blocking, multithreaded WSGI server
 
Améliorer la gouvernance et la gestion interne de la ville avec Plone
Améliorer la gouvernance et la gestion interne de la ville avec PloneAméliorer la gouvernance et la gestion interne de la ville avec Plone
Améliorer la gouvernance et la gestion interne de la ville avec Plone
 
Running Plone on AWS
Running Plone on AWSRunning Plone on AWS
Running Plone on AWS
 
State of Plone 4 and 5
State of Plone 4 and 5State of Plone 4 and 5
State of Plone 4 and 5
 
State of Plone 2020
State of Plone 2020State of Plone 2020
State of Plone 2020
 
Plone 6 Theming based on Barceloneta LTS
Plone 6 Theming based on Barceloneta LTSPlone 6 Theming based on Barceloneta LTS
Plone 6 Theming based on Barceloneta LTS
 
Modernize Plone's Classic UI
Modernize Plone's Classic UIModernize Plone's Classic UI
Modernize Plone's Classic UI
 
Green Party Maps
Green Party MapsGreen Party Maps
Green Party Maps
 
Volto: A Journey towards Personalization
Volto: A Journey towards PersonalizationVolto: A Journey towards Personalization
Volto: A Journey towards Personalization
 
Bundle Splitting in Volto
Bundle Splitting in VoltoBundle Splitting in Volto
Bundle Splitting in Volto
 
Asking questions for the benefit of your future self - Growing with the Plone...
Asking questions for the benefit of your future self - Growing with the Plone...Asking questions for the benefit of your future self - Growing with the Plone...
Asking questions for the benefit of your future self - Growing with the Plone...
 
The State of Pillow
The State of PillowThe State of Pillow
The State of Pillow
 
Pyramid and the Pylons Project in the wild
Pyramid and the Pylons Project in the wildPyramid and the Pylons Project in the wild
Pyramid and the Pylons Project in the wild
 
Questions
QuestionsQuestions
Questions
 

Recently uploaded

Design pattern talk by Kaya Weers - 2024
Design pattern talk by Kaya Weers - 2024Design pattern talk by Kaya Weers - 2024
Design pattern talk by Kaya Weers - 2024Kaya Weers
 
Workshop híbrido: Stream Processing con Flink
Workshop híbrido: Stream Processing con FlinkWorkshop híbrido: Stream Processing con Flink
Workshop híbrido: Stream Processing con Flinkconfluent
 
Cybersecurity Measures For Remote Workers.pdf
Cybersecurity Measures For Remote Workers.pdfCybersecurity Measures For Remote Workers.pdf
Cybersecurity Measures For Remote Workers.pdfCIOWomenMagazine
 
Alluxio Monthly Webinar | Why a Multi-Cloud Strategy Matters for Your AI Plat...
Alluxio Monthly Webinar | Why a Multi-Cloud Strategy Matters for Your AI Plat...Alluxio Monthly Webinar | Why a Multi-Cloud Strategy Matters for Your AI Plat...
Alluxio Monthly Webinar | Why a Multi-Cloud Strategy Matters for Your AI Plat...Alluxio, Inc.
 
How AI is preventing account fraud at web scale
How AI is preventing account fraud at web scaleHow AI is preventing account fraud at web scale
How AI is preventing account fraud at web scaleAmir Moghimi
 
Implementing Docker Containers with Windows Server 2019
Implementing Docker Containers with Windows Server 2019Implementing Docker Containers with Windows Server 2019
Implementing Docker Containers with Windows Server 2019VICTOR MAESTRE RAMIREZ
 
Globus for System Administrators
Globus for System AdministratorsGlobus for System Administrators
Globus for System AdministratorsGlobus
 
Joseph Yoder : Being Agile about Architecture
Joseph Yoder : Being Agile about ArchitectureJoseph Yoder : Being Agile about Architecture
Joseph Yoder : Being Agile about ArchitectureHironori Washizaki
 
Agile & Scrum, Certified Scrum Master! Crash Course
Agile & Scrum,  Certified Scrum Master! Crash CourseAgile & Scrum,  Certified Scrum Master! Crash Course
Agile & Scrum, Certified Scrum Master! Crash CourseRohan Chandane
 
killingcamp longest common subsequence.pdf
killingcamp longest common subsequence.pdfkillingcamp longest common subsequence.pdf
killingcamp longest common subsequence.pdfssuser82c38d
 
Automation for Bonterra Impact Management (fka Apricot)
Automation for Bonterra Impact Management (fka Apricot)Automation for Bonterra Impact Management (fka Apricot)
Automation for Bonterra Impact Management (fka Apricot)Jeffrey Haguewood
 
Open Source vs Closed Source LLMs. Pros and Cons
Open Source vs Closed Source LLMs. Pros and ConsOpen Source vs Closed Source LLMs. Pros and Cons
Open Source vs Closed Source LLMs. Pros and ConsSprings
 
Orion Context Broker introduction 20240227
Orion Context Broker introduction 20240227Orion Context Broker introduction 20240227
Orion Context Broker introduction 20240227Fermin Galan
 
The Top Outages of 2023: Analyses and Takeaways
The Top Outages of 2023: Analyses and TakeawaysThe Top Outages of 2023: Analyses and Takeaways
The Top Outages of 2023: Analyses and TakeawaysThousandEyes
 
Machine Learning Basics for Dummies (no math!)
Machine Learning Basics for Dummies (no math!)Machine Learning Basics for Dummies (no math!)
Machine Learning Basics for Dummies (no math!)Dmitry Zinoviev
 
killing camp 주차장 나누기-2 topology sort.pdf
killing camp 주차장 나누기-2 topology sort.pdfkilling camp 주차장 나누기-2 topology sort.pdf
killing camp 주차장 나누기-2 topology sort.pdfssuser82c38d
 
LLMOps with Azure Machine Learning prompt flow
LLMOps with Azure Machine Learning prompt flowLLMOps with Azure Machine Learning prompt flow
LLMOps with Azure Machine Learning prompt flowNaoki (Neo) SATO
 
CSS Notes in PDF, Easy to understand. For beginner to advanced. ...
CSS Notes in PDF, Easy to understand. For beginner to advanced.              ...CSS Notes in PDF, Easy to understand. For beginner to advanced.              ...
CSS Notes in PDF, Easy to understand. For beginner to advanced. ...syedfaisal759877
 
No more Dockerfiles? Buildpacks to help you ship your image!
No more Dockerfiles? Buildpacks to help you ship your image!No more Dockerfiles? Buildpacks to help you ship your image!
No more Dockerfiles? Buildpacks to help you ship your image!Anthony Dahanne
 

Recently uploaded (20)

Design pattern talk by Kaya Weers - 2024
Design pattern talk by Kaya Weers - 2024Design pattern talk by Kaya Weers - 2024
Design pattern talk by Kaya Weers - 2024
 
Workshop híbrido: Stream Processing con Flink
Workshop híbrido: Stream Processing con FlinkWorkshop híbrido: Stream Processing con Flink
Workshop híbrido: Stream Processing con Flink
 
Cybersecurity Measures For Remote Workers.pdf
Cybersecurity Measures For Remote Workers.pdfCybersecurity Measures For Remote Workers.pdf
Cybersecurity Measures For Remote Workers.pdf
 
Alluxio Monthly Webinar | Why a Multi-Cloud Strategy Matters for Your AI Plat...
Alluxio Monthly Webinar | Why a Multi-Cloud Strategy Matters for Your AI Plat...Alluxio Monthly Webinar | Why a Multi-Cloud Strategy Matters for Your AI Plat...
Alluxio Monthly Webinar | Why a Multi-Cloud Strategy Matters for Your AI Plat...
 
How AI is preventing account fraud at web scale
How AI is preventing account fraud at web scaleHow AI is preventing account fraud at web scale
How AI is preventing account fraud at web scale
 
Implementing Docker Containers with Windows Server 2019
Implementing Docker Containers with Windows Server 2019Implementing Docker Containers with Windows Server 2019
Implementing Docker Containers with Windows Server 2019
 
Globus for System Administrators
Globus for System AdministratorsGlobus for System Administrators
Globus for System Administrators
 
Joseph Yoder : Being Agile about Architecture
Joseph Yoder : Being Agile about ArchitectureJoseph Yoder : Being Agile about Architecture
Joseph Yoder : Being Agile about Architecture
 
2024 Trends Transforming Enterprise Resource Planning
2024 Trends Transforming Enterprise Resource Planning2024 Trends Transforming Enterprise Resource Planning
2024 Trends Transforming Enterprise Resource Planning
 
Agile & Scrum, Certified Scrum Master! Crash Course
Agile & Scrum,  Certified Scrum Master! Crash CourseAgile & Scrum,  Certified Scrum Master! Crash Course
Agile & Scrum, Certified Scrum Master! Crash Course
 
killingcamp longest common subsequence.pdf
killingcamp longest common subsequence.pdfkillingcamp longest common subsequence.pdf
killingcamp longest common subsequence.pdf
 
Automation for Bonterra Impact Management (fka Apricot)
Automation for Bonterra Impact Management (fka Apricot)Automation for Bonterra Impact Management (fka Apricot)
Automation for Bonterra Impact Management (fka Apricot)
 
Open Source vs Closed Source LLMs. Pros and Cons
Open Source vs Closed Source LLMs. Pros and ConsOpen Source vs Closed Source LLMs. Pros and Cons
Open Source vs Closed Source LLMs. Pros and Cons
 
Orion Context Broker introduction 20240227
Orion Context Broker introduction 20240227Orion Context Broker introduction 20240227
Orion Context Broker introduction 20240227
 
The Top Outages of 2023: Analyses and Takeaways
The Top Outages of 2023: Analyses and TakeawaysThe Top Outages of 2023: Analyses and Takeaways
The Top Outages of 2023: Analyses and Takeaways
 
Machine Learning Basics for Dummies (no math!)
Machine Learning Basics for Dummies (no math!)Machine Learning Basics for Dummies (no math!)
Machine Learning Basics for Dummies (no math!)
 
killing camp 주차장 나누기-2 topology sort.pdf
killing camp 주차장 나누기-2 topology sort.pdfkilling camp 주차장 나누기-2 topology sort.pdf
killing camp 주차장 나누기-2 topology sort.pdf
 
LLMOps with Azure Machine Learning prompt flow
LLMOps with Azure Machine Learning prompt flowLLMOps with Azure Machine Learning prompt flow
LLMOps with Azure Machine Learning prompt flow
 
CSS Notes in PDF, Easy to understand. For beginner to advanced. ...
CSS Notes in PDF, Easy to understand. For beginner to advanced.              ...CSS Notes in PDF, Easy to understand. For beginner to advanced.              ...
CSS Notes in PDF, Easy to understand. For beginner to advanced. ...
 
No more Dockerfiles? Buildpacks to help you ship your image!
No more Dockerfiles? Buildpacks to help you ship your image!No more Dockerfiles? Buildpacks to help you ship your image!
No more Dockerfiles? Buildpacks to help you ship your image!
 

Form Block / Formbuilder

  • 1. Form Block/Formbuilder Line of thoughts and an approach Janina Hard, 8. December 2020
  • 2. About me ● Webdeveloper since 2010 at Werkbank GmbH Bochum ● Working on bachelor degree in technical computer science (FH Dortmund) ● contributor for Plone since 2019 (Beethoven Sprint)
  • 3. Baseline ● build a form builder, not a form framework ● focus on non-technical users, not developers ● Example Use-Cases: – Simple contact forms – Complex forms with grouping of form fields
  • 4. There isn't just one way of doing it. or: „Every road leads to rome!“
  • 5. Different criteria ● Complexity of forms – Validation – Multipage – Form Actions ● Flexibility ● User Interfaces
  • 6. Different approaches ● Form Folder content type – own content type to add and edit forms – we did it before (EasyForm, FormGen) – complex forms ● Form Fields as regular blocks – every field is its own block – mix blocks and form fields – learned usage
  • 7. “A compromise is an agreement by which both parties get what neither of them wanted”
  • 8. Form Block Approach ✔ no change in user interface ✔ different forms on one site possible ✔ expandability ✗ mix with other blocks ✗ complex forms like multisite ✗ Complex form actions
  • 9. Just a little sneak peek (or what I could do up to now)
  • 10. Summary ● No „universal remedy“ – different approaches possible depending on criteria and user ● Code refactoring after Volto AddOn Training ;) ● Still a lot of work ahead
  • 11. Thank you for your attention!