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.
Related
I have the following form
<form asp-action="Edit">
<div asp-validation-summary="ModelOnly" class="text-danger"></div>
<input type="hidden" asp-for="Id" />
<div class="form-group">
<label asp-for="Title" class="control-label"></label>
<input asp-for="Title" class="form-control" />
<span asp-validation-for="Title" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="ReleaseDate" class="control-label"></label>
<input asp-for="ReleaseDate" class="form-control" />
<span asp-validation-for="ReleaseDate" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="Genre" class="control-label"></label>
<input asp-for="Genre" class="form-control" />
<span asp-validation-for="Genre" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="Price" class="control-label"></label>
<input asp-for="Price" class="form-control" />
<span asp-validation-for="Price" class="text-danger"></span>
</div>
<div class="form-group">
<input type="submit" value="Save" class="btn btn-primary" />
</div>
</form>
After running the project and going to Edit action view, i see in the source code in browser that <form asp-action="Edit">is translated into <form action="/Movies/Edit/2" method="post">
My question is, how does ASP know about the id (2) in "/Movies/Edit/2".
In this markup the ASP defines what is its ID to be passed in POST when its form is sent to the controller.
<input type="hidden" asp-for="Id" />
A hidden field allows your entity Id to be kept in the form without being seen or modified by users when a form is submitted.
See this documentation below as a supplement to your question.
https://learn.microsoft.com/en-us/aspnet/core/tutorials/first-mvc-app/controller-methods-views?view=aspnetcore-2.2
Thanks!
The edit form should always be delivered from an URL that has an ID in the URL according to our routing rules, something like /Movies/edit/1.
The form is always going to post back to that same URL, /Movies/edit/1.
The MVC framework will be able to pull that ID out of the URL and pass it as a parameter.
Refer to https://www.tutorialspoint.com/asp.net_core/asp.net_core_razor_edit_form.htm
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
I've changed something, somewhere and now col-sm-offset-*s aren't working at all. For example, if I wanted to split the screen in half, and display content only on the right hand side, I would usually use:
<div class="container">
<div class="row">
<div class="col-sm-6 col-sm-offset-6">
This content isn't on the right hand side, it's on the left as if the col-sm-offset-6 isn't even there.
</div>
</div>
</div>
How can I check what's wrong?
I'm using NPM and Laravel Elixir (gulp) to minify (make production ready) the files and short of me copying the entire CSS file here, I don't know what else to do. Is there anything obvious? Has anyone come across this before?
Update
<div class="container">
<div class="row">
<div class="col-sm-6 col-sm-offset-6">
<div class="row">
<form role="form" method="POST" action="/register">
<input type="hidden" name="_token" value="abcdefghij">
<div class="col-xs-12">
<fieldset class="form-group">
<label for="username" class="form-control-label">Username</label>
<input name="username" type="text" class="form-control " id="username" placeholder="Enter a username" value="j">
</fieldset>
</div>
<div class="col-sm-6">
<fieldset class="form-group">
<label for="first_name" class="form-control-label">First Name</label>
<input name="first_name" type="text" class="form-control " id="first_name" placeholder="Enter your first name" value="John">
</fieldset>
</div>
<div class="col-sm-6">
<fieldset class="form-group">
<label for="last_name" class="form-control-label">Last Name</label>
<input name="last_name" type="text" class="form-control " id="last_name" placeholder="Enter your last name" value="Appleseed">
</fieldset>
</div>
<div class="col-sm-6">
<fieldset class="form-group">
<label for="email" class="form-control-label">Email Address</label>
<input name="email" type="email" class="form-control " id="email" placeholder="Enter your email address" value="j#a.com">
</fieldset>
</div>
<div class="col-sm-6">
<fieldset class="form-group">
<label for="password" class="form-control-label">Password</label>
<input name="password" type="password" class="form-control " id="password" placeholder="Enter a password" value="password">
</fieldset>
</div>
<div class="col-sm-6">
<fieldset class="form-group">
<label for="password_confirmation" class="form-control-label">Confirm Password</label>
<input name="password_confirmation" type="password" class="form-control " id="password_confirmation" placeholder="Please confirm your password" value="password">
</fieldset>
</div>
<div class="col-sm-6">
<div class="form-group">
<button type="submit" class="btn btn-primary pull-right">Register</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
Web Inspector
CSS Computed Properties
Update 2
I've submitted an issue on GitHub as this may have been intentional.
The current correct offset class for Bootstrap v4 Alpha:
class="col-md-6 offset-md-3"
GitHub have officially changed their col-bp-offset-* names although the documentation is currently outdated.
See issues: #19099, #19368, #19267, and my own #19562.
I'll close the question and update my GitHub issue too.
I'm new to Bootstrap, I'm creating a registration form with two input fields:
<div class="input-group">
<div class="form-group">
<label class="control-label" for="user_password">Password</label>
<div class="controls">
<input type="{{passwordType}}" data-ng-change="passwordChanged();" data-ng-model="user.password"
class="form-control" id="user_password" name="user_password"
placeholder="Password" required>
</div>
</div>
<div class="form-group">
<label class="control-label">Show Password</label>
<div class="controls">
<input type="checkbox" data-ng-model="showPassword" data-ng-checked="showPassword"
data-ng-click="switchPasswordType()">
</div>
</div>
However I don't know what css style I'm missing but the label and the input field appeas one below the other at the left of the grid-container, so no like usual form. I have tried to put both inside a "" with the style="display:inline-block" and still same problem.
Any ideas how to sove that?
Thank you for your time.
Found the solution, I just created a row with two columns inside one for the label and other for the input and it made the job.
<div class="row">
<div class="col-sm-6">
<label class="control-label" class="" for="user_email">Email</label>
</div>
<div class="col-sm-6">
<div class="controls">
<input type="email" auto-focus autofocus="true" data-ng-model="user.email"
id="user_email" name="user_email"
placeholder="Insert your email" required>
</div>
</div>
</div>
I am trying to combine horizontal-inline features of bootstrap 3 form designs !
This is what I have currently,you can see that i have created an inline form
I want the checkbox element and an anchor tag for forgot password option like this .
I found the example of what I want # FB login form design
I have put my code # Bootply Example
Any Help would be nice guys !
This is what I could do with pure bootstrap:
<form class="form-inline" role="form">
<div class="form-group">
<label label-default="" class="sr-only" for="exampleInputEmail2">Email address</label>
<input class="form-control" id="exampleInputEmail2"
placeholder="Enter email" type="email">
<div class="clearfix"></div>
<div class="checkbox">
<label>
<input type="checkbox">Remember me</label>
</div>
</div>
<div class="form-group">
<label label-default="" class="sr-only" for="exampleInputPassword2">Password</label>
<input class="form-control" id="exampleInputPassword2"
placeholder="Password" type="password">
<div class="clearfix"></div>
<div>
forgot password?
</div>
</div>
<button type="submit" class="btn btn-primary btn-lg">Sign in</button>
</form>
http://www.bootply.com/127634