Viewing 20 posts - 1 through 20 (of 20 total)
  • Author
    Posts
  • November 15, 2017 at 12:29 am #876875
    mcraig77

    Ahoy, I have a form I’m trying to match to enfold. You can see the form here (private)

    Basically i’m trying to match the form to the styling on this page. I also need it to be adaptive to mobile like the sample on the second link.

    Please advise.

    November 15, 2017 at 5:27 am #876913
    John Torvik

    Hey mcraig77,

    I recommend you to use a form plugin to accomplish this. The Caldera form should help you.

    Best regards,
    John Torvik

    November 15, 2017 at 10:10 pm #877225
    mcraig77

    Hi john,

    This is a custom form. I need it styled. Enfold support has helped with this in the past. Please Advise on how to style it like Enfold forms.

    November 17, 2017 at 9:44 pm #878300
    Basilis

    Hi,

    We do not do so much custom CSS based on our support policy this days, as we have to handle a lot of tickets we are afraid.
    You can always try get the CSS from the old site you are referring to make it match.

    Best regards,
    Basilis

    November 17, 2017 at 9:49 pm #878302
    mcraig77

    Ahoy Basilis,

    This is the thread where I was last help https://kriesi.at/support/topic/contact-form-7-with-enfold-styles/. Unfortunately that form didn’t work and have to use the form on the current page now. Can you please help :) Going foreword I will make note that Enfold doesn’t help with that anymore. For the time being it would be great if you could help seeing I use your theme for all my web designs. I have all my clients purchase a license. The support is what makes enfold great. If that support is not provided I will have to choose a different theme.

    Please Advise,

    November 20, 2017 at 4:15 pm #879187
    Victoria

    Hi mcraig77,

    Please remove the center tag around the submit input
    Image 2017-11-20 at 16.13.18.png
    Here is what I’ve got so far

    
#newsletter fieldset .form_element {
    float: left;
}

#top #newsletter fieldset .form_element .text_input  {
  border-radius: 3px;
  padding: 11px 22px;
  font-size: 16px;
  border: none;
  width: 100%;
}

    Best regards,
    Victoria

    November 20, 2017 at 9:27 pm #879358
    mcraig77

    Great!

    I added that. There still seems to be a few bugs. Please Advise!

    November 23, 2017 at 12:43 am #880546
    Basilis

    Hi,

    Yes, we will be happy to advise, but can you please let us know what type of bugs?

    Thank you

    Best regards,
    Basilis

    November 23, 2017 at 2:59 am #880575
    mcraig77

    Ahoy,

    I need the button to line up like the enfold form and I would like the input box to NOT highlighted (outer glowed) once selected.

    PLease Advise

    November 26, 2017 at 6:05 pm #881945
    Victoria

    Hi mcraig77,

    Here is the code you can put in Enfold > General Styling > Quick Css,  if it does not work, put into themes/enfold/css/custom.css

    
:focus {
    outline:none;
}
input[type=submit] {
  margin: 1.25em 0 1.25em 10px;
  min-height: 40px;
}

    If you need further assistance please let us know.
    Best regards,
    Victoria

    December 7, 2017 at 1:26 am #885860
    mcraig77

    Thanks @victoria, The only remaining things I need is the form to be centered on desktop and the submit button wider with larger text to mach the enfold styles.

    Please Advise, that should be it after these things!!

    December 9, 2017 at 1:20 pm #886807
    Victoria

    Hi mcraig77,

    Here is the code you can put in Enfold > General Styling > Quick Css,  if it does not work, put into themes/enfold/css/custom.css

    
#newsletter fieldset input[type=submit] {
    width: 24%;
    margin-left: 1%;
    font-size: 16px;
    line-height: 16px;
    margin-top: 0.85em;
}

    If you need further assistance please let us know.

    Best regards,
    Victoria

    December 11, 2017 at 8:58 pm #887561
    mcraig77

    Almost. I don’t want the button to be that big, I wanted it to be the same size as the traditional enfold button. Here is a screenshot of what im trying to achieve on desktop. Mobile looks and adapts fine.

    December 13, 2017 at 5:47 pm #888482
    Victoria

    Hi mcraig77,

    You can just play with the width value and find the one that works for you :)

    Best regards,
    Victoria

    December 13, 2017 at 7:29 pm #888514
    mcraig77

    Ahoy @victoria

    The button looks good on desktop but on mobile it gets cut off, below is a screenshot. I couldn’t get the form centered on desktop. I don’t think the code you provided centers the form on the desktop version like originally asked.

    Here is the code i inserted

    #newsletter fieldset input[type=submit] {
    width: 10%;
    margin-left: 1%;
    font-size: 16px;
    line-height: 16px;
    margin-top: 0.85em;
}

    The code does adjust the button setting but on mobiel the button gets cut off. Like I mentioned before I cant get the whole form centered on desktop version

    Please Advise

    • This reply was modified 6 years, 4 months ago by mcraig77.
    December 14, 2017 at 2:34 pm #888892
    Victoria

    Hi mcraig77,

    So you need to have a media query for mobile and set the width value for the submit there too.
    The form was centered, when the submit was the size I gave you, the form was taking up the whole container and the container in centered.

    Best regards,
    Victoria

    December 14, 2017 at 8:38 pm #889081
    mcraig77

    @victoria

    Let me see what I can do and get back to you…

    • This reply was modified 6 years, 4 months ago by mcraig77.
    December 16, 2017 at 6:23 pm #889621
    Victoria

    Hi mcraig77,

    Have you got it working for you?

    Best regards,
    Victoria

    January 2, 2018 at 10:09 pm #892608
    mcraig77

    Yup, Thanks!

    January 4, 2018 at 11:32 pm #893471
    Basilis

    Hi,

    Glad we could help!
    Please take a moment to review our theme and show your support https://themeforest.net/downloads
    To know more about enfold features please check – http://kriesi.at/documentation/enfold/
    Thank you for using Enfold :)

    Best regards,
    Basilis

  • Author
    Posts
Viewing 20 posts - 1 through 20 (of 20 total)
  • The topic ‘Form Styling Help’ is closed to new replies.