I found the code I need to embed into Google Sites to a add google search box, but I don't know how to make it larger. Can someone help me scale this up?
<form action="https://www.google.com/search" class="searchform" method="get" name="searchform" target="_blank">
<input name="sitesearch" type="hidden" value="example.com">
<input autocomplete="on" class="form-control search" name="q" placeholder="Search in example.com" required="required" type="text">
<button class="button" type="submit">Search</button>
</form>
You could only add the font-size property in CSS
.form-control.search {
font-size: 40px;
}
<form action="https://www.google.com/search" class="searchform" method="get" name="searchform" target="_blank">
<input name="sitesearch" type="hidden" value="example.com">
<input autocomplete="on" class="form-control search" name="q" placeholder="Search in example.com" required="required" type="text">
<button class="button" type="submit">Search</button>
</form>
or you can set a width and height
.form-control.search {
width: 80vw;
height: 50px;
}
<form action="https://www.google.com/search" class="searchform" method="get" name="searchform" target="_blank">
<input name="sitesearch" type="hidden" value="example.com">
<input autocomplete="on" class="form-control search" name="q" placeholder="Search in example.com" required="required" type="text">
<button class="button" type="submit">Search</button>
</form>
Obviously you can have a combination of both depending on what/how you want to make it larger.
Related
Anchor tag acts as a form submit button?
<form method="get" action="<?php bloginfo('url'); ?>/">
<div class="field-search">
<input type="text" class="form-control input-lg" placeholder="Search for..." value="<?php the_search_query(); ?>">
<i class="fa fa-search font-16"></i>
</div>
<form action="test.aspx" type="POST">
<label>
<span>Username</span>
<input type="text" name="UserName" id="UserName" class="input-text required" />
</label>
<label>
<span>Password</span>
<input type="password" name="Password" id="Password" class="input-text required" />
</label>
<label>
<input type="checkbox" name="RememberMe" id="RememberMe" class="check-box" />
<span class="checkboxlabel">Remember Me</span>
</label>
<div class="spacer">
Login
</div>
</form>
jquery
$(document).ready(function(){
$(document).on("click",".login-button",function(){
var form = $(this).closest("form");
//console.log(form);
form.submit();
});
});
possible duplicate of
(Anchor tag as submit button?)
(This is a copied answer)
Try this approach see if it works.
Add a click event to your anchor tag as below and do a event.stopPropagation()
$('a').on('click', function(e){
e.stopPropagation();
})`
See if this works
Is there any bootstrap3 way to put all these fileds into one row? If it's possible I want to keep the input-group solution too.
<div class="input-group">
<input type="text" name="name" placeholder="Name" class="form-control" required>
<input type="text" name="tel" placeholder="Phone" class="form-control">
<input type="text" name="email" placeholder="E-mail" class="form-control">
<button type="submit" class="btn btn-primary">
<i class="fa fa-btn fa-plus"></i>
</button>
</div>
Is this possible without CSS style hacking?
You can do it in this way
<div class="form-inline">
<input type="text" name="name" placeholder="Name" class="form-control" required>
<input type="text" name="tel" placeholder="Phone" class="form-control">
<input type="text" name="email" placeholder="E-mail" class="form-control">
<button type="submit" class="btn btn-primary">
<i class="fa fa-btn fa-plus"></i>
</button>
</div>
I'm trying do a few customizations to the wordpress default search form and I would like to replace the text "Search" in the value="Search" string with an icon.
Currently I have the following form:
<form role="search" method="get" id="searchform" class="searchform" action="//example.com/">
<div class="box">
<div class="container-1">
<input type="text" value="" name="s" id="s" placeholder="Search..." />
<input type="submit" id="searchsubmit" value="Search" />
</div>
</div>
</form>
How can I put in the following icon instead? <i class="fa fa-search"></i>
Here is a bit of a workaround, I replaced the input with button, removed value completely
<form role="search" method="get" id="searchform" class="searchform" action="//example.com/">
<div class="box">
<div class="container-1">
<input type="text" value="" name="s" id="s" placeholder="Search..." />
<button type="submit" id="searchsubmit" />
<span class="icon"><i class="fa fa-search"></i></span>
</button>
</div>
</div>
</form>
Form seems to work just fine ..
This is my HTML from. and i'm trying to set a Virtual Page View when submitting the form but i just can't make it work.
Pls advice
<form id="frmContact" action="post.php" method="post">
<div class="form-right-pnl">
<input type="text" class="required name" size="40" placeholder="×©× ×ž×œ×:" name="full_name">
<input type="text" class="required phone" size="40" placeholder="טלפון:" name="phone">
<input type="text" class="required email" size="40" placeholder='דו×"ל:' name="email">
<span>מ×שר קבלת ×—×•×ž×¨×™× ×¤×¨×¡×•×ž×™×™×</span>
<input type="checkbox" class="radio_btn" name="selling_a_property" checked value="Yes"/>
</div>
<div class="form-left-pnl" id='basic-modal'>
<input class="ddl_list" type="submit" value="" onClick=”_gaq.push([‘_trackEvent’, ‘Forms’, ‘Submit’]);” />
</div>
<div class="clear"></div>
</form>
Change this line
<input class="ddl_list" type="submit" value="" onClick=”_gaq.push([‘_trackEvent’, ‘Forms’, ‘Submit’]);” />
for
<input class="ddl_list" type="submit" value="" onClick=”_gaq.push(['_trackPageview', '/virtual-page-view-on-click-submit-button']);” />
I am currently struggeling making from elements if twitter bootsrap 3.0 display in one without breaks in it. What happens when I make a wrapper float is that the input elements cut off.
Look at this jsfiddle please
<form id="commentform" method="post" action="http://devsite.localhost/wp-comments-post.php" name="commentform">
<span class="comment-form-author"><label class="obscure" for="author">Name</label><span class="input-group span2"><input type="text" placeholder="Name *" aria-required="true" tabindex="1" size="30" value="" name="author" id="author" /></span></span> <span class="comment-form-email"><label class="obscure" for="author">Email</label><span class="input-group span3"><input type="text" placeholder="Email *" aria-required="true" tabindex="2" size="30" value="" name="email" id="email" /></span></span> <span class="comment-form-url"><label class="obscure" for="url">Website</label><span class="input-group span3"><input type="text" placeholder="Website" tabindex="3" size="30" value="" name="url" class="input-medium" id="url" /></span></span>
<div class="comment-form-comment">
<textarea placeholder="Comment" aria-required="true" tabindex="4" rows="8" cols="45" name="comment" id="comment">
</textarea>
</div>
<!-- #form-section-comment .form-section -->
<p class="form-submit"><input type="submit" value="Post Comment" id="submit" name="submit" /> <input type="hidden" id="comment_post_ID" value="14" name="comment_post_ID" /> <input type="hidden" value="0" id="comment_parent" name="comment_parent" /></p>
</form>
css
#import url('http://my-hardware.net/bs/bootstrap.css');
/* hiding content but not from screen readers, used in comments form */
.obscure {
position: absolute !important;
clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
clip: rect(1px, 1px, 1px, 1px);
}
.comment-form-email{
display: block;
float: left;
}
For showing purposes I just added my attempt to one of the 3 imputs I want to line up.
Does anyone has a idea how to make this work?
I think this should work...
<div class="controls-row">
<div class="control-group col col-lg-2">
<div class="input-group">
<span class="input-group-addon">X</span>
<input type="text">
</div>
</div>
<div class="control-group col col-lg-2">
<div class="input-group">
<span class="input-group-addon">Y</span>
<input type="text">
</div>
</div>
</div>