Bending Form Inputs to my Will with Smarty -- MUAHAHAHAHAHA

Do something cool with CMS? Show us ...
This board is for 'Answers', and the discussion of answers... Not for questions.
Locked
Simon66
Power Poster
Power Poster
Posts: 250
Joined: Wed Aug 29, 2007 4:36 am
Location: Sydney Australia

Bending Form Inputs to my Will with Smarty -- MUAHAHAHAHAHA

Post by Simon66 »

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... ;D ...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
Attachments
screencap.png
screencap.png (7.37 KiB) Viewed 8458 times
User avatar
Rolf
Dev Team Member
Dev Team Member
Posts: 7825
Joined: Wed Apr 23, 2008 7:53 am
Location: The Netherlands
Contact:

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

Post by Rolf »

Bending Form Inputs to my Will with Smarty -- MUAHAHAHAHAHA
LOL
Nice tutorial Simon66, thanks!!
- + - + - + - + - + - + -
LATEST TUTORIAL AT CMS CAN BE SIMPLE:
Migrating Company Directory module to LISE
- + - + - + - + - + - + -
Image
calguy1000
Support Guru
Support Guru
Posts: 8169
Joined: Tue Oct 19, 2004 6:44 pm
Location: Fernie British Columbia, Canada

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

Post by calguy1000 »

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.
Follow me on twitter
Please post system information from "Extensions >> System Information" (there is a bbcode option) on all posts asking for assistance.
--------------------
If you can't bother explaining your problem well, you shouldn't expect much in the way of assistance.
Simon66
Power Poster
Power Poster
Posts: 250
Joined: Wed Aug 29, 2007 4:36 am
Location: Sydney Australia

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

Post by Simon66 »

Thanks CalGuy, I'm fixing that now.

Simon66
psy
Power Poster
Power Poster
Posts: 463
Joined: Sat Jan 22, 2005 11:19 am

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

Post by psy »

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.
User avatar
Dr.CSS
Moderator
Moderator
Posts: 12708
Joined: Thu Mar 09, 2006 5:32 am
Location: Arizona

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

Post by Dr.CSS »

I would just change the CSS to match the classes/IDs in the form, just mho...
psy
Power Poster
Power Poster
Posts: 463
Joined: Sat Jan 22, 2005 11:19 am

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

Post by psy »

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.
User avatar
Dr.CSS
Moderator
Moderator
Posts: 12708
Joined: Thu Mar 09, 2006 5:32 am
Location: Arizona

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

Post by Dr.CSS »

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}
psy
Power Poster
Power Poster
Posts: 463
Joined: Sat Jan 22, 2005 11:19 am

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

Post by psy »

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.
Locked

Return to “Tips and Tricks”