Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • #1124209

    Hi,

    I need to change the contact form a little more but do not achieve what I want..

    1)
    I would like to use the same font styling from the placeholder of the fields for the input of the fields (the text, the customer types in).

    2)
    The clickbox for the data protection acceptance should be in front of the sentence and not above.

    3)
    The submit button should be white with orange font when inactive, and the way it is now when hovering.

    Thanks for your great support, have a nice weekend!

    #1124436

    Hey Carolin,
    Sorry for the late reply, I have taken a look at your contact form, but the placeholder font and the actual font seem the same for me, and the checkbox is in front of the sentence, please advise.
    Please see the screenshot in Private Content area.
    To adjust the button, Please try this code in the General Styling > Quick CSS field or in the WordPress > Customize > Additional CSS field:

    #top.home .av-light-form .button {
        color: #C4673B !important; 
        background-color: #fff !important; 
    }
    #top.home .av-light-form .button:hover {
        color: #fff !important; 
        background-color: #C4673B !important; 
    }

    Best regards,
    Mike

    #1124693

    Hi Mike,

    thank you for your reply. I checked in another browser and saw what you mean. Strangely, I see the placeholder with the correct font in Chrome but not in Firefox.
    Maybe I did something wrong?

    These are the modification in quick css that I am using now to achieve:
    1) Placeholder font Gilroy Bold, 16pt
    2) Input font Gilroy Bold, 16pt + line-height 26pt
    3) Checkbox data security sentence. font Gilroy-semibold, 16pt, line-height 26pt with checkbox in front of the sentence (right now it is in the line above) with margin 30px above and below the sentence to the boxes above and below.

    ::-webkit-input-placeholder
    {
    font-family: Gilroy-Bold;
    font-size: 16pt;
    }

    .avia_ajax_form input
    {
    font-family: Gilroy-Bold;
    font-size: 16pt;
    line-height: 26pt;
    }

    .input_checkbox_label
    {
    font-family: Gilroy-Semibold;
    font-weight: normal !important;
    font-size: 16pt !important;
    line-height: 26pt !important;
    margin-top: 30px !important;
    margin-bottom: 30px !important;
    }

    #1124694

    Your solution for the button went fine, thank you!

    #1124864

    Hi bm_cw,

    Glad you got it working for you! :)

    If you need further assistance please let us know.

    Best regards,
    Victoria

    #1125028

    Hi Victoria,

    ikf you read above, this subject has only been solved partly, I still have trouble with the three points listef above?
    The only think resolved by now is the color of the button!

    Thanks
    Carolin

    #1125132

    Hi again,

    I resolved point 1) by myself with the help of another of your posts by adding

    #top .input-text, #top input[type=”text”], #top input[type=”input”], #top input[type=”password”], #top input[type=”email”], #top input[type=”number”], #top input[type=”url”], #top input[type=”tel”], #top input[type=”search”], #top input[type=”submit”], #top textarea, #top select{
    font-family: Gilroy-Bold;
    font-size: 16pt;
    line-height: 26pt;
    }

    Now I only need help with
    2)
    The clickbox for the data protection acceptance should be in front of the sentence and not above.

    Thanks!

    • This reply was modified 5 years, 4 months ago by bm_cw.
    #1125148

    .. I’ve just checked: on firefox, the formatting of placeholder and input fonts doesn’t seem to work?!

    #1125224

    Hi,
    Sorry for the late reply, to correct the checkbox please try this css:

    #top.home .av_form_privacy_check {
    	float: none !important;
    }

    For your placeholders and input text please disable your Fast Velocity Minify plugin and clear your Firefox cache and check.
    It also seems that you do have the ::-webkit-input-placeholder for the Chrome browser, but I don’t see the ::-moz-placeholder that Firefox uses, please try adding this:

    ::-moz-placeholder {
      font-family: Gilroy-Bold !important; 
      font-size: 16pt !important;
    }

    Are you adding the css to the Quick CSS or to your child theme stylesheet?
    Please try copying your custom css and pasting it in the WordPress > Customize > Additional CSS to see if you have any errors such as a missing bracket. The errors will show with a red “x”
    If this doesn’t help, please include an admin login in the private content area so we can be of more assistance.

    Best regards,
    Mike

    #1125444

    Hi Mike,
    thanks for your help. I did everything your suggested concerning the placeholder, added the firefox code, cleared the FF browser cache, and it now looks fine!

    Concerning the checkbox,: it IS now in front of the sentence but it doesn’t quite look nice because it is not vertically centered in front of the line but too high.
    Can you see it?
    I also lost the 30px margin above and belove the part with the checkbox.
    Here is the code that I currently have in quick css. Do you generally recommend to cut and paste it into the custom.css of the child theme or in the WordPress Additional Css box that you told me about?

    .input_checkbox_label
    {
    font-family: Gilroy-Semibold;
    font-weight: normal !important;
    font-size: 16pt !important;
    line-height: 26pt !important;
    margin-top: 30px !important;
    margin-bottom: 30px !important;
    }

    #top.home .av_form_privacy_check {
    float: none !important;
    }

    #1126092

    Hi,
    Sorry for the late reply, for the checkbox please try this css:

    #top.home .avia_ajax_form input#avia_5_1[type="checkbox"] {
    	margin-top: 10px !important; 
    }

    For your checkbox label, I see your top and bottom 30px margin, but the top margin is overlapping the field above almost as if “position: absolute;” or section max-height is being applied, but I didn’t find it in your css.
    Nonetheless, this css will add the top 30px to the checkbox label:

    #top.home .avia_ajax_form p#element_avia_3_1 {
        margin-bottom: 30px !important; 	
    }

    After adding these please clear your browser cache and any cache plugin, and check.

    About where to add the css, the child theme style.css is typically the preferred place most people like to use, and that is fine, but, because the performance setting for css merging the merged file is not updated until the theme settings are saved. So if you are testing css and checking the site it may not show for you. To avoid this happen please go to the theme settings each time and use the blue button at the top “Save all changes”.
    Now if you are testing a lot of css while building your site, this extra step may be a pain, so using the Quick CSS option in the theme settings would be easier because you have to use the same button to save the Quick CSS.
    Sometimes if you are still having issues, perhaps from caching or css specificity conflicts or a missing bracket from an earlier rule, testing or using the “WordPress > Customize > Additional CSS” is good because it has the highest priority.
    After you are done with your site you can move all of your css to the child theme stylesheet, save your theme settings, and clear your site cache without issue.

    Best regards,
    Mike

    #1127518

    Thanks for your fantastic support, Mike!

    #1127522

    Hi,
    Glad we were able to help, we will close this now. Thank you for using Enfold.

    For your information, you can take a look at Enfold documentation here
    For any other questions or issues, feel free to start new threads in the Enfold forum and we will gladly try to help you :)

    Best regards,
    Mike

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