Styling Advanced Forms with Bootstrap

  • Resolved lorna93

    (@lorna93)


    7 years ago

    Hey there!

    Great plugin! I just have a few quick questions.

    I’m using bootstrap as my front-end framework and was wondering if there’s a way to access form elements directly to include your own classes etc and avoid the ones that acf generates?

    As well, all acf-scripts etc. are added in with every form. Is there a way to completely strip back all this and just have the form?

    Even if I wanted to include them, I would usually bundle all my scripts together anyway? I also already use jQuery so seems a waste to include it again.

    I hope this makes sense! I’ve seen there’s a pro edition coming out soon, is this extra customisation something that’s going to be included?

    Thanks so much!

    Lorna

Viewing 1 replies (of 1 total)
  • Plugin Author fabianlindfors

    (@fabianlindfors)

    Hi! Glad you’re enjoying AF.

    Regarding the acf-scripts, they are unfortunately needed as ACF performs validation through AJAX before submitting a form. I would not recommend getting rid of those scripts. If you use wp_enqueue_script for jQuery and your scripts then it won’t be included more than once!

    I haven’t tried using Bootstrap with AF but I think it should be totally doable. The key to bootstrap-ifying a form is to add a few classes to different elements, AF has some filters which can be used to do exactly this.

    You can alter the field wrappers HTML attributes using the filter af/form/field_attributes. With this you could add your own classes, e.g. “form-group”. There is an equivalent filter for the form element called af/form/attributes. All filters relevant to form rendering can be found in core/core-forms.php.

    Bootstrap also seem to like having the “form-control” class on input elements. The input elements in forms come directly from ACF and thus must be changed through ACF. Luckily ACF supports adding your own classes in the field settings and if that’s a bit too manual I would suggest using the acf/prepare_field filter (documentation).

    The pro version will not include any extra customisation features. I believe that anything like that is essential to the plugin and should be included in the free version. If you find some customisation feature which you would like to see in AF then tell me, I will consider adding it!

    Hope this helps!

Viewing 1 replies (of 1 total)
  • The topic ‘Styling Advanced Forms with Bootstrap’ is closed to new replies.