Documentation by “Ansonika” v1.0

“MAGNIFICA - HTML Site template”

Created: 25 March 2020
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

This theme has a fixed centered layout 1170px. It's based on Boostrap framework grid. It's ULTRA RESPONSIVE!!
Create with Magnifica every type of questionnaire wizard. In this period we focus the demo on Coronavirus (COVID-19) emergency. Use Magnifica to create your internal questionnarie: help users or the employees of a company in decision-making whether to seek professional medical advice or not. It have also nice UI/UX form elements design: radio, checkbox, float labels. Branch Wizard is Supported: user view differen steps based on the answer provided. The results will be sent via email and confirmation email is sent to the user who fill the form. It comes also with a faq page.

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 Wizard
- 2.2 Success submit
- 2.3 Inner pages

3. COMMON
- 3.1 Misc
- 3.2 Spacing
- 3.3 Float Labels

Change the logo
To change the logo, simply use your PNG24 file (suggested logo height is 45px).

Add one more step to the wizard
Each step is defined by a div, so simply duplicate one of them. Below an example of the structure:

<div class="step">
	your content....                
</div><!-- end step-->

Make an input field, select or radio/checkbox required or not.
Simply add or remove the class "required" to the element. To change the error message go to js/common_script.js and under the section jQuery Validation Plugin at line 4957 aprox, then recreate the minfied version.

Add one more questions with checkbox answer
Open the HTML page. As you can see the name of the input has to be the same with at the end [], each one have a different value. in the example below we add 2 more checkbox questions: 

<h3>Question?</h3> 

<div class="form-group">
<label class="container_check version_2">Answer 1
<input type="checkbox" value="Answer 1" name="question_1[]" class="required">
</label>
</div>

<div class="form-group">
<label class="container_check version_2">Answer 2
<input type="checkbox" value="Answer 2" name="question_1[]" class="required">
</label>
</div>

$message .= "\n1) Question?\n" ;
foreach($_POST[question_1] as $value) 
{ 
	$message .=   "- " .  trim(stripslashes($value)) . "\n"; 
};

Antispam protection:
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 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="">

Wizard with single branch (take as reference index.html + send_email_1.php)

In this demo there are 2 branches. Each targeted step is defined by the class="branch",
the input value as the step id. 
Of course is radio based, so you have to give the same input name to the radios. 
In this example if a users reply yes goes to a specific target/branch step...then continue with the normal steps order.
If reply no, it paypass the branched step, a continue with the normal steps order.

 <!-- /Start Branch ============================== -->
<div class="step" data-state="branchtype">
	                         
<h3 class="main_question"><i class="arrow_right"></i>Are you experiencing any difficulty in breathing?</h3>
<div class="form-group">
<label class="container_radio version_2">Yes
<input type="radio" name="question_3" value="Yes" class="required">
<span class="checkmark"></span>
</label>
<label class="container_radio version_2">No
<input type="radio" name="question_3" value="No" class="required">
<span class="checkmark"></span>
</label>
</div>
</div>

<!-- /difficulty in breathing > Yes ============================== -->
<div class="branch" id="Yes">
	<div class="step" data-state="No">
		...
	</div>
</div>
<!-- /step-->

<!-- /difficulty in breathing > No ============================== -->
  <div class="step"id="No">
		...
	</div>
<!-- /step-->


data-state="" define the target of the each step.


PHP FILE
A particular mention to this script portion

This portion tell to send only the results of if the input has been filled..
if (isset($_POST[question_4]) && $_POST[question_4] != "")
			{
				
			}

This portion is a simple checkboxes results. 
if (isset($_POST[question_4]) && $_POST[question_4] != "")
		{
		$message .= "\Please tick any one of the following symptoms that can be applies to you:\n";
		foreach($_POST[question_4] as $value)
			{
				$message.= "- " . trim(stripslashes($value)) . "\n";
			};
		}

THE GRID
Please refer to this documentation Boostrap


C) PHP files - top

Please takes as reference one of the PHP files and follows the comments on code.

Main settings:
1) $to = change with your email address (better if contain your domain name, same for <noreply@yourdomain.com>)
2) Edit the text as you need (\n is equal to a br)
3) DelayRedirect on body tag = increse the value to get more delay on the redirect page
4) window.location = "your redirect page"

If you doesn't recieve the email please first check:
1) Your spam folder
2) If you hosting requires special settings (SMTP Authentication)
3) If your sender email has to be the same from your hosting provider

Note that the contact form works a little bit different. Edit the file in the assets folder following the comments on code.

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.

Need customization or availability for freelance projects?

Just send an email via profile page form; please don't forget to specify:

Ansonika

Go To Table of Contents