Menu icon Foundation
Custom Forms in F5?

First thank you for the great work in Foundation 5!

In Foundation 5 are custom forms still supported? When I look at the Form docs I am seeing regular checkboxes and radio boxes. I haven't tried it in a live site yet.

forms

First thank you for the great work in Foundation 5!

In Foundation 5 are custom forms still supported? When I look at the Form docs I am seeing regular checkboxes and radio boxes. I haven't tried it in a live site yet.


Ghaida Zahran gave the most helpful answer for this post
Ghaida Zahran almost 5 years ago

Custom forms override native functionality in Android and iOS to the detriment of the user who's expecting select boxes and checkboxes to function in a specific way on their device.

Adam Johnson almost 5 years ago

They seem to have disappeared from the docs.

Looking at the 5.0-wip branch on github in the components (https://github.com/zurb/foundation/tree/5.0pwip/scss/foundation/components) there is still a _custom-forms.scss and _switch.scss which is also missing from the docs!

Rafi Benkual almost 5 years ago

You will find some updated forms that work better for mobile here: http://foundation.zurb.com/docs/components/forms.html

These work better with the native IOS and Andriod controls.

Custom forms are no longer part of Foundation 5.

Lynda Spangler almost 5 years ago

Thank you for the information.

It would be nice to know what was removed from Foundation 5 such as custom forms.

Out of curiosity why were they removed? It was nice and easy to implement and from what I saw worked without issue in iOS or Android.

Andrew Young almost 5 years ago

Any chance of adding the custom functionality in the playground then?

As long as creative types do site mockups, they are going to insist on making the form fields look very customized.

If you move it into the code playground it can be one of those not officially supported and use at your own risk sort of things. The Foundation custom forms worked a whole lot better than some of the plugins out there that try to do the same.

Ghaida Zahran almost 5 years ago

Custom forms override native functionality in Android and iOS to the detriment of the user who's expecting select boxes and checkboxes to function in a specific way on their device.

Alex Labanino almost 5 years ago

Is there any way to use the custom form in Foundation 5?

ShadowDanser almost 5 years ago

How to send the data? And prevent a page refresh?

Below the code used in F4.

$('#contact').on('valid', function (e) {
  e.preventDefault();

alert('This part works fine')

  $.ajax({
    type: 'POST',
    dataType: 'json',
    data: $(this).serialize(),
    beforeSend: function(x) {
      if (x && x.overrideMimeType) {
        x.overrideMimeType("application/json;charset=UTF-8");
      }
      $('#abS').hide();$('#abA').hide();
    },
    url: '/code/?a=contact',
    success: function(data) {
      if (data.success == true) {
        $('#abS').fadeIn(500);
      }
      else {
        $('#abA').fadeIn(500);
      }
    }
  });
});

I don't get an error. I tried to add $(this).serialize() inside a alert box without success... it remains empty.

How do I serialize and send the data with jQuery Ajax? And prevent a page refresh?

Thanks!

ShadowDanser almost 5 years ago

Please let me know if someone got it to work: forms, abide, and submit without page refresh.

After I submit the form I get a page refresh. I also can not get the data with serialize(). There are no errors.

I doubt if the is_ajax check in abide is working correct. I tried to edit it... setting it to true, this works a little bit but then you can hit the submit button only once. The part of foundation remains problematic.

Bryan Leaman almost 5 years ago

I liked the professional look the custom radio buttons and checkboxes provided in Foundation 4 and am disappointed that they no longer work and that I have to revisit my code if I eventually choose to "upgrade" (or is it downgrade?) to Foundation 5. Wasn't it always our choice to utilize the custom forms by adding the "custom" class to the form element? Seems to me a better "upgrade" would've been to provide a "custom-if-large" or similar class, and if a developer doesn't want the custom forms on larger tablet devices either, then don't use the class at all.

Bryan Leaman almost 5 years ago

ShadowDanser: Is the "this" in " $(this).serialize()," referencing a form or an form element? Does "data: $(this.form).serialize()," work better?

Depending on what event is triggering your ajax call, you may also need to add 'onsubmit="javascript:return false;" ' to the form.

Laura about 4 years ago

@Ghaida Zahran
we are thankful you're giving us a great framework to work with, but as @Bryan Leaman says, not giving us the possibility to customize forms is not a fair decision. One should be able to choose wether to use or not customization at his own risk for the detriment of mobile experience or, better, we may apply custom forms only in medium-up devices.

I really hope you'll give us some half-official plugin solution for this.

Roy McKenzie about 4 years ago

I've made a plugin for custom styled <select>s in Foundation. Supports single select and multiple select <select> elements. Uses Foundation universal Dropdowns plugin. https://github.com/roymckenzie/foundation-select

Justin Neel almost 4 years ago

The statement below is quite vague. Were users expecting ugly select boxes and checkboxes and were thrown off by how much better they looked? In all seriousness though, it would be nice to know the specific problems.

"Custom forms override native functionality in Android and iOS to the detriment of the user who's expecting select boxes and checkboxes to function in a specific way on their device."

ajaymittal 3 months ago