“ADVANCED CONTACT US FORM” Documentation by “Uneek”


“ADVANCED CONTACT US FORM”

Created: 24/10/2017
By: Uneek
Email: uneekcc1@gmail.com

Thank you for purchasing my item. If you have any questions that are beyond the scope of this help file, please feel free to email via my user page contact form here. Thanks so much!


Table of Contents

  1. HTML Structure
  2. CSS Files and Structure
  3. PHP Code Explanation

A) HTML Structure - top

In this theme all of the information within the main content area is nested within a div with an id of "container". The entire 'form' starts inside a div tag with id 'container'. All the form input fields and buttons are present inside form tag with id="form". The general structure of the code is the same throughout all the 4 forms. Here is the general structure.

HTML Structure

We have used materialize framework to create all the forms. The most of the tags used are of materialize framework which we got through linking CDN of materialize in the head tag.

HTML Structure

We have linked materialize.css and materialize.js for the styling and javascript purpose. We have also linked component.css where we have done styling of the form.


B) CSS Files and Structure - top

I'm using only single CSS files in this theme. It is name as "component.css" in which the overridden styling is written with "!important" to override materilaize design. It aslo conatins resizing of buttons and form structure, success message div tag,etc.

HTML Structure

If you would like to edit a specific section of the site, simply find the appropriate label in the CSS file, and then scroll down until you find the appropriate style that needs to be edited.

The css properties are well commented so that you get to know about its link. We have also used small and large form class for your easy understanding.


C) PHP - top

We have used two .php files named - mail.php and mailplusattachment.php

Those two files are well commented and used for mailing purpose. Documententation is clear for both the files. Here is the structure:

HTML Structure

NOTE : In case of google recaptcha you need to create your own recaptcha data-site-key and please do not forget to enter your website domain name while setting up the recaptcha. PLease do select "INVISIBLE recaptcha" while generating data site key. Visit this for guidelines: https://developers.google.com/recaptcha/docs/versions

And later on put your data-site-key into the form where it is mentioned.

Once again, thank you so much for purchasing this theme. As I said at the beginning, I'd be glad to help you if you have any questions relating to this theme. No guarantees, but I'll do my best to assist. If you have a more general question relating to the themes on ThemeForest, you might consider visiting the forums and asking your question in the "Item Discussion" section.

UNEEK

Go To Table of Contents