Content / Old tutorial about porting Solid theme / 10. Solid - plugin (contact page)

10. Solid - plugin (contact page)

Don't forget - it was written in 2014

comments: 0
- tested on github files from 4.7.2014. I added source code after 9th part (you can download it from download section on main page) and I only installed theme on new github version.
Warning: I maybe did some steps that are not the best solution, but while there are no official documentation how to do it, copy them only if you know what you do.


The goal of this part:
e107plugin contact

Now contact page looks this way:
e107plugin contact

To add contact form, you need set Site Contact Person(s)in Email Contact Info (Site preferences):
e107plugin contact

If you open contact.php page, you will see that output is based on something like this:
e107plugin contact

Problem is that we need in our page 2 columns, form should be go first, then info area...

I didn't want to change core contact.php, so I decided for:
- empty output of contact.php and use 2 new menus for this.
The result of this solution is that after sending form, you got message about sending in blue area and your contact form and adress will be still there (it looks better then empty page with one message. If you don't want this, you only do steps bellow in different parts of code.

e107plugin contact

As first, we should set layout correctly.
e107plugin contact1. copy contact_template to theme folder and at the end add this:
$CONTACT_TEMPLATE['info'] = "";
$CONTACT_TEMPLATE['form'] = "";
(It's temporarily solution for finishing layout)

2. in theme.php add new tablestyles:
- for contact columns:
if($style == 'contactcolumn')
	{
		echo '
          <h4>'.$caption.'</h4>  
          <div class="hline"></div>      
          <p>'.$text.'</p>
        ';
		return;			
	}

- for original contact.php
if($style == 'contact')
	{
  echo '
  <div id="blue">
  <div class="container">
    <div class="row">
      <h3>'.$caption.'</h3>
       <p>'.$text.'</p> 
    </div><!-- /row -->
  </div> <!-- /container -->
</div><!-- /blue --> ';
		return;			
	}

3. in theme.php set final layout for contact page:
$LAYOUT['solid_contact'] =  ' 
  {SETSTYLE=contact} 
  {---}
  <div id="contactwrap"></div> 
  <div class="container mtb">
    <div class="row">
      {SETSTYLE=contactcolumn}
      <div class="col-lg-8">   
        {MENU=contact}
      </div><! --/col-lg-8 -->
      <div class="col-lg-4">
        {MENU=contact}
      </div>
    </div><! --/row -->
  </div><! --/container -->  
';

Using contact menu is again only temporarily solution for finishing layout.
Result:
e107plugin contact

Now we will do changes only with menus and templates.
4. go to contact plugin and copy contact_menu.php to 2 new files.
For example: contactform_menu.php and contactinfo_menu.php.
Change calling this menus in your contact layout.
Note: using contact plugin is again temporarily solution for better understanding
{MENU=contact/contactform}
{MENU=contact/contactinfo}

Nothing should change on your page.

5. open contact_template (in theme folder) and change name of template
'form' to 'bt3_form'
'info' to 'bt3_info'
Example:
$CONTACT_TEMPLATE['bt3_info'] = "
$CONTACT_WRAPPER['bt3_form']['CONTACT_IMAGECODE'] 
$CONTACT_TEMPLATE['bt3_form'] = "

Why not create a copy? Because we have $CONTACT_TEMPLATE['form'] = ""; so it's useless.
And why bt3? Because we will create bootstrap3 form and actual form is still table based.

6. open new menu - contactform_menu.php
You could have opened contact_menu.php and contact.php files too, the result will be combination of these 2 files
Do the same with contactinfo_menu.php (copy from contactform_menu.php and change word FORM/form to INFO/info)

This way menus are prepared.
Result:
e107plugin contact7. in contact_template.php (in theme folder) start templating
(open original theme code a do it by that)
Don't forget that you need to use correct value: label for.
For info part, only insert code into preferencies. Be carefull for new lines.
I left table only for image's part.
$CONTACT_WRAPPER['bt3_form']['CONTACT_IMAGECODE'] 			= "<tr><td>".LANCONTACT_16."<br />{---}";
	$CONTACT_WRAPPER['bt3_form']['CONTACT_IMAGECODE_INPUT'] 	= "{---}</td></tr>";
	$CONTACT_WRAPPER['bt3_form']['CONTACT_PERSON']			= "<div class='form-group'><label for='contact_person'>".LANCONTACT_14."</label>{---}</div>";
	$CONTACT_WRAPPER['bt3_form']['CONTACT_NAME']				= "<div class='form-group'><label for='author_name'>".LANCONTACT_03."</label>{---}</div>";
	$CONTACT_WRAPPER['bt3_form']['CONTACT_EMAIL']				= "<div class='form-group'><label for='email_send'>".LANCONTACT_04."</label>{---}</div>";
	$CONTACT_WRAPPER['bt3_form']['CONTACT_SUBJECT']			= "<div class='form-group'><label for='subject'>".LANCONTACT_05."</label>{---}</div>";  
	$CONTACT_WRAPPER['bt3_form']['CONTACT_EMAIL_COPY']	= "<div class='form-group'><label for='email_copy'>".LANCONTACT_07."</label>{---}</div>";
	$CONTACT_WRAPPER['bt3_form']['CONTACT_BODY']		  	= "<div class='form-group'><label for='body'>".LANCONTACT_06."</label>{---}</div>";  
    
	$CONTACT_TEMPLATE['bt3_form'] = "
	<form action='".e_SELF."' method='post' id='contactForm' role='form'>	
	{CONTACT_PERSON}
  {CONTACT_NAME}
  {CONTACT_EMAIL}
	{CONTACT_SUBJECT}
  {CONTACT_EMAIL_COPY}
  {CONTACT_BODY}  
  <table class='table' style='".USER_WIDTH."' cellpadding='1' cellspacing='7'>
	{CONTACT_IMAGECODE}
	{CONTACT_IMAGECODE_INPUT}
	<tr><td>
	{CONTACT_SUBMIT_BUTTON}
	</td></tr>
	</table>
	</form>";


Result:
e107plugin contact

This is maximum what you can do without changing shortcodes.

Changing core shortcodes.
The way that you will use is on your personal preferencies. I tried some ways, but this is the best for me. The main reason is that this way I have everything in two folders: theme folder and plugin folder for theme.
So if you use different way, only copy core shortcodes to another location and use different calling your shortcodes.

My way:
in e107_plugin folder I created new folder f.e. themesolid. Into this folder I moved new menus from contact plugin and change their calling in layout:
{MENU=themesolid/contactform}
  {MENU=themesolid/contactinfo}

In this folder I created new folder shortcodes, next folder batch and copied core contact_shortcodes there. Then I changed class name to:
plugin_themesolid_contact_shortcodes (add word plugin and name of plugin at the beginning)

I changed in sc_contact_submit_button function original class to class='btn btn-theme button' to see if new shortcodes worked.
In contactform_menu.php I changed calling shortcodes:
// Plugin shortcodes
$contact_shortcodes =  e107::getScBatch('contact', 'themesolid', false);

Result:
e107plugin contact

This way I my own contact shortcodes and I can change input tags (delete tbox class...)
Result:
e107plugin contact