I'm using Contact Form 7 plugin in Wordpress to add a form. I'm running into a problem when using textarea in the form; I have my tags styled with background-color: #0090bc;. However, it is displaying below the textarea also.
FRONT-END CODE FOR HOWARD E
Hope this helps
<p><label>Aim of Website<br>
<span class="wpcf7-form-control-wrap your-website-goal-1"><textarea name="your-website-goal-1" cols="40" rows="10" class="wpcf7-form-control wpcf7-textarea" aria-invalid="false" placeholder="e.g. 'I just need a website so that I can link people to it through social media'..."></textarea></span></label></p>
I've tried wrapping it in a div and setting the CSS
.full-spread textarea{
width: 100%;
height: 100%;
float: left;
position:relative;
}
Although this technically fixes the issue I run into another one where there is no gap between the next element below this div then - and I can't figure out how to resolve that new issue then either.
This, however, doesn't solve my issue so you can ignore it.
Here is my code to support the screenshots:
<label>Aim of Website[textarea your-website-goal-1 placeholder "e.g. 'I just need a website
so that I can link people to it through social media'..."]</label>
</div>
<label>Websites you've seen online that you like
[textarea influenced-website-1 placeholder "e.g. ''www.thiswebsite.com' - I like how this website details everything on one page'..."]</label>
<div>
My label tags are target with this CSS:
.wpcf7-form label {
text-align:center;
color: white;
padding-top: 5px;
background-color: #0090bc;
border-radius: 4px 4px 0px 0px;
}
Targeting this textarea by adding margin-bottom:-1%; it removes the extra bit of the label tag showing under the textarea
<span class="wpcf7-form-control-wrap your-website-goal-1"><textarea name="your-website-goal-1" cols="40" rows="10" class="wpcf7-form-control wpcf7-textarea" aria-invalid="false" placeholder="e.g. 'I just need a website so that I can link people to it through social media'..."></textarea></span>
Related
I am trying to integrate an HTML 5 required checkbox into a form:
<p>
<input class="checkbox" type="checkbox" required name="terms"> By submitting you agree to the processing of your data for the purpose of processing your request/booking.
<br>
<a href="/en/datenschutz.php" target="_blank">
<u>Privacy Policy</u>
</a>
</p>
It is not displaying in a single browser. I haven't had this problem with other sites before, this site is running Bootstrap v2.2.2.
I found some possible solution with labels which didn't work.
Your Style.css file has this rule:
input[type="checkbox"] {
display: none;
}
Delete it and you will see your checkbox.
If you need that rule for whatever reason and you only want to override it for this particular checkbox, then you'll have to add another CSS rule to override it. Obviously, adding an inline style will do the job, but it might be not the best way to go:
<input class="checkbox" type="checkbox" required name="terms" style="display: inline-block;">
Your style.css might contain the appearance css property. This is used to display an element using platform-native styling, based on the operating system's theme. Look up : https://developer.mozilla.org/en-US/docs/Web/CSS/appearance
your code might contain a css rule such as:
input {
-moz-appearance: none;
-webkit-appearance: none;
-ms-appearance: none;
appearance: none;
}
if you wanna keep this property and change the checkbox specifically then use :
input[type="checkbox"] {
appearance: checkbox !important;
}
You can use both css.
But here
style="display: inline-block;"
inside input type are override display: none;
input.checkbox {
display: inline-block;
}
/*input[type="checkbox"] {
display: inline-block;
}*/
<p>
<input class="checkbox" type="checkbox" required name="terms">By submitting you agree to the processing of your data for the purpose of processing your request/booking.
</p>
<a href="/en/datenschutz.php" target="_blank">
<u>Privacy Policy</u>
</a>
I have a wordpress landing page, and I use Contact Form 7 to collect my leads. The thing is that I'm unable to design the "Thank you message" with CSS. I wish to align the text to the center and change the border from green to orange. I used the following CSS:
div.wpcf7-response-output {
padding: 0.2em 1em;
}
div.wpcf7-mail-sent-ok {
border: 2px solid #ff6600;
text-align: center;
direction: rtl;
}
The CSS is not working, I also tried to use !important. You can see the form I'm trying to design at the bottom of the page- http://mickeyberkowitz.com/
The form's shortcode is:
<center>
</label> <label for= ".wpcf7-form-control.wpcf7-text.wpcf7-tel.wpcf7-validates-as-required.wpcf7-validates-as-tel* your-email"> <input type="tel" textarea name="your-phone" input placeholder="טלפון" id:phone required</input></label><label for=".elementor-6 .elementor-element.elementor-element-5m0lukt .wpcf7 input[type="text"]"><input type=text textarea name="your-name" placeholder="שם מלא" required id:name </input>
[submit "!אני רוצה עוד פרטים"]
</center>
I am using bootstrap 3 & the issue is that label for the checkbox is overlapping the text. I have tried a few thing things but did not work, so if someone can help I will really appreciate it. This is what the code looks like, The class of the form is form-horizontal
<div class="checkbox">
<label class="checkbox-inline no_indent">I have read and agree with privacy and disclosure policy.
<input name="Terms" id="Terms" type="checkbox" ></label>
</div>
It's supposed to be like this with Bootstrap, <input> first and text after. http://jsfiddle.net/sqax02ah/
<div class="checkbox">
<label class="checkbox-inline no_indent">
<input name="Terms" id="Terms" type="checkbox">
I have read and agree with privacy and disclosure policy.
</label>
</div>
You can follow other answers if you do need the checkbox appears at the end.
In Bootstrap the styles expect thecheckbox to be first and then the text and hence a margin-left: -20px is set. For you snippet you need to add custom styles.
.radio input[type=radio], .radio-inline input[type=radio], .checkbox input[type=checkbox], .checkbox-inline input[type=checkbox] {
margin-right: -20px;
margin-left: 0;
}
Fiddle
Try use display: inline-block for .checkbox class, its should to help. Or change position via margin margin-left: 20px;
All,
I need to have any input validation messages display below the element instead of next to it. The base CSS file puts a margin-bottom = 19px on the <input /> element so I need to offset this because if I don't the message gets inserted 19px below the input element.
Example:
http://jsfiddle.net/L28E7/2/
ASP.NET is generating all of the HTML so I am hamstrung somewhat in terms of what I can do.
I can access the .field-validation-error class and override it so that's what I did.
My CSS works (In FireFox at least) and produces the following:
I had to use negative margin-top to get the message right under the element, which I am not happy with.
How can I improve this?
Thank you!
The CSS
div .field-validation-error {
color: #C1372A !important;
display: block;
font-weight: normal !important;
margin-top: -19px;
margin-bottom: 10px;
}
The HTML
<div>
<label for="NewClub.NewClubName">Name your club!!!</label>
<span class="required">*</span>
</div>
<input type="text" value="" name="NewClub.NewClubName" id="NewClub_NewClubName" data-val-required="Please provide your club with a name." data-val="true" class="text-box single-line">
<span class="field-validation-valid" data-valmsg-replace="true" data-valmsg-for="NewClub.NewClubName"></span>
if this is how your HTML looks after the creating of inline error message
<input type="text" value="" name="NewClub.NewClubName" id="NewClub_NewClubName" data-val-required="Please provide your club with a name." data-val="true" class="text-box single-line">
<span class="field-validation-error" data-valmsg-replace="true" data-valmsg-for="NewClub.NewClubName">heloo hell</span>
Then use the below css. This will automatically put your message below the text box
.field-validation-error {
color: #C1372A !important;
display: block;
font-weight: normal !important;
}
Here is the fiddle
http://jsfiddle.net/L28E7/
I would like to blend a static value next to a simple text input form.
so it will look like, for example:
[static]What do you think about[/static] [user info]...[/userinfo].
i've came up with this:
<p style="display:inline;">What Is It Like To Be</p>
<div>
<input name="post_title" type="text" id="topic" class="input" size="50" maxlength="100" tabindex="1" placeholder="<?php echo $_GET["pr"];?>" style="padding-left:45px; " style="display:inline;"/>
</div>
So, I do get the static 'prefix' inlined with the input form, but i want to make the static text look 'like' it is part of the form. Like a static 'placeholder' tag.
Thanks guys :)
You could try something like this:
HTML
<label class="input-stretch">prefix_<input type="text" /></label>
CSS
.input-stretch {
border: 1px solid #222;
padding: 0.1em;
}
.input-stretch input {
border: none;
outline: none !important;
}
Basically remove the input border and outline, then add one to the label or whatever other element you want to wrap it in.
outline: none !important; may also need to be applied on active/focus states, iirc chrome gives it some nice blue outline??
DEMO