Community forum for knowledge and support

Updated 5 months ago

Optimizing the contact modal layout

At a glance

The community member has a question about a contact modal they imported. They moved the "open modal" button to the main navigation and changed it to "contact". The community member is wondering if they need to keep all the padding in the section, as it's creating unnecessary space.

The comments suggest that the community member doesn't need all the extra divs, but should try to keep the button and the modal component near each other if possible. The community member is considering putting the modal in the footer since it's on every page, but is concerned that this would put the modal far away from the button in the navbar. The community member is also curious about best practices for contact modals and whether they should use a contact page instead.

Another community member shares a link to a Loom video that covers this topic and suggests that putting the modal in the footer is an industry best practice. The original community member tries this and it mostly works, but they encounter an issue where the modal doesn't appear when navigating between pages, which they suspect may be due to preview mode. They ask for help, and another community member offers to assist if they can share a read-only version.

Useful resources

Question on contact modal. I imported contact-modal-1. It was imported as a section including padding-global and padding-section-large. I moved the 'open modal' button to the main navigation and changed it to contact. Do I need to keep all the padding in the section? It's creating a bunch of unnecessary space.

M
W
5 comments

naw you wont need all of those extra divs. But try to keep the button and the modal component near each other if possible.

Thanks. I didn't think so, but didn't want to break anything. I was thinking of putting the modal in the footer since it is on every page. That way, I don't have to add the modal to every page. But that puts the modal as far away from the button (in the navbar) as possible.

I'll play around with it. In the meantime, curious if you (or anyone else) have thoughts on best practices for contact modals or whether you should even use them and instead use a contact page?

ah well in that case I do have a quick loom on this topic - its covering a larger topic but addresses this one as well.
https://relume.notion.site/How-to-add-multiple-modals-5012143c03f14e6da19f8cd3e23e7f3f?pvs=4

In short it is totally possible to do what you are doing and yeah putting the modal in the footer is what I would consider industry best practices.

Thanks . I put it in the footer and it mostly works. I'm in preview mode. If I navigate from one page to another, it doesn't always work (the modal doesn't appear. Maybe it is because of preview mode. I'll play around with it some more. Thanks for your help!

no worries, share a read-only and I can help too - should be easy enough to resolve.

Add a reply
Sign up and join the conversation on Slack