# 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

###

####

###

####

                                                    Main Area Of Work With the Company

                                                    The Company gives me a feeling of personal  accomplishment

                                                        Overall Satisfaction

                                                            Very Unsatisfied

                                                            Unsatisfied

                                                            Neutral

                                                            Satisfied

                                                            Very Satisfied

                                                    I have all the necessary tools and resources  to do my job well.

                                                        Overall Satisfaction

                                                            Very Unsatisfied

                                                            Unsatisfied

                                                            Neutral

                                                            Satisfied

                                                            Very Satisfied

## 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

- jQuery
- Font Awesome
- Bootstrap5 Framework
- Swift Mailer

## Copyright

Thanks to all our UI Experts and the Developers. Fimro. made with ❤️ by User Themes | Copyright ©️2021-2023