create account

Materialize Education Series Part #1: How to Create a Simple Contact Form Without Using Server and Bootstrap CDN? by sargoon

View this thread on: hive.blog |  peakd.com |  ecency.com
utopian-io · @sargoon · (edited)
$101.11
Materialize Education Series Part #1: How to Create a Simple Contact Form Without Using Server and Bootstrap CDN?
#### Welcome to the first Video Tutorial of the Materialize!

![](http://i67.tinypic.com/14y8vms.png)

#### What Will I Learn?

- You will learn how to create a simple contact form (application form) with Materialize.
- You will learn how to perform these operation without using any localhost servers.
- You will learn a lot of codes about Materialize CSS programming language.

#### Requirements

- Materialize Full Package 1.0.0-beta version (CSS and JS [minified and unminified])
- Microsoft Visual Studio Code. (or another text editor)
- A Standard Computer
- A Standard Browser
- XAMPP Control Panel Server (not used in this video but to be used in other education episodes for using localhost)

#### Difficulty

- Intermediate

#### Description


Hello everyone, welcome to the first episode of the **Materialize** Education Series. In this video I showed you how to create a **Contact Form (Application Form)** without using any servers. I teached  you how to Install Materialize library and how to create a Contact Form (Application Form) from scratch with totally manually (only beginning codes copied as ready). I showed and I explained you how to use a lot of division codes with classes for "Materialize CSS" for example, "**form-field**", "**card**", "**card-content**", "**card-action**" and other division classes, labels etc. used and explained in this tutorial video. I teached you how to install Materialize Library with ZIP file format. 
Also I explained in detail all the commands used when creating contact (application) form. I explained you how to create modern contact (application) form **without using CDN Bootstrap**, in this tutorial video,**we used Materialize package instead of CDN Bootstrap**, I explained the reason for this in detailed on the video.

I gave technical information about codes, classes, about materialize, libraries and all operations. Our Materialize education series will progress from basic - intermediate to advanced. All the programs described in the video (Materialize CSS, Visual Studio Code, XAMPP Server Control Panel Server) are open source and are all included in the links section of the GitHub repositories (Except XAMPP Control Panel Server). If you wish, you can access the web pages of these programs and download links for Windows from the links section.


#### Codes Used in This Video:

``` <!DOCTYPE html>
  <html>
    <head>
      Import Google Icon Font
      <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
      Import materialize.css
      <link type="text/css" rel="stylesheet" href="css/materialize.min.css"  media="screen,projection"/>
      <title> Sargoon </title>
      Let browser know website is optimized for mobile
      <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    </head>
   <div class="row">
     <div class="col-md-6">
       <div class="card">
         <div class="card-action blue black-text">
           <h3> Contact Us For Utopian.io Contributor Apllication! </h3>
         </div>
         <div class="card-content">
           <div class="form-field">
             <label for="username"> Username </label>
             <input type="text" id="username">
           </div><br>
           <div class="form-field">
             <label for="category"> Which Category? </label>
             <input type="text" id="category">
           </div><br>
           <label for="text"> Say Something! </label>
           <textarea></textarea>
         </div>
         <div class="card-action blue black-text">
           <button class="btn-large blue black-text"> Send! </button>
         </div>
       </div>

     </div>
   </div>
    <body>

      JavaScript at end of body for optimized loading
      <script type="text/javascript" src="js/materialize.min.js"></script>
    </body>
  </html>

```

#### Video Tutorial

https://youtu.be/ZidvRptYbfA

#### Curriculum
This tutorial video is the first video of the Materialize. When next episodes are uploaded, links to previous episodes will be place here.

#### Links
- [Materialize Github Repo](https://github.com/Dogfalo/materialize)
- [Visual Studio Code (VSCode) GitHub Repo](https://github.com/Microsoft/vscode)
- [Materialize Web Site](http://materializecss.com/)
- [Materialize Package Download for Windows](https://github.com/Dogfalo/materialize/releases/download/1.0.0-beta/materialize-v1.0.0-beta.zip)
- [Visual Studio Code Web Site](https://code.visualstudio.com/)
- [Visual Studio Code Download Link for Win x64](https://go.microsoft.com/fwlink/?Linkid=852157)
- [XAMPP Server Web Site](https://www.apachefriends.org/en/)
- [XAMPP Server(For Windows) Download Link](https://www.apachefriends.org/xampp-files/7.2.1/xampp-win32-7.2.1-0-VC15-installer.exe)

<br /><hr/><em>Posted on <a href="https://utopian.io/utopian-io/@sargoon/materialize-education-series-part-1-how-to-create-a-simple-contact-form-without-using-server-and-bootstrap-cdn">Utopian.io -  Rewarding Open Source Contributors</a></em><hr/>
πŸ‘  , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , and 123 others
properties (23)
authorsargoon
permlinkmaterialize-education-series-part-1-how-to-create-a-simple-contact-form-without-using-server-and-bootstrap-cdn
categoryutopian-io
json_metadata"{"community":"utopian","app":"utopian/1.0.0","format":"markdown","repository":{"id":23974149,"name":"materialize","full_name":"Dogfalo/materialize","html_url":"https://github.com/Dogfalo/materialize","fork":false,"owner":{"login":"Dogfalo"}},"pullRequests":[],"platform":"github","type":"video-tutorials","tags":["utopian-io","en","video-tutorials","materialize","css"],"users":["sargoon"],"links":["https://github.com/Dogfalo/materialize","https://github.com/Microsoft/vscode","http://materializecss.com/","https://github.com/Dogfalo/materialize/releases/download/1.0.0-beta/materialize-v1.0.0-beta.zip","https://code.visualstudio.com/","https://go.microsoft.com/fwlink/?Linkid=852157","https://www.apachefriends.org/en/","https://www.apachefriends.org/xampp-files/7.2.1/xampp-win32-7.2.1-0-VC15-installer.exe"],"moderator":{"account":"rosatravels","time":"2018-04-20T08:02:33.768Z","pending":false,"reviewed":true,"flagged":false},"questions":null,"score":null,"total_influence":null,"staff_pick":null,"config":{"questions":[{"question":"Does the tutorial address a minimum of 3 substantial concepts and no more than 5?","question_id":"vtut-1","answers":[{"answer":"3-5 substantial concepts covered in the tutorial.","answer_id":1,"value":10},{"answer":"Less than 3 or more than 5 substantial concepts covered in the tutorial.","answer_id":2,"value":5},{"answer":"No substantial or recognisable concepts.","answer_id":3,"value":0}]},{"question":"Concepts covered in the tutorial are indicated in the post text with a short description of each concept and when appropriate, images?","question_id":"vtut-2","answers":[{"answer":"Thorough text and images for concepts covered.","answer_id":1,"value":5},{"answer":"Minimal text and images.","answer_id":2,"value":2},{"answer":"No or very little text and images.","answer_id":3,"value":0}]},{"question":"Does the contributor provide supplementary resources, such as code and sample files in the contribution post or a GitHub repository?","question_id":"vtut-3","answers":[{"answer":"Yes","answer_id":1,"value":10},{"answer":"No","answer_id":2,"value":0}]},{"question":"Is the tutorial part of a series?","question_id":"vtut-4","answers":[{"answer":"Yes.","answer_id":1,"value":10},{"answer":"Yes, but first entry in the series.","answer_id":2,"value":5},{"answer":"No.","answer_id":3,"value":0}]},{"question":"Is there an outline for the tutorial content at the beginning of the post?","question_id":"vtut-5","answers":[{"answer":"Yes.","answer_id":1,"value":5},{"answer":"Yes, but not detailed enough or does not cover all sections.","answer_id":2,"value":2},{"answer":"No.","answer_id":3,"value":0}]},{"question":"Does the presenter speak clearly and is easily understandable?","question_id":"vtut-6","answers":[{"answer":"Yes.","answer_id":1,"value":10},{"answer":"Mostly understandable.","answer_id":2,"value":5},{"answer":"No.","answer_id":3,"value":0}]},{"question":"Does the writing style meet the Utopian standard considering formalness, informativeness and clarity of the content?","question_id":"c-1","answers":[{"answer":"It is formal, informative and well written with clear content.","answer_id":1,"value":10},{"answer":"It is informative with clear content but not formal enough.","answer_id":2,"value":5},{"answer":"The contribution could be more informative or contains unrelated information, formality and clarity of the content are good enough.","answer_id":3,"value":4},{"answer":"Not all sections were clear enough but overall holds value for the project.","answer_id":4,"value":2},{"answer":"Not at all.","answer_id":5,"value":0}]},{"question":"Was the provided category template for the editor followed?","question_id":"c-2","answers":[{"answer":"All points of the template were included with additional points as well.","answer_id":1,"value":5},{"answer":"The template was followed without additions.","answer_id":2,"value":4},{"answer":"The template was edited but the points were covered in different way.","answer_id":3,"value":3},{"answer":"Not all points of the template were covered in the contribution but the structure is clear enough.","answer_id":4,"value":3},{"answer":"The template was not followed but the structure is clear enough.","answer_id":5,"value":2},{"answer":"The contents are not clearly structured at all.","answer_id":6,"value":0}]},{"question":"Did the contributor tag other users?","question_id":"c-3","answers":[{"answer":"No other users were tagged by the contributor.","answer_id":1,"value":5},{"answer":"Used tags are reasonable and all tagged people are connected to the project and/or the contribution.","answer_id":2,"value":5},{"answer":"The contribution contains mentions of other users that are not directly related to the contribution but related in other ways.","answer_id":3,"value":2},{"answer":"The contributor misuses tagging of other users.","answer_id":4,"value":0}]},{"question":"Did the contributor ask for upvotes, resteems, follows or witness vote?","question_id":"c-4","answers":[{"answer":"No","answer_id":1,"value":5},{"answer":"Yes, but not in a way that disturbs readability. ","answer_id":2,"value":5},{"answer":"Yes.","answer_id":3,"value":0}]},{"question":"Was a graphical content like images, charts, videos or screenshots included?","question_id":"c-5","answers":[{"answer":"Yes, the graphical content is included and adds more value to the contribution.","answer_id":1,"value":5},{"answer":"No but the contribution works well without graphical content well.","answer_id":2,"value":4},{"answer":"Yes, but most of the graphical content’s purpose is just for presentational matters.","answer_id":3,"value":3},{"answer":"No relevant or useful graphical content is included in the contribution.","answer_id":4,"value":0}]},{"question":"How would you rate the overall added value?","question_id":"c-6","answers":[{"answer":"Extraordinary value to both the project and the open source community overall.","answer_id":1,"value":20},{"answer":"Significant value to the project or open source community.","answer_id":2,"value":15},{"answer":"Some value to the project or open source community.","answer_id":3,"value":10},{"answer":"Little value to the project or open source community.","answer_id":4,"value":5},{"answer":"No obvious value to project or open source community.","answer_id":5,"value":0}]}]}}"
created2018-04-19 18:08:27
last_update2018-04-20 08:02:33
depth0
children6
last_payout2018-04-26 18:08:27
cashout_time1969-12-31 23:59:59
total_payout_value73.327 HBD
curator_payout_value27.785 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length5,016
author_reputation62,586,788,362,329
root_title"Materialize Education Series Part #1: How to Create a Simple Contact Form Without Using Server and Bootstrap CDN?"
beneficiaries
0.
accountutopian.pay
weight1,500
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id50,980,606
net_rshares20,760,524,669,939
author_curate_reward""
vote details (187)
@greentomorrow ·
$0.03
fossbot voter comment
Hey, just wanted to let you know I gave you an upvote because I appreciate your content!  =D See you around
πŸ‘  
properties (23)
authorgreentomorrow
permlinkre-sargoon-materialize-education-series-part-1-how-to-create-a-simple-contact-form-without-using-server-and-bootstrap-cdn-20180419t185741201z
categoryutopian-io
json_metadata{}
created2018-04-19 18:57:42
last_update2018-04-19 18:57:42
depth1
children1
last_payout2018-04-26 18:57:42
cashout_time1969-12-31 23:59:59
total_payout_value0.026 HBD
curator_payout_value0.003 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length107
author_reputation-132,273,054,154
root_title"Materialize Education Series Part #1: How to Create a Simple Contact Form Without Using Server and Bootstrap CDN?"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id50,986,979
net_rshares5,843,009,953
author_curate_reward""
vote details (1)
@sargoon · 
Thank you :)
properties (22)
authorsargoon
permlinkre-greentomorrow-re-sargoon-materialize-education-series-part-1-how-to-create-a-simple-contact-form-without-using-server-and-bootstrap-cdn-20180419t191557828z
categoryutopian-io
json_metadata{"tags":["utopian-io"],"app":"steemit/0.1"}
created2018-04-19 19:16:00
last_update2018-04-19 19:16:00
depth2
children0
last_payout2018-04-26 19:16:00
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length12
author_reputation62,586,788,362,329
root_title"Materialize Education Series Part #1: How to Create a Simple Contact Form Without Using Server and Bootstrap CDN?"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id50,989,384
net_rshares0
@rosatravels ·
$0.02
Thank you for your contribution.
----------------------------------------------------------------------
Need help? Write a ticket on https://support.utopian.io.
Chat with us on [Discord](https://discord.gg/uTyJkNm).

**[[utopian-moderator]](https://utopian.io/moderators)**
πŸ‘  
properties (23)
authorrosatravels
permlinkre-sargoon-materialize-education-series-part-1-how-to-create-a-simple-contact-form-without-using-server-and-bootstrap-cdn-20180420t080408173z
categoryutopian-io
json_metadata{"tags":["utopian-io"],"community":"utopian","app":"utopian/1.0.0"}
created2018-04-20 08:04:09
last_update2018-04-20 08:04:09
depth1
children1
last_payout2018-04-27 08:04:09
cashout_time1969-12-31 23:59:59
total_payout_value0.020 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length273
author_reputation422,827,447,688,168
root_title"Materialize Education Series Part #1: How to Create a Simple Contact Form Without Using Server and Bootstrap CDN?"
beneficiaries
0.
accountutopian.pay
weight1,500
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id51,080,133
net_rshares5,902,030,256
author_curate_reward""
vote details (1)
@sargoon · 
Thank you for moderating my contribution sir :)
properties (22)
authorsargoon
permlinkre-rosatravels-re-sargoon-materialize-education-series-part-1-how-to-create-a-simple-contact-form-without-using-server-and-bootstrap-cdn-20180420t181341061z
categoryutopian-io
json_metadata{"tags":["utopian-io"],"app":"steemit/0.1"}
created2018-04-20 08:14:51
last_update2018-04-20 08:14:51
depth2
children0
last_payout2018-04-27 08:14:51
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length47
author_reputation62,586,788,362,329
root_title"Materialize Education Series Part #1: How to Create a Simple Contact Form Without Using Server and Bootstrap CDN?"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id51,081,542
net_rshares0
@steembottrackerr · 
<center>https://steemitimages.com/200x200/https://s-media-cache-ak0.pinimg.com/originals/81/28/3c/81283c6aed7bdb5b9f8ad73b8ce62c2f.jpg</center>
---
<center>Hello @sargoon , Congratulations βœ… . Your content began to appear in the hot section.
I am the information account of "SteemBotTracker" site.
</center>
---
<center>
Your Informations
Total SBD: 450.345
Total STEEM: 1.871
</center>
---
<center>
I recommend to increase this;
You can make "Resteem" and advertise to the followers of the whale accounts.
"Resteem Bot" for you;
βœ… The most profitable Resteem Whale @byresteem  has 25.500 Followers + 7000 Sp + Upvote with min +55 accounts. 
</center>
---
<center>
You can purchase "upvote" by bid bots.
"Upvote Bot"
βœ… The most profitable whale in the last round. @buildawhale
</center>
---
<center>
I'm taking this message once. You need to use the #steembottrackerr tag for more information.
Those who "upvote" this interpretation will be awarded a "UpVote" prize of 100 Sbd per week per person.
I am a bot, I can not answer the comment. I hope I could help. Good luck. Sorry if I disturbed you.
</center>
properties (22)
authorsteembottrackerr
permlink20180421t065237987z
categoryutopian-io
json_metadata{"tags":["advice"],"app":"steemjs/test"}
created2018-04-21 06:52:42
last_update2018-04-21 06:52:42
depth1
children0
last_payout2018-04-28 06:52:42
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length1,136
author_reputation-1,493,369,324,060
root_title"Materialize Education Series Part #1: How to Create a Simple Contact Form Without Using Server and Bootstrap CDN?"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id51,257,530
net_rshares0
@utopian-io · 
### Hey @sargoon! Thank you for the great work you've done!
We're already looking forward to your next contribution!
#### Fully Decentralized Rewards
We hope you will take the time to share your expertise and knowledge by rating contributions made by others on Utopian.io to help us reward the best contributions together.
#### Utopian Witness!
<a href="https://v2.steemconnect.com/sign/account-witness-vote?witness=utopian-io&approve=1">Vote for Utopian Witness!</a> We are made of developers, system administrators, entrepreneurs, artists, content creators, thinkers. We embrace every nationality, mindset and belief.

**Want to chat? Join us on Discord https://discord.me/utopian-io**
properties (22)
authorutopian-io
permlinkre-sargoon-materialize-education-series-part-1-how-to-create-a-simple-contact-form-without-using-server-and-bootstrap-cdn-20180421t190112479z
categoryutopian-io
json_metadata{"tags":["utopian-io"],"community":"utopian","app":"utopian/1.0.0"}
created2018-04-21 19:01:15
last_update2018-04-21 19:01:15
depth1
children0
last_payout2018-04-28 19:01:15
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length687
author_reputation152,955,367,999,756
root_title"Materialize Education Series Part #1: How to Create a Simple Contact Form Without Using Server and Bootstrap CDN?"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id51,358,700
net_rshares0
Help/Feedback