Mobile Friendly Webforms
make webforms mobile friendly or have a way to create them
I wanted to confirm that this improvement is still a goal, and in active project planning. We've got an entirely new form system in mind, which uses much of the newer functionality we've released lately - such as a drag-and-drop system similar to the Message Editor and designer elements from our Popup Manager builder.
As more information is available I will update this ticket, but improvements to Webforms are a top Engineering priority. Please continue to follow this ticket and let us know what you'd like to see!
Thanks so much,
Jocelyn @ Bronto
Steve Wages commented
When you have to fill out Email field on mobile devices, the standard "keyboard" loads instead of an email address "keyboard" (that includes @ on the keyboard). This is such an easy fix:
input type="text" should change to input type="email" and should be changed globally for all bronto clients and webforms.
Submitted this as a support ticket (2827826) and that team agreed this makes total sense.
Adam Kahler commented
Being a leader in email marketing your "default" unsubscribe and forward to a friend forms should be mobile friendly and responsive in design. The current versions are not and it's not optimal for your end users and the end users of your clients. This should be a high priority to resolve.
Yeah, they could just change that fixed px to a selectable dropdown with % as an option. That would be easy. Another thing they could do is put their automatic in-line style first, and then call for the class. This way we can truly overide the CSS as needed. For example: <div id="Example" style="padding:20px;" class="Example">Hello World!</div> instead of <div id="Example" class="Example" style="padding:20px;">Hello World!</div>
This really needs to happen! I've been able to make the 'Add Contact' forms responsive when embedding them in CMS pages, but I have not been able to do so on 'Manage Preferences' or 'Unsubscribe' forms, as the HTML is not accessible.
A lot of our consumers use mobile devices so this is obviously not ideal as they are not able to unsubscribe/manage preferences etc.
Please can anyone advise on anything that can help this situation? Does anyone know when Bronto plan to make their hosted forms responsive? All that needs to be happen is to set the widths to percentages... an easy fix if I had access to the HTML.
Hope this help guys!
There's 2 work around I found.
1. Make a desktop version and mobile version. Add a CSS <meta> viewport element to switch versions.
2. Custom the CSS and add a @media query to make the webform responsive.
A huge obstacle is that the Bronto containers for webforms only allow you to set the width by pixel instead of percentages.
Brad Crawford commented
Another vote for this from our end as well - this is standard best practice these days to provide mobile friendly pages - is there any update as to when we can see this being deployed?
Also agree with others - a base template CSS would be beneficial whilst we wait for this feature.
Along the same lines as this thread, it would be ideal to have the individual fields warped in HTML5 Form Input Types, such as:
<input type="email" name="email">
So the correct keyboard version auto loads (in this example, with the @ sign). This is a huge headache for table sign ups.
Hi Jocelyn et al,
I suspect someone has paid for this service and therefore the base styles that would make a form responsive are probably coded somewhere.
Why not paste those here for us to use until the new Webforms is finished? No need for each of us to pay up or lament in-house over something that has already been done.
Rest assured that this is something we continue to work on; the request has not been ignored or declined. We're actually looking to release a completely new version of Webforms, which is a larger project of which mobile-friendly capabilities are one piece. There are modifications you can make to the CSS within a Webform (use the Styles option in the upper right-hand corner) to make the page look a bit better on a mobile device, but not all CSS elements are supported. As mentioned in a comment, our Professional Services Department is able to custom design a Webform with mobile use in mind, but there is an additional fee involved. You can speak with your Account Manager if you'd like to know more - its likely a project of this sort can be completed using purchased "hours".
As I have more information on the status of this project I will absolutely keep this ticket updated. If there are any other Webform-related feature upgrades you'd like, now is a great time to get those submissions in so that they can be considered as part of the overhaul.
Thanks so much for your patience all, and don't hesitate to reach out if there was anything else I could assist with.
- Jocelyn @ Bronto
I was told by support to pay to have this done ... but it's frustrating that we're told to pay additional $ for something that should be a basic best practice!
Richard Duvall commented
This is something I couldn't wait on, so we abandoned Bronto's webforms and started building out hidden form pages specifically to deal with this.
Andrea Lacotte commented
I cant believe this thread has been going on for such a long time. We just launched yesterday and although we customized our webforms, they still look terrible on mobile devices. Hoping to see a solution for this very soon!
kim bianco commented
this would be great to have. Our webforms look terrible!
David Rymarz commented
I agree with this idea. Styling forms in Bronto is a nightmare.
Hannah C. commented
It would be great if our webforms were responsive. Most of my clients are re-creating their websites to have a responsive design and it would be nice if they would choose to embed the responsive webforms.
Cody Kratzer commented
I am also seeking some guidance on this topic...
Laura van Gool commented
I've noticed that the last comment on this was 4 years ago!! Has there been any progress on this?
Surely it is very simple to action for the standard webforms as the templates are so simple?
I had a problem recently where on a mobile device I could only see the top left corner of the webform. Fortunately I found a solution. When creating webforms, add a block of HTML at the top of the webform and in that block enter the following code:
<meta name="viewport" content="width=device-width, user-scalable=yes">
That's it! Then the webform will show the entire width and allow users to zoom in and out. This code, or something simlar but better, should be applied to all webforms.