Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • October 19, 2016 at 4:35 pm #701419
    yingyang

    Hi,

    I used this great idea posted here to style my contact form 7 form: https://kriesi.at/support/topic/styling-contact-form-7-as-enfold-contact-form/

    WOrked great, i just need to make the field name inline (show up in the field instead of above)

    How is this achieved?

    October 19, 2016 at 4:58 pm #701432
    Vinay

    Hey kilimats,

    Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child themes style.css file:

    			  #top.page-id-1396 .avia_ajax_form .text_input, 
#top.page-id-1396 .avia_ajax_form .select, 
#top.page-id-1396 .avia_ajax_form .text_area {
    margin-top: -20px;
    z-index: -1!important;
    position: relative;
    width: 100%;
    min-width: 80vw;
    right: 0;
    left: -20px;
    top:-15px;
}

			  #top.page-id-1396 .avia_ajax_form .text_input, 
#top.page-id-1396 .avia_ajax_form .select{
	position:absolute;
}

.responsive .page-id-1396 .avia_ajax_form .form_element {
    padding: 15px;
}

    Best regards,
    Vinay

    October 19, 2016 at 5:18 pm #701437
    yingyang

    looks great ! sorry we made some change since we posted and looks like our ID changed? how can i adapt your code now?

    October 21, 2016 at 5:03 am #702151
    Vinay

    Hi,

    Hey sorry just realised there are other ways to set this up.
    It’s very easy to set up the inline lable or placeholder text please check
    http://contactform7.com/faq/can-i-add-text-labels-to-input-fields/
    http://contactform7.com/setting-placeholder-text/
    Please google “contact form 7 inline label” to get more results.

    Best regards,
    Vinay

    • This reply was modified 8 years, 2 months ago by Vinay.
    October 21, 2016 at 9:00 am #702217
    yingyang

    U rock thanks !

  • Author
    Posts
Viewing 5 posts - 1 through 5 (of 5 total)
  • The topic ‘Inline contact form 7’ is closed to new replies.