New to the community? Start here

Ninja Form Help Needed

I am reading Ninja Forms here
http://docs.ninjaforms.com/customer/portal/articles/2045697-faq?b_id=9172#faq_style

Seems this article is just explaining the class ID and naming stuff for the form. Isn't there a better example I can follow? That article was written for advanced css folks it seems.

I am not looking for anything too in depth all I want to do is add border, border color, etc. around the form boxes, maybe play around with text, size, face, color. etc., and maybe some rounded edges for the form itself and a form color background.

Same for the form output and if possible also style the emails clients will receive.

Do you guys maybe have a really simple tutorial i can use for these purposes or know where I can go.

Thanks

  • Nithin

    Hi Dave,

    Hope you are doing good today. :slight_smile:

    Do you guys maybe have a really simple tutorial i can use for these purposes or know where I can go.

    Basically what you have to do is style according to the provided IDs/Class as shown in your FAQ link. For eg: As shown the doc, to change the font size of the label text description, the CSS would be:

    #ninja_forms_field_1_label {
     font-size: 15px;
}

    Could you please try the following tutorial, and check whether you are able to follow it:
    http://easywebdesigntutorials.com/styling-a-ninja-forms-contact-form/

    If you still find it difficult to follow, or have any doubts on moving forward, please do let us know, we would be happy to provide you with Custom CSS, if needed. I hope this helps. Have nice day. :slight_smile:

    Kind Regards,
    Nithin

  • Dave

    btw how do I make the width of all the boxes smaller so they do not spread out across the page?
    I will also like to change the height of each box.

    The css provided does not appear to have these options so I assume it is something I need to add.

    I also want to style the success message they get on the website after submitting the form where it says

    Form submission successful! Your email address is xxxxxx (where x's of course is their actual email address)

    Please check your spam folder if you did not receive an email from us.

    Thank You!

    Or maybe all this info is also at that link you sent. Sorry but I only asked due to my time limitations. If no reply I will check there when I have more time.

  • Nithin

    Hi Dave,

    Hope you are doing good today. :slight_smile:

    btw how do I make the width of all the boxes smaller so they do not spread out across the page? 

    .profile_pass-wrap input, .text-wrap.label-above input, .text-wrap.label-below input, .text-wrap.label-inside input, .textarea-wrap.label-above textarea, .textarea-wrap.label-below textarea, .textarea-wrap.label-inside textarea, .list-dropdown-wrap.label-above select, .list-dropdown-wrap.label-below select {
	width: 80%;
}

    Please try the following code, and increase/decrease the percentage value to change the width.

    I will also like to change the height of each box. 

    .text-wrap.label-above input {
	height: 30px;
}

    I also want to style the success message they get on the website after submitting the form where it says

    Since you haven't mentioned what to style, I'm sharing only the CSS classes where you could add your tweaks to it:

    .ninja-forms-response-msg {
//you code goes here
}

    You can add all these CSS, under the global theme CSS section, please do clear your cache in order to see the changes made. I hope this helps. Please let us know if you still need any further assistance. Have a nice day. :slight_smile:

    Kind Regards,
    Nithin

  • Dave

    I tried your code and upon refreshing the page the boxes started getting narrower but once the page reloaded completely they went back to their original sizes. It appears to me like a piece of code is missing.

    I am not a css expert but from observing the existing codes it appears I need to add a line just above that code that looks something like this.

    #ninja_forms_16 etc.

    Just not sure exactly how to implement it as it appears there is more to it.

    I deleted all cache and expired cache pages but still the same problem.

  • Nithin

    Hi Dave,

    Hope you are doing good today. :slight_smile:

    I tried your code and upon refreshing the page the boxes started getting narrower but once the page reloaded completely they went back to their original sizes.

    It should have worked, not sure what we are missing, unless I could check your website. It seems like the support access is disabled, please enable support access, and let us know once you grant access, so that we could give a closer look.

    Have a nice weekend. :slight_smile:

    Kind Regards,
    Nithin

  • Kasia Swiderska

    Hello Dave,

    I tried your code and upon refreshing the page the boxes started getting narrower but once the page reloaded completely they went back to their original sizes. It appears to me like a piece of code is missing.

    I cannot replicate this issue on your site. Fields of form are very narrow and they don't change after submitting form or refreshing page (I've done that few times). They always look the same

    What am I missing here? Please advise.

    kind regards,
    Kasia

  • Dave

    Just pasting my post from above to bring you up do date.

    btw how do I make the width of all the boxes smaller so they do not spread out across the page?
    I will also like to change the height of each box.

    The css provided does not appear to have these options so I assume it is something I need to add.

    I also want to style the success message they get on the website after submitting the form where it says

    Form submission successful! Your email address is xxxxxx (where x's of course is their actual email address)

    Please check your spam folder if you did not receive an email from us.

    Thank You!

    Or maybe all this info is also at that link you sent. Sorry but I only asked due to my time limitations. If no reply I will check there when I have more time.

  • Kasia Swiderska

    Hello Dave,

    I'm sorry! I misunderstood last issue - I thought its about the height of the fields and that you want them this way (that must be lack of coffee today). I changed styles on your site 

    .profile_pass-wrap input, .text-wrap.label-above input, .text-wrap.label-below input, .text-wrap.label-inside input, .textarea-wrap.label-above textarea, .textarea-wrap.label-below textarea, .textarea-wrap.label-inside textarea, .list-dropdown-wrap.label-above select, .list-dropdown-wrap.label-below select, .span-wrap.label-above input {
	width: 50% !important;

}
.profile_pass-wrap input, .text-wrap.label-above input, .text-wrap.label-below input, .text-wrap.label-inside input, .list-dropdown-wrap.label-above select, .list-dropdown-wrap.label-below select
{
 height: 35px;
}

    to those and looks like now they are working. Can you check?

    kind regards,
    Kasia

  • Dave

    Strike that last comment it appears there was some slowness issues. On my phone it looks ok now.

    I also want to add a nice color background and style the Submit button can I get some assistance on that as well?

    I had also asked about this

    I also want to style the success message they get on the website after submitting the form. I rather that be in a different font color and maybe font face as well.

    I know I can follow Ninja Forms Tutorial but as I mentioned early on in his project i am pressed for time. Midweek i want to show the website to the client. Following that it is only seven days to publish the website and i still have not worked on the slowness yet. The website is really too slow right now. Then still I need to work on other areas of the website.

  • Alex Stine

    Hello Dave
    Hope you are well!

    Could you please try this CSS code?

    This CSS should style the Submit button to look a bit nicer.

    #nf_submit_16 .ninja-forms-field {
background-color: #000000;
color: #ffffff;
font-size: 30px;
font-weight: bold;
padding: 12px;
text-align: center;
width: 30%;
}
#nf_submit_16 .ninja-forms-field:hover {
background-color: blue;
color: #ffffff;
}

    This CSS should style the message.

    #nf_processing_16 {
