Calendly: fix inputs, 2-column layout, fix title, combine names

shawninder commented 3 years ago

Fixes https://github.com/tjikko-studio/SMPX-Website/issues/92, but boy is our stuff is broken.

I've had to use refs to get the input values instead of listening for changes on them and updating state variables. Otherwise, they were uneditable. Not sure why but our code is now dirty enough that it's hard to troubleshoot.
I was unable to reuse our existing Form component because (I think) of circular imports messing things up
With this 2-column layout in the Calendly form, if the form itself is inserted in a 2-column layout, it may be useful to use a 3/4 + 1/4 layout (or 1/4 + 3/4 or course) to give more space to the form rather than a 1/2 + 1/2, although the practicality of this depends on what's in the other column(s). @miherb let me know if this needs clarifications.

To do after merging (lol):

implement a max-width on the whole form to make sure we don't get ugly ultra-wide input fields.

Screenshot of the form in Storybook: Screen Shot 2021-11-11 at 21 32 50

Screenshot of the whole block, in context, in the backend (3/4 + 1/4 columnar layout): Screen Shot 2021-11-11 at 21 33 08

Screenshot of the above but in the frontend: Screen Shot 2021-11-11 at 21 33 23

miherb commented 3 years ago

Looks very good your changes @shawninder

miherb commented 2 years ago

@shawninder Would be nice if you can provide a screenshot of what we see if we click on "Next". We need to have an optional step with a large input field with a title such as" Tell us more about your needs and we’ll prepare accordingly".

shawninder commented 2 years ago

@shawninder Would be nice if you can provide a screenshot of what we see if we click on "Next".

Here is a screencast:

https://user-images.githubusercontent.com/484730/142466038-84e7ddd5-152b-4fe8-9cbc-3af1da24c853.mov

We need to have an optional step with a large input field with a title such as" Tell us more about your needs and we’ll prepare accordingly".

We don't have control over what is in the Calendly popup itself, although Smart Pixel does have some level of control via their account.

shawninder commented 2 years ago

@miherb If you mean that the form needs a new field for "Tell us more about your needs and we’ll prepare accordingly", we can do that and stick it under the existing fields (company, name, email, phone) but above the button. Does that sound good?

tjikko-studio / components

Calendly: fix inputs, 2-column layout, fix title, combine names #232