NEED HELP STYLING FORM.. BANGING HEAD AGAINST WALL AND IT HURTS

I am trying to get the form located here
http://mindfulsci.staging.wpengine.com/gratis-reto-de-mindfulness/
to look like the form I have located here
https://www.mindfulscience.es/gratis-reto-de-mindfulness/

You can see I have made quite the mess and cant seem to get this going the right way.

Please help

Cheers,

EJ

  • Predrag Dubajic

    Hey EJ,

    Hope you're doing well today :slight_smile:

    I had a look at your form but I must say that I'm quite confused here and I was unable to determine where the CSS is coming from.

    I see that you have custom CSS plugin which different styles added, can you try disabling those styles and see if that brings back default form look, from there it would be much easier writing new styles to make it look as on your other site.

    Let us know once this is done so we can have another look at this.

    Best regards,
    Predrag

  • Adam Czajczyk

    Hello ME Admin!

    I checked the site and I think this code would make a good start. Add it to your site please and let me know if that's about what you were going to achieve.

    #gform_wrapper_2 {
      display:block;
      overflow:hidden;
      max-width:650px;
      text-align:left;
      background:#EAEAEA;
      margin:0 auto;
      padding:30px;
      -webkit-border-radius: 3px 3px 3px 3px;
      border-radius: 3px 3px 3px 3px;
    }
    
    #gform_2 {
      background:#FCFCFC;
      padding:20px;
      padding-top:0;
      font-family:"Raleway", Helvetica, Arial, Lucida;
      -webkit-border-radius: 3px 3px 3px 3px;
      border-radius: 3px 3px 3px 3px;
      line-height:1;
    }
    
    #gform_2 label {
      text-align:left;
      font-size:18px;
      font-weight:500;
      clear:both;
    }
    
    #gform_2 li div {
      width:100%;
      overflow:hidden;
      float:left;
      font-size:14px;
      text-align:left;
    }
    
    #gform_2 li div input {
      margin:0;
      padding:10px;
      float:left;
    }
    
    #gform_2 li {
      width:100%;
      text-align:left;
      overflow:hidden;
      clear:both;
    }
    
    #gform_2 div.ginput_container span {
      float:left;
      clear:both;
    }
    
    #gform_2 .gform_button {
      background:#F39364;
      width:100%;
      padding:10px;
      font-family:"Raleway", Helvetica, Arial, Lucida;
      font-weight:700;
      color:#FCFCFC;
      font-size:18px;
      border:0;
      -webkit-border-radius: 3px 3px 3px 3px;
      border-radius: 3px 3px 3px 3px;
    }

    I realize there are still some "gaps and spaces" that could be fixed so after you apply the code, let me know please if we're heading in a right direction and also please confirm whether this form is currently complete as I'm not sure of it (I don't quite understand that because of the language :slight_smile: )

    Best regards,
    Adam

  • ME Admin

    Hi ADAM! Hope you are well today, thanks for your time on this

    Definitely headed in the right direction!!! This looks great.. like you mentioned the spacing needs some adjustment.. but wow nice first attempt.. I would be here until tomorrow trying to get this far.. thank you

    The field order is this in English, hope this helps.. its confusing for me too :slight_smile:

    Email
    text to describe the field to the users
    FIELD

    First Name (not sure how to get rid of the sub label Nombre here..
    text to describe the field to the users
    FIELD
    (sub label is here, but not needed)

    Password (dont need this, but not sure how to remove it, Contraseña*)

    Enter Password
    text to describe the field to the users
    FIELD

    Confirm Password
    text to describe the field to the users
    FIELD

  • Adam Czajczyk

    Hello EJ!

    Thank you for confirmation and additional explanation.

    Let me start with the form. Sub labels such as "Nobre" that you'd like to remove area added automatically by Gravity Forms when you select what field should be displayed. You can either customize that sub-label (by editing form in back-end) or we can hide it with CSS (included in code below).

    Then there's "Password" (Contraseña) text. This is a title of the field which is also set in form settings. It could be removed from there but then it will still leave the red * as the field is set as required. Therefore I'm removing it with CSS too. Please add this code to the site in addition to the one I already share and let me know how that goes :slight_smile:

    /* remove NOMBRE label */
    #input_2_1 label {display:none;}
    /* remove Contraseña label */
    #field_2_3 .gfield_label {display:none;}
    
    /* remvoe gaps/spaces */
    #gform_2 .ginput_container {line-height:0;margin-top:0;width:100%;}
    #gform_2 li {line-height:1;}
    
    /* full width inputs */
    #gform_2 input,
    #gform_2 .ginput_left,
    #gform_2 .ginput_right
    {width:100%;}
    #gform_2 li div span {padding-right:0;}
    
    #gform_fields_2 {line-height:0;}
    #gform_2 .gform_footer {padding:0;margin:0;}

    Best regards,
    Adam

  • Predrag Dubajic

    Hi EJ,

    Could you try with this CSS code:

    #gform_2 .gfield_description {
        display: none;
    }
    
    #gform_2 .ginput_container.ginput_complex,
    #gform_2 .ginput_container_email,
    #gform_2 .ginput_container_name,
    #gform_2 .gfield,
    #gform_2 .ginput_complex {
        margin-top: 0;
    }
    
    #gform_2 #field_2_1 .gfield_label_before_complex {
        margin-top: 5px;
    }

    Let us know how it goes :slight_smile:

    Best regards,
    Predrag

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.