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

    Hi,

    Could you helpme code a contact form 7 form to have two fields (email+where did you hear about us) on one row instead of showing them on one row each? see private link for current look, the goal is have them look like that

    [Your Email] [Where did you hear about us?]

    instead of like that
    [Your Email]
    [Where did you hear about us?]

    Here is the current code

    <div class=”flex_column av_one_third first”>[email your-email default:user_email class:text_input placeholder "Your Email"]</div>
    
    <div class=”flex_column av_one_third second”>[select* where-hear  class:select first_as_label "Where did you hear about us?" "Ninjatrader Ecosystem" "Google" "Facebook" "Twitter" "Ticker.TV" "Youtube" "Friend/Family" "Facebook" "Other"]</div>
    
    <div class=”flex_column av_one_third third”>[recaptcha theme:dark]<div>
    
    <p>[submit "Notify Me!"]</p>
    #811123

    Hey kilimats,

    There are some weird double quotes rendered there, they are considered by the browser to be part of the class and so some css might be not applied. (screenshot in private)
    There is not enough space there to have two fields on one line. Do you really want to put them both there.

    Best regards,
    Victoria

    #811125

    We would relocate the form after changing to one row to have more space, can you help me with the code? Tried a few ideas but nothing worked

    #811147

    Hi kilimats,

    Can you give us temporary admin access to your website in the private content box below, so that we can have a closer look?
    Need to see why it gets those weird double quotes.
    Best regards,
    Victoria

    #811154

    here it is thanks

    #811627

    Hi kilimats,

    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

    
    div.wpcf7 {
      min-height: 200px;
    }
    div.wpcf7 .flex_column.av_one_third.third {
      clear: left;
      margin-left: 0px;
    }
    

    If you need further assistance please let us know.

    Best regards,
    Victoria

    #811656

    thank you! its getting there for sure. did you already apply the fix somewhere because i dont see the code in the quick CSS box but its already on one row?

    How can i keep everything on one row including the NOTIFY ME? also how can i reduce the spacing between the two field? its too far apart currently

    Is it not possible to do within the contact form 7 code page? why does enfold theme need to be customized ?

    • This reply was modified 6 years, 9 months ago by yingyang.
    #811784

    Hi kilimats,

    It does not need to be customized in case you are happy with everything is there out of the box. However the theme is just building blocks that can be customized to fulfill anyones wildest desires :)

    It will be in one row if you don’t add this

    
    div.wpcf7 .flex_column.av_one_third.third {
      clear: left;
      margin-left: 0px;
    }
    

    Best regards,
    Victoria

    #811906

    SOrry, confused where you made the changes, can you explain what youve done so far? and how i can revert it. Need to test different ideas thanks

    #811988

    Hi,

    Victoria added the code at the Enfold > General Styling > Quick CSS

    Best regards,
    John Torvik

    #813643

    I do not see the change see made there, but the form still show up in 1 row, please advise how i can revert

    #814713

    Hi,

    I am sorry but do you want Victoria to remove the changes she added?

    Best regards,
    Basilis

    #814715

    I need to understand where the change was made so i can add/remove it to tweak the look thanks

    #815011

    Hi kilimats,

    I did not make changes in Quick css, I fixed the double quotes

     these ”flex_column av_one_third first” to these "flex_column av_one_third first"

    Nothing else. What do you need to change?

    Best regards,
    Victoria

Viewing 14 posts - 1 through 14 (of 14 total)
  • You must be logged in to reply to this topic.