Email Form

Developer
Pongstr
Size
4,908 Kb
Views
16,192
  1. Email Form Previews
  2. Email Form HTML Codes
  3. Email Form CSS Codes
  4. Email Form JS Codes

How do I make an email form?

Big fan of Github & Bootstrap here. I've always wondered whether there's an email editor that uses Github-flavored Markdown instead of wysiwyg or something.. What is a email form? How do you make a email form? This script and codes were developed by Pongstr on 21 September 2022, Wednesday.

Email Form Previews
IQ Test

Email Form - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Email Form</title> <link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css'>
<link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="container"> <div class="container-inner"> <form class="form-email"> <div class="form-group"> <div class="input-group"> <input type="email" class="form-control" placeholder="To"> <div class="input-group-btn"> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"><i class="fa fa-cog"></i> <span class="caret"></span></button> <ul class="dropdown-menu pull-right"> <li><a data-toggle="address" data-target="#cc" href="#">Add Cc</a></li> <li><a data-toggle="address" data-target="#bcc" href="#">Add Bcc</a></li> </ul> </div> </div> <small class="help-block text-muted">You may add multiple email addresses and separate them with a comma.</small> </div> <div class="form-group" id="cc"> <input type="text" class="form-control" placeholder="Cc"> <button data-toggle="remove" class="remove">&times;</button> </div> <div class="form-group" id="bcc"> <input type="text" class="form-control" placeholder="Bcc"> <button data-toggle="remove" class="remove">&times;</button> </div> <div class="form-group"> <input type="text" class="form-control" placeholder="Subject"> </div> <ul class="nav nav-tabs"> <li class="active"><a data-toggle="tab" href="#write">Write</a></li> <li><a data-toggle="tab" href="#preview">Preview</a></li> <li class="pull-right"> <a data-toggle="modal" href="#myModal"><small><i class="fa fa-code"></i> Markdown Syntax</small></a> </li> </ul> <div class="tab-content"> <div class="tab-pane active" id="write"> <textarea class="form-control" rows="10"></textarea> <div class="attachment"> <small>Attach files or images by dragging & dropping, <a href="#">selecting them</a>, or pasting from the clipboard.</small> </div> </div> <div class="tab-pane" id="preview"> preview </div> </div> <div class="text-right"> <button class="btn btn-success" type="submit"> <i class="fa fa-send"></i> &nbsp; Send </button> </div> </form> </div>
</div> <!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> <h4 class="modal-title" id="myModalLabel"> <i class="fa fa-code"></i> Markdown Syntax </h4> </div> <div class="modal-body"> <ul class="nav nav-tabs"> <li class="active"><a data-toggle="tab" href="#headings">Headings</a></li> <li><a data-toggle="tab" href="#paragraphs">Paragraphs</a></li> <li><a data-toggle="tab" href="#lists">Lists</a></li> <li><a data-toggle="tab" href="#emphasis">Emphasis</a></li> <li><a data-toggle="tab" href="#links">Links</a></li> <li><a data-toggle="tab" href="#images">Images</a></li> <li><a data-toggle="tab" href="#code">Code</a></li> </ul> <br> <div class="tab-content"> <div class="tab-pane active" id="headings"> <p class="h3">Headings</p> </div> <div class="tab-pane" id="paragraphs"> <p class="h3">Paragraphs</p> </div> <div class="tab-pane" id="lists"> <p class="h3">Lists</p> </div> <div class="tab-pane" id="emphasis"> <p class="h3">Emphasis</p> </div> <div class="tab-pane" id="links"> <p class="h3">Links</p> </div> <div class="tab-pane" id="images"> <p class="h3">Images</p> </div> <div class="tab-pane" id="code"> <p class="h3">Code</p> </div> </div><!-- end of .tab-content --> </div> </div> </div>
</div> <script src='https://code.jquery.com/jquery-2.2.4.min.js'></script>
<script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Email Form - Script Codes CSS Codes

