I am using Symfony version 2.3 and twig version 1.0. and I'm trying to change the name attribut value. Here is my code :
<div class="control-group">
{{ form_label(form.menuTitle, null, {'label_attr': {'class': 'control-label'}}) }}
{{ form_errors(form.menuTitle)}}
<div class="controls">
<div class="span12">
{{ form_widget(form.menuTitle, {'attr': {'class': 'span6'}}) }}
</div>
</div>
</div>
The rendering code :
<div class="control-group">
<label class="control-label required" for="smart_contactbundle_contact_menuTitle">Menu title</label>
<div class="controls">
<div class="span12">
<input type="text" id="smart_contactbundle_contact_menuTitle" name="smart_contactbundle_contact[menuTitle]" required="required" maxlength="255" class="span6">
</div>
</div>
</div>
I want to change name="smart_contactbundle_contact[menuTitle]" to name="menuTitle"
If you do that, there's a good possibility that your form won't submit correctly.
However...
If you really want to do it:
{{ form_widget(form.menuTitle, {'full_name': 'menuTitle'}) }}
Should get you where you want to be.
A full list of available form variables can be found here:
Form Variables Reference
Related
I'm copying an HTML template into a flask app. It comes with its own style sheet and I've made it work with the static elements on the page. My issue is that the contact us form that I'm trying to create with Jinja templates is looking very basic. I need to figure out how to add the existing style templates to the form fields.
In the original template, this is what the form fields looked like:
<div class="form-group">
<input type="text" name="name" class="form-control" id="name" placeholder="Your Name" data-rule="minlen:4" data-msg="Please enter at least 4 chars" />
<div class="validation"></div>
</div>
<div class="form-group">
<input type="email" class="form-control" name="email" id="email" placeholder="Your Email" data-rule="email" data-msg="Please enter a valid email" />
<div class="validation"></div>
</div>
<div class="form-group">
<input type="text" class="form-control" name="subject" id="subject" placeholder="Subject" data-rule="minlen:4" data-msg="Please enter at least 8 chars of subject" />
<div class="validation"></div>
</div>
<div class="form-group">
<textarea class="form-control" name="message" rows="5" data-rule="required" data-msg="Please write something for us" placeholder="Message"></textarea>
<div class="validation"></div>
</div>
<div class="text-center"><button type="submit">Send Message</button></div>
In my new form, this is what I have:
<div class="form-group">
{{ form.name(class="form-control") }}
</div>
<div class="form-group">
{{ form.email.label }}
{{ form.email }}
</div>
<div class="form-group">
{{ form.subject.label }}
{{ form.subject }}
</div>
<div class="form-group">
{{ form.message.label }}
{{ form.message }}
</div>
{{ form.submit }}
As you can see, I've been trying to add the original css classes to the Jinja template by adding class="form-control" to the form name. I haven't figured out how to add the rest. I'd appreciate your help with this.
<div class="form-group">
{{ form.name(class="form-control") }}
</div>
<div class="form-group">
{{ form.email.label(class="yourclass") }}
{{ form.email(class="yourclass") }}
</div>
<div class="form-group">
{{ form.subject.label(class="yourclass") }}
{{ form.subject(class="yourclass") }}
</div>
<div class="form-group">
{{ form.message.label(class="yourclass") }}
{{ form.message(class="yourclass") }}
</div>
{{ form.submit(class="yourclass") }}
Try this
In order to customize the views of the new user page, I need to remove the elements {{ form_start(form) }} and {{ form_end(form) }} from my twig template new.html.twig. It lets the page unorganized. Unfortunately, when I delete it, the insert new user don't display.
here is my twig code new.html.twig :
<div class="content">
{{ form_start(form) }}
<form class="form-horizontal group-border-dashed" action="#" style="border-radius: 0px;">
<div class="form-group">
<label class="col-sm-3 control-label">
Username
</label>
<div class="col-sm-6">
{{ form_widget(form.username, { 'attr': {'class': 'form-control','placeholder':'Username'}} ) }}
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">
EMAIL
</label>
<div class="col-sm-6">
{{ form_widget(form.email, { 'attr': {'class': 'form-control','placeholder':'EMAIL '}} ) }}
</div>
</div>
<--! and so on -->
{{ form_widget(form) }}
<input type="submit" value="Create" />
{{ form_end(form) }}
<ul>
<li>
Back to the list
</li>
</ul>
</form>
</div>
Is there a way to remove the form_start and form_end from my twig
have you consider using the options of form_start?
like this :
form_start(form, 'attr':{ 'class':'form-horizontal group-border-dashed', 'style': 'border-radius: 0px;'})
you'll be able to remove the <form> but keep a concitent templating
note that the style should'nt be in your html page but in your css file. If you're using bootstrap you have access to this :
<span class="rounded-0"></span>
PS : if you fully template your form, you won't have access to the individual errors of each form that are autogenerated by symfony. read this page for more info.
post edit
I have edited your question to see it more clearly and new questions arised.
why are you using the form_widget(form) if you create all the element by yourself ?
you forgot the form_rest(form)that create the hidden csrf token (essential for security) and finnaly if you want to keep your <ul> inside the form why closing the form with form_end(form) before ?
I'm using FOSUserBundle in my Symfony application. Everything work but i would like to know how to custom the render of the forms delivered by the bundle.
I have already succesfully custom the login form but i didn't find the way to custom for example the changePassword.html.twig.
I'have checked in ChangePasswordFormType.php to see if I can get the differents fields of the form but I must have missed something.
For example in my FOSUserBundle login.html.twig:
<form class="form-group-lg" action="{{ path("fos_user_security_check") }}" method="post">
<input type="hidden" name="_csrf_token" value="{{ csrf_token }}" />
<fieldset>
{% if error %}
<div class="row">
<div class="alert alert-danger" role="alert">{{ error|trans({}, 'FOSUserBundle') }}</div>
</div>
{% endif %}
<div class="row">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<input class="form-control" for="username" placeholder="{{ 'security.login.username'|trans({}, 'FOSUserBundle') }}" type="text" id="username" name="_username" value="{{ last_username }}" required="required" />
</div>
</div>
<div class="row">
</div>
<br>
<div class="row">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span>
<input class="form-control" for="password" placeholder="{{ 'security.login.password'|trans({}, 'FOSUserBundle') }}" type="password" id="password" name="_password" required="required" />
</div>
<p class="text-right"> <a href={{ path('fos_user_resetting_request') }}> Mot de passe oublié ?</a></p>
</div>
<div class="checkbox">
<label>
<input type="checkbox" for="remember_me"/>{{ 'security.login.remember_me'|trans({}, 'FOSUserBundle') }}
</label>
</div>
<input class="btn btn-lg btn-primary btn-block" type="submit" id="_submit" name="_submit" value="{{ 'security.login.submit'|trans({}, 'FOSUserBundle') }}" />
</fieldset>
</form>
I'm looking for using the same syntax as {{ 'security.login.username'|trans({}, 'FOSUserBundle') }} for the others template provided by FOSUserBundleto get boostrap theme on it.
If someone have already done that i would like to know how you've done this.
Thanks.
FOSUserBundle templates are located at : vendor/friendsofsymfony/user-bundle/Resources/views/
To override these templates, create the folder app/Resources/FOSUserBundle/views then, you create a template with the same name as the FOSUserBundle template you want to override.
For example to override the change passord template :
vendor/friendsofsymfony/user-bundle/Resources/views/ChangePassword/change_password.html.twig
You must create app/Resources/FOSUserBundle/views/ChangePassword/change_passord.html.twig
I'm trying to orientate myself with Symfony framework by going through the "Symfony Demo application" and am trying to work my way through the interconnections. However in the below code snippet I can't find where this twig reference is getting defined value="{{ last_username }}":
\app\Resources\view\security\login.html.twig
{% extends 'base.html.twig' %}
{% block body_id 'login' %}
{% block main %}
{% if error %}
<div class="alert alert-danger">
{{ error.messageKey|trans(error.messageData) }}
</div>
{% endif %}
<div class="row">
<div class="col-sm-5">
<div class="well">
<form action="{{ path('security_login_check') }}" method="post">
<fieldset>
<legend><i class="fa fa-lock"></i> Secure Sign in</legend>
<div class="form-group">
<label for="username">Username</label>
<input type="text" id="username" name="_username" value="{{ last_username }}" class="form-control"/>
</div>
<div class="form-group">
<label for="password">Password:</label>
<input type="password" id="password" name="_password" class="form-control" />
</div>
<input type="hidden" name="_csrf_token" value="{{ csrf_token('authenticate') }}"/>
<button type="submit" class="btn btn-primary">
<i class="fa fa-sign-in"></i> Sign in
</button>
</fieldset>
</form>
</div>
</div>
I have searched the whole demo application for last_username and it only appears in these four files:
\app\cache\dev\classes.php
\app\cache\prod\classes.php
\vendor\symfony\symfony\src\Symfony\Component\Security\Core\SecurityContextInterface.php
\vendor\symfony\symfony\src\Symfony\Component\Security\Core\Security.php
...all of which don't seem to offer anything helpful of defining last_username.
The last_username parameter is passed to the template via the SecurityController, which is defined in the src/AppBundle/Controller/SecurityController.php file.
One of the coolest features of the Symfony Demo application is that all pages include a Show code which shows you both the controller and the template used to create the page you are looking at. For example, in the case of the login page:
I am having couple of problems with implementing login form in bootstrap 3 in navbar.
I have attached the image below:
I want "Remember me" and "Forgot password" to align with input boxes for username and password right below it. but they are not well-aligned.
The color on "forgot password" is blue which I want it to be white (or red).
The font of the "Remember me" and "forgot password" are inconsistent with placeholders I placed in form.
how can I fix these issues?
<div class="navbar-collapse collapse">
<form class="navbar-form navbar-right" role="form" action="" method="post">
{% csrf_token %}
<div class="form-group {% if login_failed %} has-error {% endif %}">
{{ form.username.label_tag }}
<input type="text" placeholder="Uname or Email" class="form-control input-sm" {% if login_failed %}
id = "inputError" {% endif %} name="username">
</div>
<div class="form-group {% if login_failed %} has-error {% endif %}">
<input type="password" placeholder="Password" class="form-control input-sm" name="password"
{% if login_failed %} id = "inputError" {% endif %}>
</div>
<button type="submit" class="btn btn-success">Sign in</button><br>
<div class="form-group">
<div class="col-xs-12">
<label><input type="checkbox" value="remember-me">Remember me</label>
<label><a class="help-inline" href="{% url 'django.contrib.auth.views.password_reset' %}">Forgot password?</a></label>
</div>
</div>
Replace the class "navbar-form" by "form-inline" in tag .
Like said, apply a class directly to the tag "Forgot password", or more generally :
.navbar-collapse a{color:red}
http://jsfiddle.net/u2pNA/
I'm not familar with django, but i'll try to see if I can help with your bootstrap issues.
To seperate the remember me and the forgot password you can do something like this. Seperating into two columns( 2x col-xs-6) instead of using one(col-xs-12)
<div class="form-group">
<div class="col-xs-6">
<label><input type="checkbox" value="remember-me">Remember me</label</div><div class="col-xs-6"><label><a class="help-inline" href="{% url'django.contrib.auth.views.password_reset' %}">Forgot password?</a></label>
</div>
To change the color of the Forgot password to white, you would need to set a class on that link.
so perhaps something like
.navbar .form-group a{color:#FFF}
Hope that helps a bit. Good luck.