Modal Contact Form on Product Page Not Operating as Expected

[deossieart]

Hi! I am trying to add a modal contact form onto the product page template. I was able to get the contact form to pop up after clicking the "Inquire Now" button, but there are several things I don't know how to address:

1. Pop up doesn't take over the whole screen, it only show up at the bottom of the 'Inquire Now' button. The overlay also doesn't take up the entire screen, just the description section of the product page. How do I change this to pop up in the middle of the screen and have the dark overlay be on top of the entire page?

2. Related to #1, the "contact us" portion doesn't show up as part of the form, even though it should. How do I fix this?

3. Once someone hits submit, the contact form disappears instead of a success message that says "Thank you for contacting us....etc." How do I keep the form up after an inquiry is submitted and add the success message onto the contact form?

This is the test environment where you can see the behavior: https://twz2va31d0lk4ipy-86949331228.shopifypreview.com

[PaulNewton]

Hi @deossieart create minimal implementations for stuff like this it will save a ton of headache.

#1 is probably position relative problems

#2 is also probably position relative problems on  ALL containing elements and lack of understanding of stacking context you need to just move the modal to end of the html content before closing </body> tag, see modal tutorials

#3 is an advanced customization using ajax/fetch ,  or shopify's section-rendering api maybe,  for handling contact/form feedback. 

Take a step back and go read/watch some fullscreen/fullpage tutorials on modals, or if comfortable with code dig into the free themes that have modals and use those as implementation guides.

Build a simple reproducible example, don't out of the gate try to build a modal into a full blown template, build it on a simpler page with less features turned off until the new feature is working then integrate into the more complicate template.

Beyond that you must narrow the scope of asks.

As is this is way beyond the scope of the forums as this is more of asking how to do a full blown implementation tutorial with  several back to back do-my-work-for-me's than a how-does-X-work questions or clarifications.

You are describing a bespoke customization of a common web pattern with many different issues and moving parts.

While also not providing any specific code, or narrow questions.

https://community.shopify.com/c/blog/how-to-get-support-from-the-community/ba-p/1399408

[charliebrown]

Make the Modal Full-Screen: To ensure the modal and overlay cover the entire screen, you’ll need to adjust the CSS. Try adding or updating these styles:

.modal-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.7); /* Dark overlay */
display: flex;
justify-content: center;
align-items: center;
z-index: 1000; /* Ensure it’s on top of everything */
}

.modal-content {
background: white;
padding: 20px;
border-radius: 8px;
width: 90%;
max-width: 600px; /* Adjust as needed */
}

Make sure these classes are applied to the modal overlay and content in your HTML.

Ensure "Contact Us" Section Shows: If part of your form isn’t showing, check if it’s hidden or misplaced in your HTML. Ensure the “Contact Us” portion is correctly placed inside the modal content container and isn’t accidentally hidden by CSS.

Show Success Message: To display a success message after submission, you need to handle the form submission with JavaScript. Here’s a simple way to do it:

document.getElementById('contact-form').addEventListener('submit', function(event) {
event.preventDefault(); // Prevents the default form submission

// Show success message
document.querySelector('.modal-content').innerHTML = `
<h2>Thank you for contacting us!</h2>
<p>We appreciate your inquiry and will get back to you soon.</p>
`;

// Optionally, you can also add code here to actually submit the form data via AJAX
});

Make sure the form ID and the success message HTML match your actual setup.

By making these changes, your modal should cover the entire screen, show the contact form correctly, and display a success message after submission. If you have further issues, feel free to ask!