Home Forums Air WordPress Theme Contact form styling

Viewing 19 posts - 1 through 19 (of 19 total)
  • Author
    Posts
  • #23792
    applemint
    Participant
    Purchased
    Supported

    Hi,
    I have Air WordPress theme and installed Contact Form 7 plugin as recommended.
    How can I make the contact form look like the example in the documentation of my theme?
    https://doc.seatheme.net/static/air/#page_builder
    I managed to get some of it, but not all.
    Thanks.

    #23801
    SeaTheme
    Keymaster
    Purchased
    Expired

    Hi,

    Because the default format is with the label(input name), to move the name into the box:

    1. Please remove the label, add a placeholder for each input box in the contact form 7 editing window:

    <label>[text* your-name placeholder "Name"]</label>
    
    <label>[email* your-email placeholder "Mail"]</label>
    
    <label>[text* your-subject placeholder "Subject"]</label>
    
    <label>[textarea your-message placeholder "Message"]</label>
    
    [submit "Submit"]

    screenshot: https://www.dropbox.com/s/zvpm4ib6y0bergy/qq20210206-140403.jpg?dl=0

    2. Please paste the custom CSS code to “Appearance > Customize: Additional CSS” to adjust the input spacing:

    .moudle input {
        margin-bottom: 20px;
    }

    Regards!

    SeaTheme – SeaTheme.netTwitterFacebook

    #23806
    applemint
    Participant
    Purchased
    Supported

    Thank you.

    2. Spacing isn’t working (even when correcting the little typo above ‘module’ instead of ‘moudle’)

    3. Is the following code okay for styling the field boxes (like the example in your documentation)? It first worked, and then all of a sudden it didn’t work anymore.

    input[type="text""],
    input[type="email"],
    textarea
    {
        background-color: #efefef;
        color: #000;
        width: 50%;
    		border: none;
    }
    
    input[type="submit"]
    {
    		background-color: #000;
    		color: #fff;
    		border: none;
    }
    #23807
    SeaTheme
    Keymaster
    Purchased
    Expired

    Hi,

    Please try to update the CSS:

    .moudle input {
        margin-bottom: 20px;
    }
     .moudle input[type="text"],
     .moudle input[type="email"],
     .moudle textarea
    {
        background-color: #efefef;
        color: #000; 
    		border: 1px solid #dcdcdc;
    }
    
     .moudle input[type="submit"]
    {
    		background-color: #000;
    		color: #fff;
    		border: none;
    	border-radius:2px;
    }

    I need to check your webpage if it doesn’t work.

    Regards

    #23811
    applemint
    Participant
    Purchased
    Supported

    1. Thank you. Everything works, except the spacing between input boxes. I cannot show webpage yet, since I am working on local server. Will give you link when it’s online.

    2. Could you also give code to style buttons from pagebuilder in same color (black background, white text) as submit button from contact form? What class is it in? Thanks.

    #23812
    SeaTheme
    Keymaster
    Purchased
    Expired

    Hi,

    1, ok
    2, I have pasted the CSS in fact, submit button part is:

     .moudle input[type="submit"]
    {
    		background-color: #000;
    		color: #fff;
    		border: none;
    	border-radius:2px;
    }

    Regards

    #23814
    applemint
    Participant
    Purchased
    Supported

    Hi,
    I’m afraid my question wasn’t clear. I would like to apply the same styling of this submit button to other buttons on the site not part of contact form (buttons that are inserted with the Page Builder). What is the class for those buttons so that the same colors can be applied?
    Thanks

    #23815
    SeaTheme
    Keymaster
    Purchased
    Expired

    Hi,

    .moudle .wpcf7 input[type="submit"]

    Regards

    #23819
    applemint
    Participant
    Purchased
    Supported

    Hi,
    I understand .moudle .wpcf7 input[type="submit"] is the class for the button in the contact page. I am looking for the class or ID to style other buttons on the website too. Page Builder has a module to insert buttons, but the styling is limited.
    Thank you

    #23820
    SeaTheme
    Keymaster
    Purchased
    Expired

    The class will affect other buttons in the builder:
    .moudle input[type="submit"]
    .btn-mod-wrap .ux-btn
    .moudle .ux-btn
    Please let me know what module you use if it doesn’t work.

    #23839
    applemint
    Participant
    Purchased
    Supported

    I have a button made with the button module. The module is in a General Wrap (1/3 size).
    When I use second and third class as you suggest, the text and border colors show up, but background color (other than white) does not.
    Strangely enough, when I set a styling for :hover, background color does show.

    #23846
    SeaTheme
    Keymaster
    Purchased
    Expired

    Hi,

    The CSS should work for normal and hover:

     .moudle .btn-mod-wrap .ux-btn { 
        border-color: #ccc;
        color: #ccc;
        background-color: #eee;
    }
     .moudle .btn-mod-wrap .ux-btn:hover { 
        border-color: #eee;
        color: #333;
        background-color: #ccc;
    }
    #23893
    applemint
    Participant
    Purchased
    Supported

    Thank you, the above code is working now. I found the error.
    Except for font-size that I added to the code is not working. The font size of button stays at the default font-size chosen for posts and pages. Any suggestions?

    .moudle .btn-mod-wrap .ux-btn { 
    	background-color: #000;
    	color: #fff;
    	border: 1px solid #000;
    	border-radius:2px;
    	font-size: 16px;
    }
    .moudle .btn-mod-wrap .ux-btn:hover { 
      background-color: #fff;
      color: #000;
    	border: 1px solid #000;
    	border-radius:2px;
    	font-size: 16px;
    }

    Regards

    #23896
    SeaTheme
    Keymaster
    Purchased
    Expired

    Hi,

    I need to check the lived webpage.

    Regards

    #23908
    applemint
    Participant
    Purchased
    Supported
    This reply has been marked as private.
    #23909
    SeaTheme
    Keymaster
    Purchased
    Expired

    Hi, thanks

    Please define the font size by:

    .moudle .btn-mod-wrap .ux-btn .ux-btn-text {
     font-size: 16px;
    }

    Regards

    #23911
    applemint
    Participant
    Purchased
    Supported

    okay, working now. Thank you!

    #23912
    applemint
    Participant
    Purchased
    Supported

    One more question regarding contact form. How to style the messages that appear below the contact form, after submitting? (Like the ones that indicate the message was sent successfully or not, etcetera …)
    I would like to style the border box and font-size.

    Thank you

    #23921
    SeaTheme
    Keymaster
    Purchased
    Expired
Viewing 19 posts - 1 through 19 (of 19 total)
  • You must be logged in to reply to this topic.

Join Newsletter(FREE)

Subscribe to our newsletter to receive news & updates. We promise to not spam you, super promise!