Custom forms no css styling

Topics: Troubleshooting
Oct 11, 2013 at 11:08 AM
Edited Oct 11, 2013 at 11:56 AM
Hi

I have an orchard 1.7.1 site her: http://music-copyrights.azurewebsites.net

on this site i have installed the bootstrap theme:http://gallery.orchardproject.net/List/Themes/Orchard.Theme.Bootstrap

And everything is fine, except for this single contact form on my site found here:

http://music-copyrights.azurewebsites.net/send-your-request

The form has no css styling at all, and i can't figure out if it is orchard or the bootstap theme and why it has no styling, so can someone help me out on this one?

the weird thing is that it works fine on my own site where the setup is the same:

http://williamholmjacobsen.com/Contact

thanks by the way

/Will.
Coordinator
Oct 12, 2013 at 10:32 PM
I would help if you could give information about how you built the contact form.
Oct 12, 2013 at 11:11 PM
Hi Bertrand thx for reply

I have built the form by first:
  • creating a new content-type "Contact Form" which only has "Common" parts on it
  • added 3 fields (Email, Song and Project)
  • enabled module "Custom forms"
  • created a new custom form with my previous created content type "Contact Form.
But i have found out that on my own site i use a version previous to bootstrap 3, so bootstrap version 2.something works out of the box with html forms. Apparently they have changed something in bootstrap 3, so you manually have to add the form controls yourself. In my try to achieve that I have played a bit with shape tracer and created a new alternate template for overriding content.zone, but it overrides all other pages and forms with content.zone, and i am kinda new to this templating so which way would you propose i do it?

/Will.
Coordinator
Oct 12, 2013 at 11:14 PM
Seems like you're digging that hole. I'd recommend backup out and starting over at an earlier point where everything was working better. Once you've done that, view source on that contact page and try to see if the stylesheet is the only thing missing.
Oct 13, 2013 at 10:29 AM
I have tried the same thing on a new and fresh install of orchard and bootstrap theme here: http://orchardtesting.azurewebsites.net/contact and it is the same, the form is no bootstrap styling - so it has something to do with the new bootstrap 3.

Also by looking at the source i see the stylesheet and everything, so how can i add the bootstrap form controls (http://getbootstrap.com/css/#forms) to my form at http://music-copyrights.azurewebsites.net/send-your-request ?

/Will.
Coordinator
Oct 13, 2013 at 11:46 PM
I don't understand. When I go to that address, the style sheet loads just fine.
Oct 14, 2013 at 8:27 AM
I have updated this page: http://music-copyrights.azurewebsites.net/send-your-request by adding "form-control" to input fields which gives me a bootstrap styling.

But if others have the same 'issue' the author of the orchard bootstrap theme, Philip Senechal, told me about the oForm module where you have total control of the html form within the admin area.

Sorry for not telling you about my changes Bertrand. But if you see here http://orchardtesting.azurewebsites.net/contact the form is the same with no styling even though bootstrap is in use.

in my case i built the form with the custom forms built in module and in the bootstrap theme/Scripts/Custom.js i added:

$(function () {
$("input[type=text]").addClass("form-control text");
$("input[type=email]").addClass("form-control email");
$("textarea").addClass("form-control area"); 
which works ok for me.

/WIll.
Dec 21, 2013 at 1:42 PM
Edited Dec 21, 2013 at 1:42 PM
Same problem, quite similar solution (actually I started with Will's snippet):
I just added a HTML Widget to the layer of my about page (with the custom form) which contains nothing but this script
<script type="text/javascript">
$(function(){
$("input[type=text]").addClass("form-control text");
$("input[type=email]").addClass("form-control email");
$("textarea").addClass("form-control area");
$(":submit").addClass("btn btn-success");
});
</script>
That's not a nice solution, but it works and doesn't require to change anything in the backend.
Coordinator
Jan 5, 2014 at 7:13 AM
What you can do instead is override Orchard.CustomForms/Views/Item/Create.cshtml in a Views/Orchard.CustomForms/Item/Create.cshtml under your theme. From there, you can add classes to the outer tag, include your own stylesheet, etc.
Jan 20, 2014 at 4:40 AM
I followed what you suggested marce155 and it works, but only when shape tracing is enabled. Seems that the jquery ref is removed when shape tracing is disabled. I tried adding it by putting this at the top of my layout.cshtml page in my theme but it didn't seem to include it.
    Script.Require("jQuery");
    Script.Require("jQueryUI");
Betrand- Could you be so kind as to elaborate a little more on what you are referring to? I created an identical path+file in my custom theme, copied code in from Orchard.CustomForms view, but couldn't seem to get anything to work. Could you point me to a sample or enlighten me in some small way to get me on the right track?

Thanks!
Mar 2, 2014 at 11:41 PM
I have the same issue but have created the following override files with the amended markup

Views\EditorTemplates\fields\Input.Edit.cshtml
Views\EditorTemplates\fields.Common.Text.Edit.cshtml

Which works great except for the submit button which is rendered in the Create.cshtml file.

@BertrandLeRoy overriding the Views/Orchard.CustomForms/Item/Create.cshtml path did not work for me is there an alternative to use for the Create.cshtml?