Give Feedback

Mobile Friendly Webforms

make webforms mobile friendly or have a way to create them

102 votes
Sign in
Sign in with: Facebook Google
Signed in as (Sign out)

We’ll send you updates on this idea

Iris shared this idea  ·   ·  Flag idea as inappropriate…  ·  Admin →


Sign in
Sign in with: Facebook Google
Signed in as (Sign out)
  • Joe Moore commented  ·   ·  Flag as inappropriate

    Any updates on this feature? It would be nice to have mobile friendly webforms in 2018.

  • Anonymous commented  ·   ·  Flag as inappropriate

    This has been on the drawing boards for a very long time. Any idea when we might expect this?

  • Michael commented  ·   ·  Flag as inappropriate

    Charles, that worked!

    I was just using the "form" element to try and over-ride it but adding the "html body" works perfectly!!!

    I can't thank you enough.

  • Charles commented  ·   ·  Flag as inappropriate

    Something that worked for us was to "hijack" the form element like this:

    html body form {
    width: 100% !important;

    Put that at the top of your custom CSS.

    Hopefully it helps someone else.

  • Michael commented  ·   ·  Flag as inappropriate

    Also, please take out the !important element from the width in the hardcoded 'form' tag. We can make the CSS responsive but that element overwrites any modification to the form's width element.

    You have the viewport meta tag in there which is a great idea but again, the !important overwrites it I believe.

  • AdminBronto (Product Management, Bronto Software) commented  ·   ·  Flag as inappropriate

    Hi all,

    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  ·   ·  Flag as inappropriate

    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  ·   ·  Flag as inappropriate

    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.

  • Paul commented  ·   ·  Flag as inappropriate

    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>

  • Anonymous commented  ·   ·  Flag as inappropriate

    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.

  • Chris commented  ·   ·  Flag as inappropriate

    Hope this help guys!

    Start on slide 27:

    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  ·   ·  Flag as inappropriate

    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.

  • Kevin commented  ·   ·  Flag as inappropriate

    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.

  • Rob commented  ·   ·  Flag as inappropriate

    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.

  • AdminBronto (Product Management, Bronto Software) commented  ·   ·  Flag as inappropriate

    Hi everyone,

    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

  • Anonymous commented  ·   ·  Flag as inappropriate

    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  ·   ·  Flag as inappropriate

    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  ·   ·  Flag as inappropriate

    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!

← Previous 1
Join the UX Brigade!

Bronto’s User Experience team is interested in hearing from you. Would you like to participate?

Schedule Time Now

Feedback and Knowledge Base