Documentation by “Ansonika” v1.0

“BETLER - HTML Site template”

Created: 12 APRIL 2021
Last update: -
By: Ansonika

Thank you for purchasing my theme. If you are happy with the theme, please TAKE A MOMENT TO RATE IT from your DOWNLOADS PAGE. Thanks so much!

Table of Contents

  1. HTML Structure
  2. CSS Files, Structure and basic modifications
  3. PHP contact form, newsltetter form and plan a visit form
  4. JavaScript
  5. Sources and Credit
  6. UPDATES

A) HTML Structure - top

Better is a clean and modern HTML 5 multipurpose forms site template Bootstrap based. Current version comes with the following type of forms: Contact, Login, Register, Review and File Attachment/Upload. It comes with nice UI/UX form elements, RTL Versions and working PHPmailer with SMTP support and HTML email template.

B) CSS Files Structure and basic modfication - top

The css files are inside the css folder (not minified and minified versions included) .To modify colors, typografy, button style ecc....find the realtive comment line in style.css. We reccomend to apply every changes in css/custom.css in order to makes future updates easly to apply. Below how the file is organized:

1. SITE STRUCTURE and TYPOGRAPHY
- 1.1 Typography
- 1.2 Buttons
- 1.3 Structure

2. CONTENT
- 2.1 Content styles

3. COMMON
- 3.1 Forms
- 3.2 Show/hide password + Password Strenght
- 3.3 Misc
- 3.4 CSS for working forms demos
- 3.5 Success submit
- 3.6 Spacing

Change the logo
To change the logo, simply use your PNG24 file (suggested logo height is 35px) or better an svg version. Below how is coded

Make an input field, select or radio/checkbox required or not for the php working version demos.
Simply add or remove the class "required" to the element. To change the error message go to js/jquery.validate.js aprox line 371.

Antispam protection for the php working versios demos:
Spam bots usually disable javascripts to avoid the jquery validation or automatically fill all the input fields and send the email. Now the php submission script link is removed from the html and placed inside the the js script. So if the js will be disabled, the form will be not processed. The js script check also if the hidden input field (id website) is auto filled by the spam bot...if filled the form will be not processed. 

LEAVE THE HIDDEN INPUT FIELD WEBSITE for the reason above
<input id="website" name="website" type="text" value="">

Remove the demo assets files
In order to choose easly the version you like, we've included a demo.html page that you can remove after you complete your edits:
delete demo.html file + demo-assets folder from the html folder.

How file attachment works: 

In this example we set the filesize limit to 150Kb (first ask to your host which is the default upload limit)

1) Open js/file_attachment_func.js and edit these lines below to validate the file upload to the correct file size limit.

$("form")

....

maxFileSize: {
"unit": "KB",
"size": 150
},

2) Open file_attachment_phpmailer_smtp.php or file_attachment_phpmailer.php and edit these line below

if($file_size > 153600){
$errors[]='File size must be max "150Kb"';
}

Note that the file size must be in bytes; 150Kb=153600 (bytes)
Use this tool to convert the file size param https://www.thecalculator.co/others/File-Size-Converter-69.html

C) PHP files and functional/working demos - top

The item mainly use two method to send the email.
We strongly reccomend before to edit the item to test the version that works better on your host based on your needs.
You can change the method via js/contact_func.js, js/file_attachment_func.js, etc... Please change the path to the php file as you can see below and explained in the comments (in this example we take the contact version: contact-1-working-mail-form.html, but the logic is equal the others working versions):

jQuery(function ($) {
"use strict";
// Chose here which method to send the email, available:
// Phpmaimer text/html > phpmailer/contact_phpmailer.php
// Phpmaimer text/html SMPT > phpmailer/contact_phpmailer_smpt.php
// PHPmailer with html template > phpmailer/contact_phpmailer_template.php
// PHPmailer with html template SMTP> phpmailer/contact_phpmailer_template_smtp.php
......

1) PHPmailer text/html > phpmailer/contact_phpmailer.php: This version send an email with basic html support on text

//Recipients - main edits
$mail->setFrom('info@betler.com', 'Message from Betler'); // Email Address and Name FROM
$mail->addAddress('jhon@betler.com', 'Jhon Doe'); // Email Address and Name TO - Name is optional
$mail->addReplyTo('noreply@betler.com', 'Message from Betler'); // Email Address and Name NOREPLY
$mail->isHTML(true);
$mail->Subject = 'Message from Betler'; // Email Subject

2) PHPmailer text/html SMPT > phpmailer/contact_phpmailer_smtp.php. This version is like above but with SMTP Authentication. We suggest to contact your host/ISP to get the correct info to set this feature (usallyUsername, Password ,SMTP Server, Port, Encryption if required)

//Server settings
$mail->isSMTP(); // Send using SMTP
$mail->Host = 'smtpserver'; // Set the SMTP server to send through
$mail->SMTPAuth = true; // Enable SMTP authentication
$mail->Username = 'username'; // SMTP username
$mail->Password = 'password'; // SMTP password
$mail->SMTPSecure = PHPMailer::ENCRYPTION_STARTTLS; // Enable TLS encryption; `PHPMailer::ENCRYPTION_SMTPS` encouraged
$mail->Port = 587; // TCP port to connect to, use 465 for `PHPMailer::ENCRYPTION_SMTPS` above

plus edit the recipients

3) PHPmailer with html template > phpmailer/contact_phpmailer_template.php. This version is without SMTP and send the message inside an HTML template. it's like 1 version but with and HTML template (template-email.html) for the main message and for the confirmation page sent to the use who fill the form (confirm.html)

4) PHPmailer with html template SMTP> phpmailer/contact_phpmailer_template_smtp.php. This version is like above but with SMTP Authentication, so for the settings view 2 paragraph.

NOTE ABOUT THE HTML EMAIL TEMPLATE
The email template has been tested on various email clients (desktop and mobiles). But, maybe you know, it's quite impossible to provide an email template that looks equal on all email clients due they have different supports. The email template degrade nicely to maxime the compatibility. Email Template design it's beyond the scope of this item and support, you can implement with your own or drive to a most simple method to send the email (1, 2).

Edit the email template with your images
Put your logo in the images folder. To reduce spam issue and email weight, images must be upload on your online site/server and the html looks like the example below:
<img src="http://www.yourdomain.com/phpmailer/images/logo.png" border="0" width="54" height="60" alt="" />

RTL VERSIONS email templates
Change in the corresponding PHPmailer php files with email template the path to the rtl template... template-email.html

$email_html = file_get_contents('template-email-rtl.html');
$email_html_confirm = file_get_contents('confirmation-rtl.html');

D) JavaScript - top

This theme use these Javascript (minified versions included). i've included all the common theme scripts in a single file for a fast edit and load (or if you prefer you can find the same js in separate files in js folder).

common_scripts.js content:

E) Sources and Credits - top

I've used the following images, icons or other files as listed. For the js listed below, you can find the more documentation on the relative sites.

Images are not included.

F) UPDATES - top

Maybe you are interested in




Once again, thank you so much for purchasing this theme. Please take a moment to rate it from your Downloads page.

Need support?

For support contact me using the form on my profile page with subject [ThemeForest Support] Template name, or via the Support Tab on the item page. You will receive an answer within 24-48 hours (working days) GMT +1.

Ansonika

Go To Table of Contents