CMS Made Simple Forums

Posted: **Fri Aug 30, 2013 11:13 am**

First my confession: I've nearly stopped designing original websites and I now just buy a responsive template from ThemeForest. Best $15 bucks I've ever spent (per site). I only use it as a starter theme and it is usually unrecognisable when I've finished. But the code...

...there is so much to work with.

The downside is that I have to shoehorn the code into CMSms and sometimes it doesn't all play well together.

Now a tricky bit is the forms. The ThemeForest themes have great forms but they usually require very specific multiple classes, id's, placeholder text etc.
And CMSms generates most form inputs from the core, so classes, id's and other attributes are fixed.

So this is how I bend them to my will:
This is what I did with the Self Registration 'Registration Template 1'.

1) I added this:

Code: Select all

{$controls|@print_r}

to the end of the default Self Reg template (Registration Template 1).
This prints out an array of all the controls, this is the first one - email address as username:

Code: Select all

 [username] => stdClass Object (
 [color] => blue
 [marker] => *
 [required] => 1
 [prompt] => Email Address
 [name] => username
 [control] => <input id="mc4758sr_input_username" class="cms_textfield" type="text" maxlength="40" size="40" value="" name="mc4758sr_input_username">
)

2) The form input from the ThemeForest theme that I need to duplicate looks like this:

Code: Select all

<label for="txt_email">
	<input id="txt_email" class="txt fill-width" type="email" placeholder="Enter your e-mail address"/>
</label>

After checking with FireBug I found the id isn't used for styling or anything else so it could change. This class needed to replace the default class in the Self Reg form input and the placeholder needed to be carried over.

3) Next I took the Self Reg default input and the ThemeForest theme input and put them together.

Code: Select all

<input id="mc4758sr_input_username" class="cms_textfield" type="text" maxlength="40" size="40" value="" name="mc4758sr_input_username">

<label for="txt_email">
	<input id="txt_email" class="txt fill-width" type="email" placeholder="Enter your e-mail address"/>
</label>

Based on what I saw here I could swap the class and then I needed to find something else to swap out for the placeholder. So I chose to lose the 'size="40"' because this was being set in the CSS.

4) So this is where Smarty does its magic. Smarty can use 'replace' to replace arrays. With this I built a Smarty find & replace.

I set up the 'find' variable with the things I wanted replaced.
Then the 'replace' variable with the values from the ThemeForest theme form input.
Finally I inserted a separate named control (plus find & replace vars) into its appropriate input field in the ThemeForest theme code.

Code: Select all

{assign var=find value=['cms_textfield', 'size="40"']}
{assign var=replace value=['txt fill-width', 'placeholder="Enter your e-mail address"']} 
{$username->control|replace:$find:$replace}

Three fields look like this:

Code: Select all

<div class="form-action">
		<label for="mc4758sr_input_fullname">
			{assign var=find value=['cms_textfield', 'size="80"']}
			{assign var=replace value=['txt fill-width', 'placeholder="Enter full name"']} 
			{$fullname->control|replace:$find:$replace}
		</label>
	<div class="wrap-2col clearfix">
		<div class="col">
		<label for="mc4758sr_input_username">
			{assign var=find value=['cms_textfield', 'size="40"']}
			{assign var=replace value=['txt fill-width', 'placeholder="Enter your e-mail address"']} 
			{$username->control|replace:$find:$replace}
		</label>
		<label for="mc4758sr_input_username_again">
			{assign var=find value=['cms_textfield', 'size="40"']}
			{assign var=replace value=['txt fill-width', 'placeholder="Re-enter your e-mail adress"']}
			{$username_again->control|replace:$find:$replace}
		</label>
	</div>

And the output of the code above looks like this:

Code: Select all

<div class="form-action">
	<label for="mc4758sr_input_fullname">
		<input type="text" class="txt fill-width" name="mc4758sr_input_fullname" id="mc4758sr_input_fullname" value="" placeholder="Enter full name" maxlength="255" />
	</label>
	<div class="wrap-2col clearfix">
		<div class="col">
			<label for="mc4758sr_input_username">
				<input type="text" class="txt fill-width" name="mc4758sr_input_username" id="mc4758sr_input_username" value="" placeholder="Enter your e-mail address" maxlength="40" />
			</label>
			<label for="mc4758sr_input_username_again">
				<input type="text" class="txt fill-width" name="mc4758sr_input_username_again" id="mc4758sr_input_username_again" value="" placeholder="Re-enter your e-mail adress" maxlength="40" />
			</label>
		</div>

