Fimro. - Multiple Forms, Quiz, Polls, Survey, Request Quote, Template

Welcome To Fimro. UI Kit - Creative HTML5 Template Documentation.

Firstly, thanks for purchasing Fimro. We really appriceate your support.

In this document, we have tried to cover all the things related to this template. Here, you will find the full installation guide and how do you will use this anywhere and some common issues with its solution - read this document minutely if you are experiencing any difficulties. If you need any help that are beyond the scope of this document, you can reach us at,

  • userthemes@gmail.com

    • Template Features

    • Clean & Simple Design
    • HTML5 & CSS3
    • Questionnaire Form
    • Survey Form
    • jQuery Validation
    • PHP to send Emails
    • Fully Responsive Design
    • All files are well commented
    • Cross Browser Compatible with Brave, Firefox, Safari, Opera, Chrome, Edge
    • Extensive Documentation

    Fimro. - Multiple Forms, Quiz, Polls, Survey, Request Quote, Template

    Installing Template.

    1. After unzip the download pack, you'll found a Template Folder with all the files.
    2. You can view this Template in any browser, you can display or edit the Template without an internet connection.(May not work fonts and google map).
    3. Now go to your cpanel or open your FTP Client (like Filezilla) and upload the content of the Template on your server root.
    4. Once the files are done uploading go to www.yourdomainname.com/index.html

    Template Structure

    All information within the main content area is nested within a body tag. The general template structure is pretty the same throughout the template. Here is the general structure of main page (index.html).

    CSS Files and Structure

    These are the css files that are loaded into templates in Head Section.

    Google Web Fonts

    By default, the template loads this font from Google Web Font Services, you can change the font in style.css file with the one that suits you best.

    						
		                @import url('https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

    Remember to change the font into style.css

    Placing Form or Template

    For better work progress, we've added a code snippet here. Suppose, you want to place a form to different HTML template; So, here's the example of how you will do that.
    Note: Any step you copy must be placed inside form tag 

    						
                    
    
                        
    
                            
    
                                
    
                                    
    
                                        step-image
                                    
    
                                    
    
                                        
    
                                            
    
                                                
                                                
                                                
                                            
    
    
                                            
    
    
                                            
    
                                                The Company gives me a feeling of personal  accomplishment
                                            
    
                                            
                                            
    
                                                
    
                                                    Overall Satisfaction
                                                
    
                                                
    
                                                    
    
                                                        
                                                        
                                                    
    
                                                    
    
                                                        
                                                        
                                                    
    
                                                    
    
                                                        
                                                        
                                                    
    
                                                    
    
                                                        
                                                        
                                                    
    
                                                    
    
                                                        
                                                        
                                                    
    
                                                
    
                                            
    
                                            
    
                                                I have all the necessary tools and resources  to do my job well.
                                            
    
                                            
                                            
    
                                                
    
                                                    Overall Satisfaction

    Javascript Files and Structure

    These are the list of Javascript files that are loaded into templates in end of the Body Section.

    jQuery Validation

    Every step is checked when next button is clicked if any input is marked required it will be checked. otherwise function will skip it and will proceed to next step.

    formvalidate(formnumber). this funciton will validate and return true if the condition is met. 

    
                    // form validiation
                    var inputschecked = false;
                    
                    
                    function formvalidate(stepnumber)
                    {
                      // check if the required fields are empty
                      inputvalue = $("#step"+stepnumber+" :input").not("button").map(function()
                      {
                        if(this.value.length > 0)
                        {
                          $(this).removeClass('invalid');
                          return true;
                    
                        }
                        else
                        {
                          
                          if($(this).prop('required'))
                          {
                            $(this).addClass('invalid');
                            return false
                          }
                          else
                          {
                            return true;
                          }
                          
                        }
                      }).get();
                      inputschecked = inputvalue.every(Boolean);
                    }

    to validate the inputs inside form,div or fieldset or any other element which contains an input or set of inputs. the id should be like this id="step1" or id="step10" of that parent element. 

    
                    
    
                        
                    
    
                    
    
                        
                        
                    
    

                    
                    // check step10
                    $("#step10btn").on('click', function()
                    {
                        formvalidate(10); 
                        
                
                        if(inputschecked == false)
                        {
                            formvalidate(10);
                        }
                        else
                        {
                            next();
                        }
                    })

    Configure Swift Mailer

    PHP mail system is built in send.php with help of Swift Mailer. See guide below on how to set PHP Mailer according to your needs. 

    				       
                        
                        $transport = (new Swift_SmtpTransport('yourserverlocation', 465, 'ssl'))
                        optional ->setUsername('serveremail@site.com')
                        optional ->setPassword('email password')

                        

                        $message->attach(
                        Swift_Attachment::fromPath($_FILES['file']['tmp_name'])->setFilename($_FILES['file']['name'])
                        );

                        
                        //Creating message
                        $message = (new Swift_Message('Subject'))
                            ->setFrom([$mailFrom => $name])
                            ->setTo(["youremail@gmail.com" => "reciever Name"])
                            ->setBody("Message Body")
    Note: if SMTP not set. the email will be send from the server default email address. 
    			

                        

                        
                        $variable = $_POST['inputname'];

                        

                        $cause = $_POST['donate-cause'];
                        $donateamount = $_POST['donate-amount'];
                        $mailFrom = $_POST['mail'];
                        $name = $_POST['donation-name'];
                        $middlename = $_POST['donation-middle'];
                        $phone = $_POST['phone'];
                        $donationselect = $_POST['donation-select'];
                        $code = $_POST['code'];
                        $address = $_POST['address'];


                        

                        
                        $mailFrom = $_POST['mail'];

                        
                        $name = $_POST['name'];
		            
    			
                        

                        
                        ->setBody = "tags". $variable . "tags";

                        
                        ->setBody = "You have received an e-mail from " . "".$name . ""
                        ."
    " . "cause:  " .$cause
                        ."
    " . "donateamount:  "  .$donateamount
                        . "
    " . "middlename:  " .$middlename
                        . "
    " . "phone:  " .$phone
                        . "
    " . "donationselect:  " .$donationselect
                        . "
    " . "code:  " .$code
                        . "
    " . "address:  " .$address;

    Source and Credit