topic Making a form mobile responsive in Tips, Tricks & Best Practices

Making a form mobile responsive

Juliaovejero — Mon, 28 Apr 2025 10:20:44 GMT

Hi, The form that shows after clicking on "Let's Talk" is not mobile responsive. How can I make it work?

This is the LP: https://landing-page-media.co.il/lp/newMtech/#

Thanks!

Re: Making a form mobile responsive

TomM2 — Mon, 28 Apr 2025 10:51:31 GMT

Hey @Juliaovejero what specifically are you looking to change on this? When I resize the window the forms size changes too.

Is there a specific element you're looking to change? HubSpot forms would be mobile responsive by default.

Re: Making a form mobile responsive

Juliaovejero — Mon, 28 Apr 2025 11:09:44 GMT

Hi!

If you open it from a mobile device, or as mobile from the browser developer tools (see below), it doesn't show as mobile responsive.

Re: Making a form mobile responsive

Balaji_Mavlers1 — Wed, 30 Apr 2025 07:05:30 GMT

Hi @Juliaovejero

To make the form that appears after clicking "Let's Talk" on your landing page mobile responsive, you’ll want to do a few key things. I inspected the page and here’s what you should focus on:
Key Fixes for Mobile Responsiveness:

1) Viewport Meta Tag
Ensure you have this in your <head> section:

2)Fix Widths in CSS
The popup form (.popup, .popup-content, or similar) uses fixed widths (like 600px) which break on smaller screens. Change this to a relative width with media queries:

.popup-content {
width: 90%;
max-width: 500px;
}

3)Add Media Queries
Use CSS media queries to adapt styling for smaller screens:

@media (max-width: 768px) {
.popup-content {
padding: 20px;
font-size: 16px;
}

.popup input, .popup textarea, .popup button {
width: 100%;
box-sizing: border-box;
}
}

4)Fix Overflow and Positioning
If the form overflows or cuts off on mobile, make sure the popup container allows scrolling:

.popup {
overflow-y: auto;
max-height: 100vh;
}

Test Touch Targets and Spacing
On mobile, inputs and buttons should be large enough to tap easily. Use sufficient padding/margins.

Re: Making a form mobile responsive

TomM2 — Wed, 30 Apr 2025 08:38:16 GMT

Hey @Juliaovejero that technically is mobile responsive, the form is responding to the window size and displaying the content within that window. The form will always be set as the width of the the container you have a placed it in. It looks like your custom pop-up isn't changing it's width for mobile devices and is staying quite small. It looks like you have:

.form-wrapper{width: 27.56vw} on mobile, I'd recomend using a css media query to set this as a much larger width on mobile devices, if you set your custom pop-up to have a larger width on mobile devices your form will have more space and thus will be clearer to see on mobile devices.