Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #330243

    I am trying to create a very thin contact bar with just one field. I would like to be able to have the submit button in line with the field (to the right of the field) and to be able to show the title of the field within the field instead of above.

    Thank You.

    #330811

    Hey D5WDesignGroup!

    Can you firstly create the contact form and then post the link to your page where we can see the element so we can provide you accurate custom CSS code?

    Cheers!
    Yigit

    #330971
    This reply has been marked as private.
    #331112
    This reply has been marked as private.
    #331861
    This reply has been marked as private.
    #331878

    Hi!

    Try with this code (Quick CSS):

    .avia_ajax_form .first_form {
        clear: none;
        width: 48%;
        margin-right: 2%;
    }
    .avia_ajax_form p:last-child {
        clear: none;
        float: left;
        width: 50%;
        position: relative;
        top: 24px;
    }

    I’d suggest using a custom class in this case so it doesn’t affect other forms in the page.

    Regards,
    Josue

    • This reply was modified 9 years, 5 months ago by Josue.
    #331899

    Thank you, that worked to place the Submit button next to the form field but how do I move the field title inside of the field instead of above?

    #331927

    Hi!

    You’d need to edit /enfold/framework/php/class-form-generator.php, look for this lines:

    			$form_el = ' <input name="'.$id.'" class="text_input '.$element_class.'" type="'.$type.'" id="'.$id.'" value="'.$value.'"/>';
    			$label = '<label for="'.$id.'">'.$element['label'].$required.'</label>';
    

    Change them to:

    			$form_el = ' <input name="'.$id.'" class="text_input '.$element_class.'" type="'.$type.'" id="'.$id.'" value="'.$value.'" placeholder="'.$element['label'].'" />';
    			//$label = '<label for="'.$id.'">'.$element['label'].$required.'</label>';
    

    Best regards,
    Josue

    #331929

    That worked but it has thrown off the alignment of the form field and the submit button.

    #331938

    It’s fixed now, i edited your Quick CSS.

    Cheers!
    Josue

    #331945

    Thank you very much! When you get a chance can you take a look at that same page. I have added another form field toward the top of the page using Ninja Forms. It may allow us to customize the fields more easily but there appears to be an issue removing the additional space below the form elements. Any tips on how to get the spacing closer to the way it is in the lower Color Section?

    #331957

    Color sections get a minimum height of 100px by default, i’d suggest setting a custom ID to that color section and adding this to Quick CSS:

    #section {
        min-height: initial !important;
    }

    Regards,
    Josue

    #331963

    Thank You.

    #331967

    You are welcome, glad to help :)

    Regards,
    Josue

Viewing 14 posts - 1 through 14 (of 14 total)
  • The topic ‘Contact Form Styling’ is closed to new replies.