Modal Contact Form on Product Page Not Operating as Expected

Shopify Discussion

Topic summary

A user is implementing a modal contact form on a Shopify product page but encountering three main issues:

Problems Identified:

  • Modal appears only at the bottom of the “Inquire Now” button rather than centered on screen
  • Dark overlay covers only the product description section instead of the entire page
  • “Contact Us” section of the form doesn’t display properly
  • Contact form disappears after submission instead of showing a success message

Solutions Provided:

One responder offered specific CSS code to fix the positioning issues, using position: fixed with full viewport dimensions and flexbox centering for the modal overlay. They also provided JavaScript code to handle form submission and display a success message without page reload.

Another contributor recommended a different approach: start with minimal implementations by studying existing modal tutorials and examining free Shopify themes with working modals. They emphasized that the user is attempting a complex customization involving multiple issues (positioning, stacking context, AJAX form handling) and should build a simpler proof-of-concept first before integrating into the full product template.

Status: The discussion remains open with both quick-fix code solutions and strategic implementation advice provided.

Summarized with AI on November 7. AI used: claude-sonnet-4-5-20250929.
3

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 = `
## Thank you for contacting us!

We appreciate your inquiry and will get back to you soon.

`;

// 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!