Jump to content

Adding a custom pop up form to a navigation header button

Recommended Posts

@tuanphan I could use your help with this website. The idea here is that the button in the navigation that says request appointment, upon clicking they want a pop up form for the person to fill out. Then they want me to literally create this same form for them to submit their contact info that will go to an email address (similar to a newsletter block but more complex).

What will be the best way to accomplish this?

Website: https://cat-trout-7kzz.squarespace.com/home (no password)
 

Screenshot 2024-03-13 at 4.18.08 PM.png

Screenshot 2024-03-13 at 4.21.26 PM.png

Screenshot 2024-03-13 at 4.24.19 PM.png

Link to comment
  • Replies 9
  • Views 646
  • Created
  • Last Reply

Top Posters In This Topic

Posted (edited)

@tuanphan Changed settings, password is password 🙏

I created this page that is the contact form based off what is wanted: https://cat-trout-7kzz.squarespace.com/request-appointment

Maybe there is a way to make this page appear as a pop up?

I would also like to hide the (required) text that appears with the checkboxes shown to again mimic the form we are copying from.

Screenshot 2024-03-15 at 9.15.30 AM.png

Edited by nicki-patsios
More information
Link to comment
On 3/15/2024 at 8:09 PM, nicki-patsios said:

@tuanphan Changed settings, password is password 🙏

I created this page that is the contact form based off what is wanted: https://cat-trout-7kzz.squarespace.com/request-appointment

Maybe there is a way to make this page appear as a pop up?

I would also like to hide the (required) text that appears with the checkboxes shown to again mimic the form we are copying from.

Screenshot 2024-03-15 at 9.15.30 AM.png

To hide required text field, you can use this code to Website > Website Tools > Custom CSS

div#block-2883176083abebf7e0ae span.description.required {
    display: none !important;
}

To make it as popup, we can use custom code (let me test and send you in the next 1-2 days) or use custom plugin

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
On 3/14/2024 at 3:24 AM, nicki-patsios said:

@tuanphan I could use your help with this website. The idea here is that the button in the navigation that says request appointment, upon clicking they want a pop up form for the person to fill out. Then they want me to literally create this same form for them to submit their contact info that will go to an email address (similar to a newsletter block but more complex).

What will be the best way to accomplish this?

Website: https://cat-trout-7kzz.squarespace.com/home (no password)
 

Screenshot 2024-03-13 at 4.18.08 PM.png

Screenshot 2024-03-13 at 4.21.26 PM.png

Screenshot 2024-03-13 at 4.24.19 PM.png

I forgot, do you have this form embed code? (You can send me, I will test code) Or you want to use Form Block? (I will give code, to click button >> open this form block)

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
On 4/2/2024 at 7:12 PM, nicki-patsios said:

@tuanphan Apologies the url changed again but with no password this time: https://jl-md.squarespace.com/

 

I just created another page for the Request Appointment. I don't have any extra code.

You want

When users click Header button >> Will open a lightbox. Lightbox will get content from this page?

https://jl-md.squarespace.com/request-appointment

If yes, it require some custom code CSS and JavaScript code, you can add me as a contributor, I can do this for you.

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.