color: #000000;
/*Other rules*/
}

    Please let us know if this works for you.

    Cheers,
    Alex :smiley:

  • Nithin

    Hi Dave,

    Hope you are doing good today. :slight_smile:

    Please try the following code, and check whether it works:

    .ninja-forms-response-msg {
    background: #eee;
    border-radius: 3px;
    margin-bottom: 40px;
    padding: 30px 30px 24px
}

.ninja-forms-response-msg p {
    color: black;
}

    This should give a grey background when there's a successful message. Please let us know if you still need any further assistance. Have a nice day. :slight_smile:

    Kind Regards,
    Nithin

  • Nithin

    Hi Dave,

    The problem is the gray background been seen even before they fill out the form.

    Thanks for sharing the screenshot, I could notice that too now, it seems like the form displays an invisible success message in the front end, and when when we style it, it gets displayed.

    .ninja-forms-response-msg {
    background: #eee;
    border-radius: 3px;
    margin-bottom: 40px;
}

    Please remove the previous code for ninja-forms-response-msg, and replace it with the above one.

    And then add this additional, CSS too:

    #ninja_forms_form_16_response_msg > p:nth-child(2), #ninja_forms_form_16_response_msg > p:nth-child(3), #ninja_forms_form_16_response_msg > p:nth-child(4) {
	padding: 10px;
}

    Please check whether it works, and let us know if you still need any further assistance. Have a nice day. :slight_smile:

    Kind Regards,
    Nithin

Thank NAME, for their help.

1 Point
5 Points
15 Points
Other

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.