Forums

Hello again!

I am developing a site using the responsive Showroom template from YooTheme on a Joomla 3.0.3 install. I have the Joomla 3 version of CF and plugin installed.

Are there any tutorials I can follow on making my CF forms responsive? The forms look wonderful on the desktop, but become difficult to work with on a mobile device.

Thanks!!
Rick

Hi Rick,

As usual you are ahead of the crowd. No tutorials that I know of, a bare handful of mentions in the forums is all.

What are the specific problems you are seeing?

Bob

Figures. Sorry!!!!

As an example, I have a text box inserted on my form. I need to set a width for that text box when I create the field. If I set it to 60 (perhaps it is an address) it works fine on a larger screen. However, viewing that form on a narrow mobile device runs that field off the right side of the screen. I can certainly reduce the field width so that it fits well on a mobile device, but then it looks awkward on a full-size screen.

I have already seen that I cannot use the "Multi field row" feature, as that completely breaks on a smaller browser. That's okay, as I will just avoid using that.

Perhaps there is some CSS that needs to be included with CF forms in a responsive environment? I dunno - I am not smart enough to know that, which is why I am here!!

Rick

Hi Rick,

Joomla! 3.0 has Bootstrap included - about which I know next to nothing - but it sounds helpful?

From a quick browse here there is some Form HTML included that looks about right (about half-way down the page).

Maybe some classes could be added to pull that in, or to replace the CF HTML/CSS with a BootStrap compatible set?

Bob

Thanks, Bob! That link is very helpful!!

I will go through this and see what happens. I will, of course, share what I find here, should I actually get something to work. Even a blind squirrel gets a nut...

😀

Hi Rick,

I've now written a first FAQ on getting ChronoForms to work with BootStrap. The basics all look OK but there is still more to do.

Bob

Hi Rick,

I've put my development BootStrap form on-line here so you can see what is working so far.

Note: this has a later version of the code than the one in the FAQs.

Bob

Thanks SO much for all of this, Bob!!! I will have some time later today to go through it all.

Rick

Hi all!
Just wondering, maybe someone has already tried using the Twitter Bootstrap 3 with this JS?
Is there any difference?
P.S. I just have made an experiment with custom template. Only swapping the bootstrap.min.css to third version doesn't work
Thanks!

Hi 01,

Not as far as I know.

Bob

Just my 5 cents concerning TB 2.x.
As I observed there is no need to load whole bootstap.min.css once more.
I've customized the css - have chosen only "forms". So the actual size of additional css whichs is loading with JS is 18kb vs ~110kb of original.
What concerns TB 3.x: they are using "class" attributes, so this JS won't work with it.

Hello all,

Since ChronoForms can be loaded in via module, I would think one choice would be to have two (or 3 modules) of the same form. One for Desktop, One for Tablet and One for Cell device.

Then you would use Twitter Bootstrap's visible-phone, visible-tablet, visible-desktop in the modules's Module Class Suffix field.

http://getbootstrap.com/2.3.2/scaffolding.html

Yes I know making 3 versions of a form can be a headache. But until someone here creates and shares a responsive form layout that works, it's at least a choice for those who need this solution right now.

Rowby

Hi Rick,

I've put my development BootStrap form on-line here so you can see what is working so far.

Note: this has a later version of the code than the one in the FAQs.

Bob

Hi Bob,

Any updates on responsive forms using twitter bootstrap? The FAQ link no longer works. And perhaps you have a new FAQ as well as an actual form that we can cannibalize for our own use???

Hi all,

V5 already has the option to apply bootstrap styles to your form, its supposed to be released today or tomorrow hopefully, unless something delays this!

Regards,
Max

Hi rowby,

You can also apply some bootstrap files in v4 using the Class box. They won't work with all elements though as the HTML built by CFv4 has a different structure. The script in the FAQ basically used JavaScript to re-write the HTML into the Bootstrap structure.

I did do some more work with it but in the end the last form I used it on was re-written entirely using jQuery (because I wanted a drop-down element using images).

Bob