Multistep Form Implementation, API Integration & PDF Generation

Deliverable: Multistep onboarding form - No design required, but some animation needs to be done for pop up and similar minor things, focus on functionality and 3rd party integrations where necessary, a lot of things are done already, just can't work out some value passing after form submission and PDF generation. Assuming on top of webflow skills, dev skills will be needed to achieve that.

Brief:

Multistep form process

  1. People get sent a link to start onboarding process with at first these 5 steps:

a. Company details

b. Address details - loqate API to pull postcode lookup (will provide API for it)

c. Bank details - loqate API to pull postcode lookup (will provide API for it)

d. Criteria

e. Contacts

These 5 steps are already added to the Webflow with all the information, the only thing outstanding is:

  • Conditionality - if this is ticked show that

  • Required fields

  • Progress bar needs to be added

  • Loqate API integration with postcode field

  1. Upon clicking 'Create account' the submission should be captured and sent over via webhook to dynamics (we are working on it on our side, this is not brief requirement, webhook has been added to the form)

  2. At the same time on submission a new window / next step / another form (whichever is better solution) shows with 'onboarding terms and conditions'

  3. People need to expand on each area to then agree to the terms

  4. When they hit agree a pop up comes up with confirmation

  5. They need to type their full name, job title, email

  6. We capture today’s date (not editable)

  7. IP address (not editable) - implemented

  8. PDF need to be generated after they hit confirm with the pre-popup details and copy

  9. After they hit confirm on partner agreement we need to show them self-fill page, which will follow the same logic as step 3.

  10. They view it as(no expandable fields, just some copy)

  11. We need captured form submission fields from step 1 - VAT number and the supplier (company name)

  12. If no VAT provided - then Show not VAT registered and their company name

  13. We need to add date picker to the copy of self-bill

  14. When they click 'agree' pop up shows with

  15. They need to type their full name, job title, email

  16. We capture today’s date (not editable)

  17. IP address (not editable)

  18. PDF need to be generated after they hit confirm with the pre-popup details and copy

  19. After both agreement and self-billing is agreed and confirmed and PDFs have been generated and stored in correct location - show an end page that will be provided to you.

Good news:

  • Step 1 from a to e - all fields are done and are on Webflow dummy site, only multistep functionality needs to be added - when next and back buttons are presses

  • Page with partner agreement is also done on Webflow dummy site, including the animation for tabs to show hide info, the only struggle is capturing info from submission 'create account' onto that form ( you can put it in existing initial page, instead of separate whatever works), and biggest mystery is that PDF creation and storage, popup needs creating as animation, but all the content is on the page with IP catching.

  • On self-billing - absolutely the same situation as on Page with agreement - mystery is PDF generation, capturing and storing submitted info for this section of the page and displaying it, and popup needs creating in terms of animation and clicking, but content is already there on Webflow.

So all in all 7 steps - 5 capturing data, 2 displaying some values from these first 5 steps and then generating PDFs (I'm happy to explore external API solution for this) for both agreement and self-bill.

I will provide, all links, flows.

Design is not required at all, only functionality I'm after.

Job Qualifications

  • Deliverable: Multistep onboarding form - No design required, but some animation needs to be done for pop up and similar minor things, focus on functionality and 3rd party integrations where necessary, a lot of things are done already, just can't work out some value passing after form submission and PDF generation
  • Assuming on top of webflow skills, dev skills will be needed to achieve that
  • Progress bar needs to be added
  • Loqate API integration with postcode field
  • Upon clicking 'Create account' the submission should be captured and sent over via webhook to dynamics (we are working on it on our side, this is not brief requirement, webhook has been added to the form)
  • At the same time on submission a new window / next step / another form (whichever is better solution) shows with 'onboarding terms and conditions'
  • People need to expand on each area to then agree to the terms
  • When they hit agree a pop up comes up with confirmation
  • They need to type their full name, job title, email
  • We capture today’s date (not editable)
  • IP address (not editable) - implemented
  • PDF need to be generated after they hit confirm with the pre-popup details and copy
  • After they hit confirm on partner agreement we need to show them self-fill page, which will follow the same logic as step 3
  • They view it as(no expandable fields, just some copy)
  • We need captured form submission fields from step 1 - VAT number and the supplier (company name)
  • We need to add date picker to the copy of self-bill
  • When they click 'agree' pop up shows with
  • They need to type their full name, job title, email
  • We capture today’s date (not editable)
  • IP address (not editable)
  • PDF need to be generated after they hit confirm with the pre-popup details and copy
  • After both agreement and self-billing is agreed and confirmed and PDFs have been generated and stored in correct location - show an end page that will be provided to you
  • Step 1 from a to e - all fields are done and are on Webflow dummy site, only multistep functionality needs to be added - when next and back buttons are presses
  • Page with partner agreement is also done on Webflow dummy site, including the animation for tabs to show hide info, the only struggle is capturing info from submission 'create account' onto that form ( you can put it in existing initial page, instead of separate whatever works), and biggest mystery is that PDF creation and storage, popup needs creating as animation, but all the content is on the page with IP catching
  • On self-billing - absolutely the same situation as on Page with agreement - mystery is PDF generation, capturing and storing submitted info for this section of the page and displaying it, and popup needs creating in terms of animation and clicking, but content is already there on Webflow

Job Benefits

Job Responsibilities

  • People get sent a link to start onboarding process with at first these 5 steps:
  • Address details - loqate API to pull postcode lookup (will provide API for it)
  • Bank details - loqate API to pull postcode lookup (will provide API for it)
  • Conditionality - if this is ticked show that
  • If no VAT provided - then Show not VAT registered and their company name