Tagged: , , ,

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #375170

    Where can I adjust the style or css of the contact form?
    1. Put labels inside the input boxes
    2. Adjust the white space between put boxes
    3. Make the input boxes smaller
    Thanks.

    #375172

    Hey Harris!

    1- Please add following code to Functions.php file in Appearance > Editor

    function add_custom_placeholder(){
    ?>
    <script>
    jQuery(window).load(function(){
    jQuery('input#avia_name_1').attr('placeholder', 'Name *');
    jQuery('input#avia_e-mail_1').attr('placeholder', 'E-mail *');
    jQuery('input#avia_phone_1').attr('placeholder','Phone');
    jQuery('textarea#avia_message_1').attr('placeholder', 'Message *');
    });
    </script>
    <?php
    }
    add_action('wp_footer', 'add_custom_placeholder');

    2- Please add following code to Quick CSS in Enfold theme options under General Styling tab

    fieldset p {
    margin-top: 0;
    }
    #top .avia_ajax_form .text_input, #top .avia_ajax_form .select, #top .avia_ajax_form .text_area {
    width: 60%; 
    }

    Cheers!
    Yigit

    #406801

    Hey It’s very cool of you to provide such detailed support. I am trying to make much more compact contact forms. This php does put placeholder text inside the box but it leaves the Form Element Label visible and taking up space above the box. How can I remove the Label outside the box?

    Also the code you provided does not seem to change the shortcode that I am trying to use in a text widget to make a form for footer. Am I missing some better way to do that?

    BTW how can I make the submit bottom small and style font color?

    http://www.edswaterproofing.com/eds_wp_new_site_here/

    Damn, thanks a lot.

    #407083

    Hey!

    Please add following code to Quick CSS

    fieldset label {
      display: none!important;
    }
    .modified_width .button {
      width: 70%;
     }
    .main_color input[type='submit'] {
      color: orange;
    }

    Best regards,
    Yigit

    #428983

    Thanks for the support on this. Like rdswestnet said the field labels are still on the top not in the inside fields. I used the code for field set none and they fields disappear not the option I was looking for.

    • This reply was modified 9 years ago by harris.
    #428995

    Hey!

    Do you mind creating a temporary admin login and posting it here privately so we can look into it? Code works fine on my local installation :)

    Best regards,
    Yigit

    #429099

    Hey guys if it helps I put my css and php mods below. The result is on this page: http://www.edswaterproofing.com/eds_wp_new_site_here/ It’s exactly what I was trying to accomplish.

    fieldset p {
    margin-top: 0;
    }
    #top .avia_ajax_form .text_input, #top .avia_ajax_form .select, #top .avia_ajax_form .text_area {
    width: 90%;
    }
    fieldset label {
    display: none!important;
    }
    .modified_width .button {
    width: 50%;
    height:90%;
    }
    .main_color input[type=’submit’] {
    color: white;
    }
    /*above styles contact form along with code added to functions.php*/

    function add_custom_placeholder(){
    ?>
    <script>
    jQuery(window).load(function(){
    jQuery(‘input#avia_name_1’).attr(‘placeholder’, ‘Name *’);
    jQuery(‘input#avia_e-mail_1’).attr(‘placeholder’, ‘E-mail *’);
    jQuery(‘input#avia_phone_1’).attr(‘placeholder’,’Phone’);
    jQuery(‘textarea#avia_message_1’).attr(‘placeholder’, ‘Message *’);
    });
    </script>
    <?php
    }
    add_action(‘wp_footer’, ‘add_custom_placeholder’);

    // above added to functions php to style contact form

    #429792

    Hey!

    glad you did it! and thanks a lot for sharing.

    Let us know when you have some more questions concerning the theme.

    Regards,
    Andy

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