I want to make a contact form for my website. i want to make it without using a table. How do I do that? I was looking at div tags because I want to style it with CSS. I want to give it a length and width. I want to place it in a main div tag but I am not sure how I do so. Please help me. How do I do it?
Try searching on Google: "contact form CSS".
You will get so many examples with the code provided that you will get lost :D
Have a look on these two.
css-tricks.com
net.tutsplus.com
Hope this helps
I've used something similar to this-
<form id="contact-form" name="contact-form" action="/contact-us" method="post">
<div class="form-col">
<input type="text" name="Requester.FirstName" class="styled" placeholder="First Name">
<input type="text" name="Requester.LastName" class="styled" placeholder="Last Name">
<div class="selector fixedWidth">
<span>Subject</span>
<select name="Subject" class="styled">
<option value="">Subject</option>
<option value="custserv">Customer Service</option>
<option value="vendor">Vendor</option>
<option value="other">Other</option>
</select>
</div>
<textarea name="message" class="styled"></textarea>
</div>
<div class="form-col">
<input type="text" name="Requester.ContactInfo.Email" class="styled" placeholder="Email Address">
<input type="text" name="Requester.ContactInfo.Phone" class="styled" placeholder="Phone Number">
<span class="question">How do you prefer to be contacted?</span>
<label for="contact-method-phone">
<div class="radio" id="uniform-contact-method-phone"><span><input type="radio" name="ContactMethod" id="contact-method-phone" value="HomePhone" class="styled"></span></div>Phone
</label>
<label for="contact-method-email">
<div class="radio" id="uniform-contact-method-phone"><span><input type="radio" name="ContactMethod" id="contact-method-phone" value="Email" class="styled"></span></div>Email
</label>
<input type="text" name="Address.StreetAddress1" class="styled" placeholder="Address">
<input type="text" name="Address.StreetAddress1" class="styled">
<input type="submit" value="CONTACT US" class="m-form-button" name="CONTACT US">
</div>
</form>
And I try to follow SMACSS when styling
Related
I have a pre-form on a Wordpress site (localhost) where users submit their name, email, etc., before continuing to the first part of a multi-page quiz.
The problem is, if I enter any details, Wordpress directs to a 404 page. But if I leave them blank (obviously I want to make these required fields) then it directs to the next page all ok.
I have checked my .htaccess file, Apache settings and followed all the other possible solutions I have found on SO and elsewhere, but nothing I have found fixes the issue.
Here's my code:
<div class="pre-quiz">
<form action="<?php bloginfo('url'); ?>/part-1" method="post">
<div class="form-group row">
<div class="col-xs-6">
<input type="text" class="form-control" name="name" id="name" placeholder="First name">
</div>
<div class="col-xs-6">
<input type="text" class="form-control" name="surname" id="surname" placeholder="Last name">
</div>
</div>
<div class="form-group">
<input type="text" class="form-control" name="business" id="business" placeholder="Business name">
</div>
<div class="form-group">
<input type="email" class="form-control" name="email" id="email" placeholder="Email address">
</div>
<div class="custom-control custom-checkbox custom-control px-4 pb-4 pt-2">
<input type="checkbox" class="custom-control-input" name="terms" id="terms" value="terms">
<label class="custom-control-label" for="terms">
I accept the Terms of Use & Privacy Policy
</label>
</div>
<div class="form-group">
<button type="submit" class="btn btn-block">Next step</button>
</div>
</form>
</div>
Any help would be appreciated.
Thanks
I don`t see any error. Try to name your checkbox not "terms", maybe there is a conflict.
Regards Tom
Tom, I took your idea and tried it with all the other fields to see if Wordpress was using 'name' or 'email' and changed them to something unique - It worked! Thanks again for your input.
I have some disabled input text fields that I want the text color to be black because it's too greyed out.
I know its a simple one-line code but it won't work for some reason.
Other CSS properties work while it's disabled like the background color and stuff but not the text color.
Here's the CSS:
input[type="text"]:disabled {
color: black;
}
Here's the HTML:
<div class="form-container">
<label for="name">Full Name:</label>
<input id="profileName" type="text" disabled="disabled">
<label for="email">Email ID:</label>
<input id="profileEmail" type="text" disabled="disabled">
<label for="address">Address Line:</label>
<input id="profileAddress" type="text" disabled="disabled">
<label for="city">City:</label>
<input id="profileCity" type="text" disabled="disabled">
<label for="postcode">Postcode:</label>
<input id="profilePostcode" type="text" disabled="disabled">
<label for="state">State:</label>
<input id="profileState" type="text" disabled="disabled">
</div>
This is what it looks like on the android emulator running API 28.
I'm not sure why other properties work but not the text color.
Any ideas?
P.S. this is a cordova project and i am building it in Jquery Mobile v1.4.5
Nice to reply to you about the issue you are facing.
Since, you are using Jquery Mobile. The Jquery mobile on DOM generates div covering the input box. Since, you are also using disabled property of input box. So, jquery mobile implements a class on that div and there the opacity level have been defined.
So, add this:-
.form-container .ui-input-text.ui-state-disabled { opacity:1; color:black; }
Working Fiddle :- https://jsfiddle.net/h3Lbadgv/1/
Hope it works for you.
Thanks
Can you use this one.
.form-container input:disabled{color: black}
<div class="form-container">
<label for="name">Full Name:</label>
<input value="XXXPPPAAPP" id="profileName" type="text" disabled="disabled">
<label for="email">Email ID:</label>
<input value="XXXPPPAAPP" id="profileEmail" type="text" disabled="disabled">
<label for="address">Address Line:</label>
<input value="XXXPPPAAPP" id="profileAddress" type="text" disabled="disabled">
<label for="city">City:</label>
<input value="XXXPPPAAPP" id="profileCity" type="text" disabled="disabled">
<label for="postcode">Postcode:</label>
<input id="profilePostcode" type="text" disabled="disabled">
<label for="state">State:</label>
<input id="profileState" type="text" disabled="disabled">
</div>
Hope It Helps.
I have been trying to figure out how to make a custom field form that is responsive on Shopify.
<div class="one-whole">
<div class="one-half">
<label for="groom_name">Groom's First Name</label>
<input required type="text" id="groom_name" name="properties[groom_name]" placeholder="Groom">
</div>
<div class="one-half">
<label for="bride_name">Bride's First Name</label>
<input required type="text" id="bride_name" name="properties[bride_name]" placeholder="Bride">
</div>
<label for="last_name">Last Name</label>
<input required type="text" id="last_name" name="properties[Last Name]" placeholder="Last Name">
<label for="wedding_date">Wedding Date</label>
<input required type="date" name="wedding_date">
<label for="city">City</label>
<input required type="text" id="city" name="properties[City]" placeholder="City">
<label for="state">State</label>
</div>
That is the code and this is what I get.
I have tried doing whole and one-half and separating each input into its own div. The always seem to be left justified and now wrapping.
I would like Groom Name and Bride Name to be on the same line. But when on mobile to collapse.
This question is about css not liquid or shopify.
The classes your are looking for are documented here.
Try something like grid__item small--one-whole medium--one-half
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 have a simple HTML form that uses the Twitter Bootstrap framework (v3.1.1). On the smartphone/iPhone these checkboxes are quite small and hard to select with your finger. I would like to make them larger/more spaced out so they are easier to hit but haven't found a way so far - is this even possible.
Here's my form html:
<div class="container">
<div>
<p>Tick all that apply:</p>
<form role="form" action="continue.php" method="post">
<input type="hidden" name="selectionID" value="4567">
<div class="checkbox">
<label>
<input type="checkbox" name="selection[]" value="Fever/Temperature">Apples<br>
<input type="checkbox" name="selection[]" value="Swelling or redness at injection site">Oranges<br>
<input type="checkbox" name="selection[]" value="Pain at injection site">Bananas<br>
<input type="checkbox" name="selection[]" value="Tired/Fatigued">Pears<br>
<input type="checkbox" name="selection[]" value="Irritable">Mangoes<br>
<input type="checkbox" name="selection[]" value="Sleep pattern change">Watermelon<br>
<input type="checkbox" name="selection[]" value="Other">Other<br>
</label>
</div>
<button type="submit" class="btn btn-primary">Next</button>
</form>
</div>
</div>
I've also setup a jsfiddle here
This isn't easy to do cross-broswer .. check out the study made here: http://www.456bereastreet.com/lab/form_controls/checkboxes/
Also, make sure you're using correct HTML code. You should wrap each of your checkboxes with label, like this:
<div class="checkbox">
<label>
<input type="checkbox" name="selection[]" value="Fever/Temperature" />Apples<br/>
</label>
<label>
<input type="checkbox" name="selection[]" value="Swelling or redness at injection site" />Oranges<br/>
</label>
<label>
<input type="checkbox" name="selection[]" value="Pain at injection site" />Bananas<br/>
</label>
<!-- etc. -->
</div>