Hi there!

I'd like to run RS Forms on a YooTheme-template which uses the UIKit framework.

Running RSForms Pro out of the box already looks quite neat if using the Responsive CSS3 design - with one exception, on a multipage layout, the "prev" and "next" / "submit" button are located next to each other without any space in between.

UIKit already comes along with form styles, which can be found here: www.getuikit.com/docs/form.html

YooThemes has quite a big user base, and since there aren't too many alternatives for styling forms around for Joomla, I'd like to believe there's supposed to be quite a few other people who could profit from a nice RSForms / Yoo / UIKit integration without having to hack too deeply into developing the code themselves. Having said that: Are there any pointers as to where to look for a good solution? I did a few Google searches but couldn't come up with any helpful info on how to integrate RSForms in a stylish and functional way into Yoo / UIKit templates.

Any help would be highly appreciated!

Not that difficult and I have done it for a number of forms. First turn of auto layout generation in the form properties. Then replace all the appropriate classes with the proper UIkit equivalents. Just make sure never to generate the form layout, since you will loose your changes.

Good luck.

Here's a modification of the RSForm!Pro example form's layout (that gets installed by default along with the component), adjusted to use the UIKit classes:

<h2>{global:formtitle}</h2>
{error}
<!-- Do not remove this ID, it is used to identify the page so that the pagination script can work correctly -->
<fieldset class="uk-container" id="rsform_1_page_0">
<div class="uk-form-row uk-width-medium-1-2 uk-container-center">
<div>{Header:body}</div>
<span class="formValidation">{Header:validation}</span>
<p class="uk-form-help-inline">{Header:description}</p>

</div>
<div class="uk-form-row">
<div class="uk-form-label">{FullName:caption}<strong class="formRequired">(*)</strong></div>
<div class="uk-form-controls">{FullName:body}
<span class="formValidation">{FullName:validation}</span>
<p class="uk-form-help-inline">{FullName:description}</p>
</div>
</div>
<div class="uk-form-row">
<div class="uk-form-label">{Email:caption}<strong class="formRequired">(*)</strong></div>
<div class="uk-form-controls">{Email:body}
<span class="formValidation">{Email:validation}</span>
<p class="uk-form-help-inline">{Email:description}</p>
</div>
</div>
<div class="uk-form-row">
<div class="uk-form-label">{CompanySize:caption}<strong class="formRequired">(*)</strong></div>
<div class="uk-form-controls">{CompanySize:body}
<span class="formValidation">{CompanySize:validation}</span>
<p class="uk-form-help-inline">{CompanySize:description}</p>
</div>
</div>
<div class="uk-form-row">
<div class="uk-form-label">{Position:caption}<strong class="formRequired">(*)</strong></div>
<div class="uk-form-controls">{Position:body}
<span class="formValidation">{Position:validation}</span>
<p class="uk-form-help-inline">{Position:description}</p>
</div>
</div>
<div class="uk-form-row">
<div class="uk-form-label">{ContactBy:caption}</div>
<div class="uk-form-controls">{ContactBy:body}
<span class="formValidation">{ContactBy:validation}</span>
<p class="uk-form-help-inline">{ContactBy:description}</p>
</div>
</div>
<div class="uk-form-row">
<div class="uk-form-label">{ContactWhen:caption}<strong class="formRequired">(*)</strong></div>
<div class="uk-form-controls">{ContactWhen:body}
<span class="formValidation">{ContactWhen:validation}</span>
<p class="uk-form-help-inline">{ContactWhen:description}</p>
</div>
</div>
<div class="uk-form-row">
<div class="uk-form-label">{Submit:caption}</div>
<div class="uk-form-controls">{Submit:body}
<span class="formValidation">{Submit:validation}</span>
<p class="uk-form-help-inline">{Submit:description}</p>
</div>
</div>
<div class="uk-form-row uk-width-medium-1-2 uk-container-center">
<div>
{Footer:body}<span class="formValidation">{Footer:validation}</span>
<p class="uk-form-help-inline">{Footer:description}</p>
</div>
</div>
</fieldset>


Note that you will also need to add the "uk-form-horizontal" class in Components >> RSForm!Pro >> Manage Forms >> edit your form >> Properties >> Form Attributes >> CSS Class field for this to work.

To add the modified layout to your form, head to Components >> RSForm!Pro >> Manage Forms >> edit the "RSForm! Pro example" form >> Properties >> Form Layout >> set "Auto Generate Layout" to "No" and paste the layout provided above over the one that was automatically generated by the component.

Another thing that you need to remember is to include the UIKit files either in your template's "index.php" file, or in the form's CSS and Javascript tab. To do so, you must first copy them in your template's CSS folder.

In the template:

Head to Extensions >> Template Manager >> Templates >> edit your template's files >> Editor >> edit the "index.php" file and add the file paths using a line of code for each file, similar to the one below (depending on the file's exact location):

$doc->addStyleSheet('templates/'.$this->template.'/css/uikit.css');

In the form's CSS and Javascript tab:

In the same manner, add a line similar to the following one, for each file (depending on the file's exact location):

<link rel="stylesheet" href="/your_website/templates/template_name/css/uikit.css" type="text/css" />

Remember to replace "template_name" with the name of your template's folder. Also, make sure to correctly replicate the folder structure in which the files are found.

Ive done this on a few sites as well. Would love to see native integration. Office feature request to have this work automagically please!

I agree, our design firm spends a lot of extra time manually changing styling to match our yootheme templates and uikit. We would gladly help sponsor this feature!

Hi There,

is there actually any solution for yootheme gusto?

The next RSForm!Pro version (which is scheduled to be released soon) will provide support for UIKIT.

Hi,

you can soon define "soon" precisely? One day, two days....

a2dms wrote:
Unfortunately no, i can't provide an estimate for this, but it should be available this month.

I see the new RS Form update is out today. Did it include support for UIKIT and if so is there any notes on how to call UIKIT from RSForm Pro ?

Thanks.

Hi, same Question. Is there new information?

No, the UIKIT integration hasn't been released just yet. We announce the latest rsjoomla.com news and promotions on our blog:

https://www.rsjoomla.com/blog.html

Any news. This is badly needed as soon as possible. We are about to ban rsjoomla from all our development work without this.

Feel free to choose whatever tool best suits you.

We've already answered that this will be available soon, so this topic is now locked.