Redesign Landing Page with multiple steps with Warning prompt before exiting the page
Implement it first on the dev site for evaluation
https://dev.fivebranches.edu/
Use the existing event on the dev site as an example
Santa Cruz Onsite DTCM/MTCM Open House
The Form used: ID=2: Event: DTCM/MTCM Enrollment
Customizable texts
The Button Label cane be customized by the Editor through the parameter in the shortcode:
cta_btn_text=”Submit”
The pop-up message window if the user exit without finishing the form filling can also be customized by the Editor by setting the following parameters:
second_title=”Title Text Here”
second_dec=”Description Text Here”
stay_btn_txt=”Stay Button Text”
leave_btn_txt=”Leave Button Text”
So to customize all available parameters, here is the example of complete shortcode
[wpos_event_sing_up cta_btn_text=”Submit” second_title=”Title Text Here” second_dec=”Description Text Here” stay_btn_txt=”Stay Button Text” leave_btn_txt=”Leave Button Text”] (the Gravity form) [/wpos_event_sing_up]
Current Design
The Sign Up form is built in or embedded as part of the page
New Design Reference
This design mainly contains 3 steps (or layers)
First step:
Display a CTA button for the user who plans to reserve a seat
On Desktop screen: the Reserve Seat section is on the right
On the Mobile screens, the Reserve Seat section is sticky to the bottom.
The video on the left shows that the Reserve Seat section stay at the bottom while screen is scrolling upward.
Second step:
Pop up a form for the user to fill in necessary fields over the existing page (become a background)
The Form is built with Gravity Form plugin.
Move current Form to this 2nd layer. (as shown on the right column below)
Third step:
On the second step, the user either
complete the form filling and click the submit button
or click close or exit icon abandoning the form filling.
In this case display another pop up message as the screenshot below…
Customized first layer for new design
Keep only the Click-to-action button for the first layer
Customized 3rd layer for new design
Customized text to display
Customized text displayed
Make 1st layer content block sticky
Build whole content block in shortcode, making it sticky at the bottom of mobile screen
Make the text more apparent to the user
Reference
Works fine on Chrome
Not together on Edge and Friefox
10 thoughts on “Redesign Event Landing Page”
Proceed to implement it on the dev site first.
Hi Shawn,
As per our discussion on Skype, I have done your chnages. Please take a look at https://dev.fivebranches.edu/event/02-19-2023-santa-cruz-onsite-dtcm-mtcm-open-house/
Note : Kindly check with hard refresh (Ctrl + F5) or removing the browser as well as site cache.
I have created one shortcode for this to achieve this,
[wpos_event_sing_up cta_btn_text=”Reserve a spot”]
Oops! We could not locate your form.
[/wpos_event_sing_up]Once you check it, then need to add it in all events.
Please let me know if there is anything. I am here to help you.
We are reviewing it now.
Hi Pratik,
Thank you for the update. We have tested this page, on the desktop view the red button area is not sticky. We tested via Firefox and Chrome. Please ensure that the contents in this box (button + text message) are sticky on both mobile and desktop views.: https://app.screencast.com/WneohaXgKk4I1
Please advise on the questions below based on this screencap: https://app.screencast.com/BDIIcOjV0MviJ
1.) In Elementor, how can we put extensive information only on the left-hand side without having it get in the way of the sticky content on the right-hand side?
2.) Still in Elementor: how can we keep the brief text content below the red button and have both the button and the text content be sticky?
To emphasize our point, please refer to the Eventbrite example, there will be nothing below the sticky area: https://www.eventbrite.com/e/career-fair-exclusive-tech-hiring-event-tickets-63168789550?aff=ehometext
After the user submits successfully, the “Leave Check” screen should not show up again.
Keep the button label (currently “Reserve the spot”) as a parameter of shortcoode, so that our editor can change it to whatever they see fit.
Hi,
As per your response,
1) Keep the button label (currently “Reserve the spot”) as a parameter of shortcoode..
Ans – Done
2) After the user submits successfully, the “Leave Check” screen should not show up again.
Ans – Done
3) In Elementor, how can we put extensive information only on the left-hand side without having it get in the way of the sticky content on the right-hand side?
Ans – This page is designed with the Elementor so first you need to take two columns i.e. (70% + 30%). Means 70% area for left side and 30% area from right hand side.
Now you need to add all the content in the left side area. Put our shortcode in the right side area so no content will come under it.
4) Still in Elementor: how can we keep the brief text content below the red button and have both the button and the text content be sticky?
Ans – You can easily add the content below the button means our shortcode. Once you approve to devide the page then I will make it sticky in the desktop as well.
Customize text to display on 3rd layer verified
Still waiting for review results from staff.
closed