• twitter image
  • facebook image
  • youtube image
  • linkedin image
Language: CMS Made Simple Czech CMS Made Simple France CMS Made Simple Spain CMS Made Simple Hungary CMS Made Simple Russia CMS Made Simple Netherlands

All times are UTC




Post new topic This topic is locked, you cannot edit posts or make further replies.  [ 9 posts ] 
Author Message
 Post subject: Bending Form Inputs to my Will with Smarty -- MUAHAHAHAHAHA
PostPosted: Fri Aug 30, 2013 11:13 am 
Offline
Forum Members
Forum Members
User avatar

Joined: Wed Aug 29, 2007 4:36 am
Posts: 247
Location: Sydney Australia
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:
\$1:
{$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:
\$1:
 [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:
\$1:
<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.
\$1:
<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.
\$1:
{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:
\$1:
<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:
\$1:
<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:
\$1:
<input class="cms_submit" name="mc4758sr_submit" id="mc4758sr_submit" value="Submit" type="submit" />

And this is the <button> from my ThemeForest theme:
\$1:
<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:
\$1:
<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 6022 times ]
Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: Bending Form Inputs to my Will with Smarty -- MUAHAHAHAH
PostPosted: Fri Aug 30, 2013 5:07 pm 
Offline
Dev Team Member
Dev Team Member
User avatar

Joined: Wed Apr 23, 2008 7:53 am
Posts: 7707
Location: The Netherlands
\$1:
Bending Form Inputs to my Will with Smarty -- MUAHAHAHAHAHA
LOL
Nice tutorial Simon66, thanks!!

_________________
$1

Did my post help you solving a problem at your (customers) website and it saved you many hours of work? Great!! Consider buying me a cup of coffee in return!



Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: Bending Form Inputs to my Will with Smarty -- MUAHAHAHAH
PostPosted: Fri Aug 30, 2013 5:32 pm 
Offline
Dev Team Member
Dev Team Member
User avatar

Joined: Tue Oct 19, 2004 6:44 pm
Posts: 8170
Location: Fernie British Columbia, Canada
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:

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

can become

\$1:
<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.


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: Bending Form Inputs to my Will with Smarty -- MUAHAHAHAH
PostPosted: Fri Aug 30, 2013 11:41 pm 
Offline
Forum Members
Forum Members
User avatar

Joined: Wed Aug 29, 2007 4:36 am
Posts: 247
Location: Sydney Australia
Thanks CalGuy, I'm fixing that now.

Simon66


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: Bending Form Inputs to my Will with Smarty -- MUAHAHAHAH
PostPosted: Sun Sep 29, 2013 10:17 pm 
Offline
Power Poster
Power Poster

Joined: Sat Jan 22, 2005 11:19 am
Posts: 463
Nice but maybe I'm a bit lazy ;) I do it in shorthand, eg:

\$1:
{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.


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: Bending Form Inputs to my Will with Smarty -- MUAHAHAHAH
PostPosted: Tue Oct 15, 2013 7:27 pm 
Offline
Administrator
Administrator
User avatar

Joined: Thu Mar 09, 2006 5:32 am
Posts: 12674
Location: Arizona
I would just change the CSS to match the classes/IDs in the form, just mho...

_________________
Check ver. CMSMS, PHP, server OS, in System Information page.
Default content http://multiintech.com/defaultcontent/
People are Wonderful
Business is Great
Life is Terrific
Ever wonder what happened to the Album module? Well it is alive and well.
http://album.multiintech.com/
$1


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: Bending Form Inputs to my Will with Smarty -- MUAHAHAHAH
PostPosted: Tue Oct 15, 2013 9:08 pm 
Offline
Power Poster
Power Poster

Joined: Sat Jan 22, 2005 11:19 am
Posts: 463
Dr.CSS \Dr.CSS:
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.


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: Bending Form Inputs to my Will with Smarty -- MUAHAHAHAH
PostPosted: Tue Oct 15, 2013 9:16 pm 
Offline
Administrator
Administrator
User avatar

Joined: Thu Mar 09, 2006 5:32 am
Posts: 12674
Location: Arizona
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}

_________________
Check ver. CMSMS, PHP, server OS, in System Information page.
Default content http://multiintech.com/defaultcontent/
People are Wonderful
Business is Great
Life is Terrific
Ever wonder what happened to the Album module? Well it is alive and well.
http://album.multiintech.com/
$1


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: Bending Form Inputs to my Will with Smarty -- MUAHAHAHAH
PostPosted: Tue Oct 15, 2013 9:46 pm 
Offline
Power Poster
Power Poster

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


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
Display posts from previous:  Sort by  
Post new topic This topic is locked, you cannot edit posts or make further replies.  [ 9 posts ] 

All times are UTC


Who is online

Users browsing this forum: No registered users


You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Search for:
Jump to: