Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • June 21, 2017 at 4:44 pm #811035
    yingyang

    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>
    June 21, 2017 at 7:42 pm #811123
    Victoria

    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

    June 21, 2017 at 7:44 pm #811125
    yingyang

    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

    June 21, 2017 at 8:28 pm #811147
    Victoria

    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

    June 21, 2017 at 8:36 pm #811154
    yingyang

    here it is thanks

    June 22, 2017 at 4:00 pm #811627
    Victoria

    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

    June 22, 2017 at 4:41 pm #811656
    yingyang

    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 7 years, 6 months ago by yingyang.
    June 22, 2017 at 7:41 pm #811784
    Victoria

    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

    June 23, 2017 at 1:59 am #811906
    yingyang

    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

    June 23, 2017 at 7:32 am #811988
    John Torvik

    Hi,

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

    Best regards,
    John Torvik

    June 27, 2017 at 11:47 pm #813643
    yingyang

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

    June 29, 2017 at 10:26 pm #814713
    Basilis

    Hi,

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

    Best regards,
    Basilis

    June 29, 2017 at 10:28 pm #814715
    yingyang

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

    June 30, 2017 at 3:52 pm #815011
    Victoria

    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

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