html,
body { height: 100%;
}
body > .container,
body > .container > .container-inner { height: 100%;
}
body > .container { display: table; padding-top: 100px; padding-bottom: 100px;
}
body > .container > .container-inner { display: table-cell; vertical-align: middle;
}
.form-email { padding: 15px; border: 1px solid #cccccc; border-radius: 4px; box-shadow: 0 4px 6px -2px #eeeeee;
}
.form-email .nav-tabs { margin-left: -15px; margin-right: -15px; padding-left: 15px; padding-right: 15px;
}
.form-email .nav-tabs > .pull-right { margin-right: -15px;
}
.form-email .nav-tabs > .pull-right > a { color: #555555; font-weight: bold;
}
.form-email .nav-tabs > .pull-right > a:hover { color: #428bca; border-color: transparent; background-color: transparent;
}
.form-email .tab-content { padding-top: 20px; padding-bottom: 15px;
}
.form-email .form-group { position: relative;
}
.form-email .form-group > .remove { -webkit-transition: opacity 0.2s ease; -moz-transition: opacity 0.2s ease; -o-transition: opacity 0.2s ease; transition: opacity 0.2s ease; position: absolute; top: 1px; right: 1px; display: inline-block; height: 36px; margin-bottom: 0; padding-left: px; padding-right: 10px; font-weight: bold; font-size: 18px; text-align: center; vertical-align: middle; cursor: pointer; border: 0 none; border-top-right-radius: 4px; border-bottom-right-radius: 4px; background-color: rgba(255, 255, 255, 0.95); opacity: 0.5;
}
.form-email .form-group > .remove:hover { opacity: 1;
}
.form-email input[type="text"].form-control,
.form-email input[type="email"].form-control { height: 38px;
}
.form-email .input-group { width: 100%;
}
.form-email .btn { height: 38px;
}
.form-email textarea.form-control { resize: vertical; border-bottom-color: transparent; background-color: #fbfbfb; border-bottom-left-radius: 0; border-bottom-right-radius: 0;
}
.form-email textarea.form-control:focus { background-color: #ffffff;
}
.form-email .attachment { padding: 5px; color: #555555; border: 1px solid #cccccc; border-top-style: dashed; background-color: #fbfbfb; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px;
}
#bcc,
#cc { -webkit-transition: all 0.3s ease 0.5s; -moz-transition: all 0.3s ease 0.5s; -o-transition: all 0.3s ease 0.5s; transition: all 0.3s ease 0.5s; display: none; opacity: 0;
}
#bcc.active,
#cc.active { -webkit-transition: all 0.2s ease 0s; -moz-transition: all 0.2s ease 0s; -o-transition: all 0.2s ease 0s; transition: all 0.2s ease 0s; display: block; opacity: 1;
}
.modal-body { padding-top: 20px; padding-bottom: 20px;
}
.modal-body .nav-tabs { margin-left: -20px; margin-right: -20px; padding-left: 15px; padding-right: 15px;
}
.modal-body .nav-tabs > li > a { padding-left: 10px; padding-right: 10px; font-size: 13px;
}

Email Form - Script Codes JS Codes

+function ($) { 'use strict'; var togglr = '[data-toggle=address]' , remove = '[data-toggle="remove"]' $(togglr).on('click', function (e) { var target = $(this).data('target') $(target).toggleClass('active') e.preventDefault() }); $(remove).on('click', function (e) { var parent = $(this).parent(); if ($(parent).hasClass('active')) { $(parent).removeClass('active') $(parent, 'input').val(''); } e.preventDefault() }); }(window.jQuery);
Email Form - Script Codes
Email Form - Script Codes
Home Page Home
Developer Pongstr
Username pongstr
Uploaded September 21, 2022
Rating 3
Size 4,908 Kb
Views 16,192
Do you need developer help for Email Form?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Pongstr (pongstr) Script Codes
Name
User List
Off-Canvas
Spinner
Code Snippets Icon
Work in progress
A Pen by Pongstr
CSS3 Ribbons
Flexbox
A Pen by Pongstr
Bootstrap Blank State
Create amazing marketing copy with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!