I need add some custom attribues to inputs from Contact Form 7, but without using JS.
For eg. I need add data-timepicker="true" and data-language='en' - those attributes are for Air-Datepicker plugin.
I was trying create those attributes with JS and it's works, but not for Air-Datepicker - probably JS works to late.
So, how can I do that without JS?
You could just add the input directly into your form, after copying the output from the form on the page.
For example... If you add the form tag
<label>The Date</label>
[text* the-date]
on the output of the form when you view the source on the page you've pasted the contact form shortcode, you'll see this:
<label>Enter Date</label>
<span class="wpcf7-form-control-wrap the-date"><input type="text" name="the-date" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" aria-required="true" aria-invalid="false"></span>
Then copy it back to your form and replace your form tag [the-date] with:
<label>Enter Date</label>
<span class="wpcf7-form-control-wrap the-date"><input type="text" name="the-date" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" aria-required="true" aria-invalid="false" data-timepicker="true" data-language="en"></span>
Just make sure you include in your email [the-date] - as it won't show up on the mail tab to remind you.
Related
I need CSS code to restrict submit button if fields are empty.Daily we are receiving 3-5 blank inquiries through our WordPress landing page submit button.
Where to put these CSS codes if any.
Thanks
You really should do this with a script, because doing something like this by CSS is very sensitive to any future changes to your form structure.
It can be done with only CSS, using the :placeholder-shown selector.
For this you'll need to add a placeholder to all text inputs.
/* As long as one of the selectors is matched, the button won't show. */
form input:placeholder-shown ~ button,
form textarea:placeholder-shown ~ button {
display: none;
}
<form>
first name: <input type="text" name="firstname" placeholder="Enter first name"><br>
Last name: <input type="text" name="lastname" placeholder="Enter last name"><br>
Text area<br>
<textarea name="textarea" placeholder="Enter some text..."></textarea>
<br>
<button type="submit">Submit</button>
</form>
This will work, but for any change in the form you'll need to make sure it doesn't break.
I personally won't use this :)
I am currently trying to modify the CSS of a generated HTML page. I do not have access to run scripts on this page or change the base HTML.
The form has inputs and I am trying to create floating labels for them, which I typically do something like this:
<input id="email">
<label for="email">E-mail</label>
With CSS something like this:
input:focus + label { top: 100%; }
However the generated HTML is structured like this, with the label before the input and error blocks between:
<label for="email">Email Address</label>
<div aria-hidden="true" class="error itemLevel">
<p aria-live="polite" role="alert" tabindex="1">Please enter a valid email address.</p>
<input aria-required="true" id="email" title="Email address that can be used to contact you." type="text">
How would I target the label with pure CSS?
You can use an attribute selector:
label[for="email"] { ... }
About a week ago i posted a question but couldn't get it answer because i didn't know how to use jsfiddle or codepen but i figured it out.
my problem is that the button doesn't work now if you click around it it will display the file search box this is the sample:
https://codepen.io/anon/pen/bWaYzJ
<label> Uploads
<label for="exampleFileUpload" class="button">Upload File</label>
<input type="file" id="exampleFileUpload" class="show-for-sr">
</label>
now if i detached the plugin from element then button works again.
change your outer label to div seems to solve your problem like this codepen
<div> Uploads
<label for="exampleFileUpload" class="button">Upload File</label>
<input type="file" id="exampleFileUpload" class="show-for-sr">
</div>
<label for="exampleFileUpload" class="button">Upload File</label>
<input type="file" id="exampleFileUpload" class="show-for-sr">
And make your javascript:
$(document).ready(function(){
$('#exampleFileUpload').onClick({
MultiFile();
});
});
First, remove the reference to the MultiFile source file - that's what causes the "MultiFile is not a function" error. You will need to include the MultiFile directly in the source for the codepen (as you already have).
Second, the label needs to wrap the input, and it cannot use the for attribute (since that relies on the name attribute for the target, which you have not set):
<div> Uploads
<label class="button">Upload File
<input type="file" id="exampleFileUpload" class="show-for-sr" multiple>
</label>
</div>
I am using Tuple to pass two models inside the view like code given below.
#model Tuple<AdvanceSearchModel, List<SearchUserModel>>
<form role="search" method="post" action="/Public/AdvanceSearch">
<div class="form-group">
<label>Name</label>
<input name="FullNames" type="text" class="form-control" value=""/>
</div>
<div class="form-group">
<label>Product</label>
<input name="Products" type="text" class="form-control" value="" />
</div>
<div class="form-group">
<label>Location:</label>
<input name="Location" type="text" class="form-control" value="" />
</div>
<div class="form-group">
<label>State</label>
<input name="States" type="text" class="form-control" value="" />
</div>
<div class="form-group">
<label>Country</label>
<input name="Countries" type="text" class="form-control" value=""/>
</div>
</form>
All the name attributes inside inputs are of AdvanceSearchModel. How do I use tag helper such as asp-for when passing multiple model to the views containing one or multiple forms? Also how do I retain values of the form after submitting the form in above scenario?
As you can see in the source code of InputTagHelper
You can see it creates the name attribute based on the (lambda) expression in html-tag:asp-for.
what you need
You need a form name tag like this SearchUserModel[0].Location
Where:
SearchUserModel is the property name on the model which is in the controller method you post to
[0] is the index in the list
Location is the property on the iten in the list the SearchUserModel instance
My suggestion
Not to do
Extend the InputTagHelper and add a prefix option (which adds a prefex to the name).
Use a view model Not a tuple!
Create a partial view that only takes SearchUserModel + a prefix (like an int for which row in the list it is for example: usermodel[1])
In your view loop over the list and call the partial.
result
#model SearchUserModel
<input asp-for="Location" my-prefix="ListItem[#Model.Id]" class="form-control" />
Better longterm option
Make a HTML template on how SearchUserModel part of the form should look.
Do ajax call to get the data or put the data as json in your view. (or take step 3 from what not to do)
Generate the form with well structured javascript.
On submit Instead of submitting the form, parse the from to json and send this as json ajax call.
Why do i say this? It is easier to debug if you get weird databindings in your controller.
That said, option 1 is perfectly fine but it might lead to problems later, as it is very static template, you wont be able to add or remove rows easily.
References for proper html name tags for lists:
http://www.hanselman.com/blog/ASPNETWireFormatForModelBindingToArraysListsCollectionsDictionaries.aspx
How does MVC 4 List Model Binding work?
It is possible to use the basic types of field to create a multidimensional array name?
For example:
<input type="text" name="my_type[translations][name][de]">
<input type="text" name="my_type[translations][name][fr]">
You can use ColectionType. But then you will probably need to change something about how you're using input names like here name="my_type[translations][name][fr]", maybe name="my_type[translations][nameFr]". Using it, your inputs will look like
<input type="text" name="my_type[translations][0][nameDe]">
<input type="text" name="my_type[translations][0][nameFr]">
<input type="text" name="my_type[translations][1][nameDe]">
<input type="text" name="my_type[translations][1][nameFr]">
Here I also presume that you have Translation entity which would have nameDe and nameFr properties.