Contact Form - Html and Javascript includable just in html (tumblr) -



Contact Form - Html and Javascript includable just in html (tumblr) -

i'm trying include contact form in tumblr blog (i utilize portfolio). point have html , css form i'm not beingness able create part work. beacuse can't refer .js file. mean, need code on .js file included in html work.

maybe there way create easier, i'm not finding anyway it.

here's form html:

<form id="c_form" name="contact"> <div> <label> <p>name</p> <input name="nombre" id="c_name" type="text" class="c_input" placeholder="..."/> </label> <br/> <label> <p>email:</p> <input name="email" id="c_mail" type="text" class="c_input" placeholder="..."/> </label> </div> <label> <p>content:</p> <textarea name="mensaje" id="c_msg" placeholder="..."></textarea> </label> <div id="c_btns"> <input name="send" onclick="cargasendmail()" type="button" value="enviar" class="btn-b" id="c_enviar"></input> </div> </form>

heres css:

.contact { width: 100%; background-image: url(http://i.imgur.com/jxap4po.jpg); padding-bottom: 50px; padding-top: 50px; position: relative; } .contact p{ margin: 0; padding: 0; border: 0; font-size:100%; vertical-align: baseline; font-weight: bold; } .contact label p{ color: #ee3333; text-decoration: none; display:block; margin:5px 0; font-size:1.25em; font-weight: bold; } #contactform{ width: 700px; margin: 30px auto; background: transparent; overflow: hidden; border:1px solid; border-color: #ee3333; } .c_input{ padding: 3px; width: 300px; outline:1px solid #ee3333; } #c_form{ margin: 25px; width: 90%; } #c_form textarea { outline:1px solid #ee3333; } .c_input, #c_form textarea{ margin-bottom: 10px; border: 1px solid transparent; padding: 4px; background: transparent; } input:focus, textarea:focus{ outline: none; } ::-webkit-input-placeholder { font-style:italic; } ::-moz-placeholder { font-style:italic; } /* firefox 19+ */ :-ms-input-placeholder { font-style:italic; } /* ie */ input:-moz-placeholder { font-style:italic; } #c_form textarea{ min-height: 150px; resize: none; width: 100%; } #c_enviar{ padding: 4px; font-size: 13px; font-family: helvetica, arial; } #bottom_container{ overflow: hidden; } #c_information{ width: 100%; border: solid 1px #ccc; background: transparent; padding: 4px 0 4px 0; text-align: center; font-size: 14px; color: #fff; } .c_error{ color: #d64242; font-size: 10px; margin-left: 5px; } .hide{ display:none; } .btn-b { width:100%; padding: 5px; color: #111111; text-decoration: none; border-radius: 3px; border-color: #cc0c0c #cc0c0c #cc0c0c; border-style: solid; border-width: 1px; color: #ffffff; background: #ee3333; padding: 5px; background: -moz-linear-gradient(top, #ee3333 0%, #ee2222 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ee3333), color-stop(100%,#ee2222)); background: -webkit-linear-gradient(top, #ee3333 0%,#ee2222 100%); background: -o-linear-gradient(top, #ee3333 0%,#ee2222 100%); background: -ms-linear-gradient(top, #ee3333 0%,#ee2222 100%); background: linear-gradient(top, #ee3333 0%,#ee2222 100%); filter: progid:dximagetransform.microsoft.gradient( startcolorstr='#ee3333', endcolorstr='#ee2222',gradienttype=0 ); cursor: pointer; } .btn-b:hover { border-radius: 3px; border-color: #cc0c0c #cc0c0c #cc0c0c; border-style: solid; border-width: 1px; background: #da1b1b; background: -moz-linear-gradient(top, #da1b1b 0%, #b40f0f 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#da1b1b), color-stop(100%,#b40f0f)); background: -webkit-linear-gradient(top, #da1b1b 0%,#b40f0f 100%); background: -o-linear-gradient(top, #da1b1b 0%,#b40f0f 100%); background: -ms-linear-gradient(top, #da1b1b 0%,#b40f0f 100%); background: linear-gradient(top, #da1b1b 0%,#b40f0f 100%); filter: progid:dximagetransform.microsoft.gradient( startcolorstr='#da1b1b', endcolorstr='#b40f0f',gradienttype=0 ); } .btn-b:hover { text-decoration: none; } .btn-b:active { -moz-border-bottom-colors: none; -moz-border-image: none; -moz-border-left-colors: none; -moz-border-right-colors: none; -moz-border-top-colors: none; background: none repeat scroll 0 0 #3282d3; border-color: #154c8c #154c8c #0e408e; border-style: solid; border-width: 1px; box-shadow: 0 0 6px 3px #1657b5 inset, 0 1px 0 0 #ffffff; text-shadow: 0 -1px 1px #2361a4; }

if i'm right should add together a:

<script type='text/javascript' ......(code)></script>

and create form work, dont know code should be.

probably i'm missing smth first time working js i've worked html , css...

thanks in advance!

you sign mandrill , utilize their api.

check out this jquery contact form submits via json. utilize method on site.

class="snippet-code-js lang-js prettyprint-override">jquery(function($) { $("#contact_form").submit(function() { var email = $("#email").val(); // email field value var name = $("#name").val(); // name field value var msg = $("#msg").val(); // message field value $.ajax( { type: "post", url: "https://mandrillapp.com/api/1.0/messages/send.json", data: { 'key': 'svrlfidc1a7k56tuukyuqg', 'message': { 'from_email': email, 'from_name': name, 'headers': { 'reply-to': email }, 'subject': 'website contact form submission', 'text': msg, 'to': [ { 'email': 'riyadh@bscheme.com', 'name': 'riyadh al nur', 'type': 'to' }] } } }) .done(function(response) { alert('your message has been sent. give thanks you!'); // show success message $("#name").val(''); // reset field after successful submission $("#email").val(''); // reset field after successful submission $("#msg").val(''); // reset field after successful submission }) .fail(function(response) { alert('error sending message.'); }); homecoming false; // prevent page refresh }); }); class="snippet-code-html lang-html prettyprint-override"><form class="form-horizontal" id="contact_form"> <fieldset> <!-- form name --> <legend>contact us</legend> <!-- text input--> <div class="form-group"> <label class="col-md-4 control-label" for="name">name</label> <div class="col-md-5"> <input id="name" name="name" type="text" placeholder="enter total name here" class="form-control input-md" required=""> </div> </div> <!-- text input--> <div class="form-group"> <label class="col-md-4 control-label" for="email">email</label> <div class="col-md-5"> <input id="email" name="email" type="text" placeholder="enter email address here" class="form-control input-md" required=""> </div> </div> <!-- textarea --> <div class="form-group"> <label class="col-md-4 control-label" for="msg">message</label> <div class="col-md-4"> <textarea class="form-control" id="msg" name="msg" cols="6" rows="6"></textarea> </div> </div> <!-- button --> <div class="form-group"> <label class="col-md-4 control-label" for="submit"></label> <div class="col-md-4"> <button id="submit" name="submit" class="btn btn-primary">send message</button> </div> </div> </fieldset> </form>

then add together javascript below html posted above.

javascript html css forms tumblr

Comments

Post a Comment

Popular posts from this blog

Delphi change the assembly code of a running process -

Delphi change the assembly code of a running process - i'm trying alter address 00741fa5 has push test.009e721c . alter push test.009e71c8 . procedure callback; asm force $9e71c8 end; procedure tform2.btn1click(sender: tobject); var ppid :dword; pprocess : cardinal; begin getwindowthreadprocessid(findwindow(nil,pchar('test')), @ppid); pprocess := openprocess(process_all_access, false, ppid); injectasm(pprocess, $741fa5, 10, integer(@callback), 0); end; here injectasm function (with error checking) function injectasm(process: longword; injectaddress, injectsize, codeaddress, codesize : integer): pointer; var csize, rsize : integer; replaced : array of byte; jmp : array [0..4] of byte; jmpaddress : integer; nopv : byte; : integer; nbr: ulong_ptr; begin //injectsize must equal or greater 5, because need space our //(far) jmp wwxxyyzz instruction //if there's no space, inject in place of few instructions if injectsize ...
Read more

json - Hibernate and Jackson (java.lang.IllegalStateException: Cannot call sendError() after the response has been committed) -

json - Hibernate and Jackson (java.lang.IllegalStateException: Cannot call sendError() after the response has been committed) - hello have problem hibernate , jackson. have 2 pojos @entity @table(name = "users") public class user implements serializable { static final long serialversionuid = 4235637833262722256l; @id @generatedvalue private int id; @column(name = "creation_date") private date creationdate; @column(name = "first_name") private string firstname; @column(name = "last_name") private string lastname; @version @column(name = "version") private int version; @column(name = "e_mail") private string email; @column(name = "enabled") private boolean enabled; @column(name = "login") private string login; @column(name = "password") private string password; @jsonmanagedreference("role") @onetomany(mappedby = "user", cascade = cascadetype.all,fetch = fetchtyp...
Read more

C++ 11 "class" keyword -

C++ 11 "class" keyword - i've started using c++ 11 little bit more , have few questions on special uses of class keyword. know it's used declare class, there's 2 instances have seen don't understand: method<class t>(); and class class_name *var; why precede typename keyword class in first example, , keyword pointer in sec example? that known elaborated type specifier , necessary when class name "shadowed" or "hidden" , need explicit. class t { }; // love of god don't t t; t t2; if compiler smart, give these warnings: main.cpp:15:5: error: must utilize 'class' tag refer type 't' in scope t t2; ^ class main.cpp:14:7: note: class 't' hidden non-type declaration of 't' here t t; ^ if class not defined, deed forwards declaration. for example: template <typename t> void method() { using type = typename t::value_type; } method...
Read more