Responsive forms ?

  • Resolved Palijn

    (@palijn)


    6 years, 3 months ago

    Hello,
    The booking form looks are…well… inelegant, to say the least (see the above page to get an idea)
    I’m looking for a fast way to benefit from responsive forms. I’m not good enough at CSS to figure out how to tweak it myself.
    So two questions :
    a) if anyone would like to share a quick tip on making the forms usable, I’d love to ??
    b) question to the maintainer : would buying Pro bring me responsive forms ?

    Thanks a lot for your support!

    The page I need help with: [log in to see the link]

Viewing 6 replies - 1 through 6 (of 6 total)

  • Hello,

    By default the EM forms are responsive. The reason why it’s not responding is probably because your theme is overriding it. However those can be tweaked with CSS.

    Here is some CSS that might help you. You can put it on your themes css of a place that accepts custom css.

    #em-booking div.em-booking-login {
    clear: both;
    float: none;
    margin: 0;
    border-left: 0;
}

form.em-booking-form .em-booking-form-details {
   float: none;
   display: block;
   width: 100%;
}
    Thread Starter Palijn

    (@palijn)

    Thank you timrv, much better now !
    There are still a few things unbalanced (such as the recaptcha eating up space on the login button), I’ll try to adapt things myself…
    but of course if you would like to suggest code you’ll happily be welcome ! ??
    Cheers,

    Thread Starter Palijn

    (@palijn)

    Me again ??
    May I suggest a small usability change to the login form, “remember me” input ?

    Currently :

    <input name="rememberme" type="checkbox" id="em_rememberme" value="forever">
<label>Remember me</label>

    Issue (aside from a headache-inducing alignment complexity) : user has to click the checkbox ONLY to check/uncheck .

    Proposed :

    <label>
<input name="rememberme" type="checkbox" id="em_rememberme" value="forever">
Remember me
</label>

    i.e put the checkbox inside the label
    Usability improvement : user can click anywhere in the text and in the checkbox to check/uncheck .

    Thanks for your feedback ??

    P.S: Funny enough, when inserting the GDPR-compliant consent form, it’s the proposed way that is used, and the looks are wonderful ! ??

    • This reply was modified 6 years, 3 months ago by Palijn. Reason: (formatting)
    • This reply was modified 6 years, 3 months ago by Palijn. Reason: Adding note relative to the other label on the page when inserting GDPR-compliant consent form
    Thread Starter Palijn

    (@palijn)

    For the record, in a pure “style with a hammer” fashion, I ended up with the following CSS additions : 

    div.em-booking-login label,div.em-booking-login input ,.em-booking-form label,
.em-booking-form-details input.input, .em-booking-form-details textarea,
.em-booking-form-details .em-booking-submit, .em-ticket-select {
	width:100%;
}
.em-booking-form label {
	  margin:	0.75em 2% 0.25em 0;
}
.anr_captcha_field {
	padding: 0.75em;
	clear: both;
}

    in addition to your unchanged : 

    #em-booking div.em-booking-login {
    clear: both;
    float: none;
    margin: 0;
    border-left: 0;
}

form.em-booking-form .em-booking-form-details {
   float: none;
   display: block;
   width: 100%;
}

    You’re Welcome. I tried checking the page again and seems like you have fixed it ??

    Thread Starter Palijn

    (@palijn)

    I’d still be eager to benefit from the small change I suggested in the label/checkbox order for the “remember me” line. ??
    Other than that, thanks again !

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Responsive forms ?’ is closed to new replies.