Style Forms With Bootstrap & JQuery

Forum
Last Post
Threads / Messages

KittHaven

Member
Member
Joined
May 21, 2013
Messages
471
Points
28
Age
25
Location
Devon, UK
Mysidian Dollar
8,236
Hello! Here is a little tiny tutorial for how to style forms using JQuery! You can also use this to style different things if you need to, this was just me doing this on a test basis to see if I could do it. And I could! And it wasn't too difficult, either. Score!

Now before we get started, bear in mind that if you add Bootstrap to your existing theme it might change things ever so slightly layout wise. If you don't mind that, though, let's keep going! (Mainly you might notice spacing and text changing)

If you use Bootstrap (specifically Bootstrap 5 is what I'm using) you can use JQuery to restyle some of the forms and stuff that aren't too easy to change in base mysidia haha. I am also using 1.3.6 so that might mean things are ever so slightly different in past versions, but I feel it should still work out...

I just made my forms on the donate page use the 'form-floating' class which looks like below!

2021-12-29 03_06_38-Bean Pets and 17 more pages - Personal - Microsoft Edge.png

You need to wrap them in individual divs to make it work so the jquery is a bit longer than just needing to add a new class to the 'donateform'.

First you need to add Bootstrap and JQuery to your theme if you have neither.

In your header.tpl add:

HTML:
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

{$header->loadScript("//ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js")} <!-- JQuery, you don't need this if you already have it, though if you have a lower version than 3.6 maybe you could update to this one -->

In template.tpl also add this (Bootstrap needs it for Javascript):

HTML:
<!-- SCRIPTS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script> <!-- Javascript Bundle -->

Then create a new file called something like jquery.js.

And add this line in template.tpl below where you added the JS bundle:

HTML:
<script src="{$home}{$temp}{$theme}/jquery.js"></script> <!-- My JQuery -->

Now open your jquery.js and paste this in:

JavaScript:
/* Form Inputs */
/* Thanks to Kyttias for this part! This uses Bootstrap to style the general form look. */
$("form").attr("role","form");
$("input").addClass("form-control");
$(":checkbox").removeClass("form-control").css("width","");
$(":radio").removeClass("form-control").css("width","");
$("select").addClass("form-control");
$("textarea").addClass("form-control");
/* End Form Inputs */

/* Input Boxes */
/* To make your own, 'inspect element' on your site to see what the ID of a form box is and copy and past the below lines to add more. The # denotes an ID. */
$("#amount").attr("placeholder", "Enter amount").attr("name", "amount"); /* Adds the placeholder text & name */
$("#amount").wrap("<div class='form-floating mb-3'></div>"); /* Wraps the form in a div that makes it form-floating*/
$("#amount").after("<label for=\"amount\">Amount</label>"); /* Adds the label that will appear inside of it */
$("#recipient").attr("placeholder", "Enter recipient").attr("name", "recipient"); /* Adds the placeholder text & name */
$("#recipient").wrap("<div class='form-floating'></div>"); /* Wraps the form in a div that makes it form-floating*/
$("#recipient").after("<label for=\"recipient\">Recipient</label>"); /* Adds the label that will appear inside of it */
/* End Input Boxes */

I have commented it so you can see what each line does and also instructions for how to add more but yeah! You will need to then open view/main/donateview.php and remove some of the lines, like:

PHP:
->buildComment("Donate to: ", FALSE)

Etc... as they aren't needed anymore, unless you want them of couse.

I won't provide files to download just because I have other things I've done to mine and it might get confusing lol. Hopefully this helps you to style some of your things, anyway. Also you can use JQuery without Bootstrap of course so feel free to just play around!
 

Similar threads

Users who are viewing this thread

  • Forum Contains New Posts
  • Forum Contains No New Posts

Forum statistics

Threads
4,267
Messages
33,048
Members
1,602
Latest member
BerrieMilk
BETA

Latest Threads

Latest Posts

Top