5) And last but not least, how to change the standard Submit input into a very styleable <button>.
This is the Submit input generated by Self Reg default template:

Code: Select all

<input class="cms_submit" name="mc4758sr_submit" id="mc4758sr_submit" value="Submit" type="submit" />

And this is the <button> from my ThemeForest theme:

Code: Select all

<button class="btn btn-red btn-submit" type="submit">Register</button>

So I just added the 'id' and 'name' values from the Self Reg input into the button code:

Code: Select all

<button id="mc4758sr_submit" class="btn btn-red btn-submit" type="submit" name="mc4758sr_submit">Register</button>

Then the finished form ended up looking like the image below.

Hope this helps somebody.

Simon66

Posted: **Fri Aug 30, 2013 5:07 pm**

Bending Form Inputs to my Will with Smarty -- MUAHAHAHAHAHA

LOL
Nice tutorial Simon66, thanks!!

Posted: **Fri Aug 30, 2013 5:32 pm**

Tip: don't hardcode the actionid (as it's subject to change by moving things to different pages/templates, or even differernt places in the page/template.

Use: {$actionid} instead. It's available from all actions of all of my modules. Take note that the {$actionid} variable (and a few others) get overwritten on each module action..

i.e:

Code: Select all

<button id="mc4758sr_submit" class="btn btn-red btn-submit" type="submit" name="mc4758sr_submit">Register</button>

can become

Code: Select all

<button id="{$actionid}submit" class="btn btn-red btn-submit" type="submit" name="mc4758sr_submit">Register</button>

You can custom build your input fields for almost any form using this methodology.

Posted: **Fri Aug 30, 2013 11:41 pm**

Thanks CalGuy, I'm fixing that now.

Simon66

Posted: **Sun Sep 29, 2013 10:17 pm**

Nice but maybe I'm a bit lazy

I do it in shorthand, eg:

Code: Select all

{FormBuilder|replace:'cms_submit':'button'|replace:'emailfrom"><input type="text"':'emailfrom"><input type="email"' form=contact_mt}

The 'emailfrom' is a class I have assigned to the email field in the FormBuilder contact form that is applied to the wrapping div.

You can replace anything in a smarty tag when using the modifier on the tag name.

Posted: **Tue Oct 15, 2013 7:27 pm**

I would just change the CSS to match the classes/IDs in the form, just mho...

Posted: **Tue Oct 15, 2013 9:08 pm**

Dr.CSS wrote:I would just change the CSS to match the classes/IDs in the form, just mho...

That's not always possible, eg FB does not (AFAIK) have a method for changing the class on the Submit button or add extra meta such as 'autocorrect' to an input tag.

Also, the frameworks typically apply the classes to the input tag itself, not the wrapping div.

Posted: **Tue Oct 15, 2013 9:16 pm**

The templates allow you to wrap the submit button so you can apply styles to it, the framework CSS can still be used by changing how it calls the inputs...

div.somethingSubmit input.cms_submit {framework style}

Posted: **Tue Oct 15, 2013 9:46 pm**

Changing the CSS or overwriting the framework's CSS, or rewriting the form, adds time and work to the job. It can also increase page download speed.

I find the replace modifier quick and efficient.

Use whatever method works best for you.

CMS Made Simple Forums

Bending Form Inputs to my Will with Smarty -- MUAHAHAHAHAHA

Bending Form Inputs to my Will with Smarty -- MUAHAHAHAHAHA

Re: Bending Form Inputs to my Will with Smarty -- MUAHAHAHAH

Re: Bending Form Inputs to my Will with Smarty -- MUAHAHAHAH

Re: Bending Form Inputs to my Will with Smarty -- MUAHAHAHAH

Re: Bending Form Inputs to my Will with Smarty -- MUAHAHAHAH

Re: Bending Form Inputs to my Will with Smarty -- MUAHAHAHAH

Re: Bending Form Inputs to my Will with Smarty -- MUAHAHAHAH

Re: Bending Form Inputs to my Will with Smarty -- MUAHAHAHAH

Re: Bending Form Inputs to my Will with Smarty -- MUAHAHAHAH