Submit Button Problems

  • Resolved cleslie577

    (@cleslie577)


    9 years, 3 months ago

    Hello,

    I’m having problems with my submit button for my custom form. On the “input” custom element settings, I set the background to white so that the text areas would be white background where users text. But this also changed my button settings to not appear on the page and be white. I know this because looking at the css of the page, it shows the button’s bg is white because of the input settings. I tried to change these settings to be clear instead of white but that won’t work. Also, the button has a shadow that I would like to get rid of. How can I stop this button from getting its style from the input CSS settings?

    You can view the form at http://kellilesliephotography.com/inquire/

    The submit button doesn’t appear and has that drop-shadow that I would like to get rid of.

    Thanks so much!
    Cody

Viewing 4 replies - 1 through 4 (of 4 total)
  • Plugin Author Lehel Szilard Marosi

    (@mlehelsz)

    9 years, 3 months ago

    Greetings,

    You can setup a different layout for the submit button, via the setup page of a custom style.
    This can be done like in this print-screen: http://screencast.com/t/pD88Xur5e

    After that you can add the following CSS snippet to the CSS editor of the Contact Style plugin.

    
.cf7-style-580 input[type="submit"] {
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	box-shadow: none;
}

    If you enjoy our work, please feel free to give us a five star rating or consider donating.

    Best Regards,
    Lehel

    Thread Starter cleslie577

    (@cleslie577)

    9 years, 3 months ago

    This fixed everything! Thank you so much! I will rate you guys a 5 star because I had so many problems with Contact Forms and trying to find something that worked for me.

    I have one more question. On that same page, the phone numbers text input area is smaller than the rest and it throws off the look of the whole contact form. Can I somehow style this phone number input area to look like the rest? Same size and without the up/down arrows at the far right?

    • This reply was modified 9 years, 3 months ago by cleslie577.
    • This reply was modified 9 years, 3 months ago by cleslie577.
    Plugin Author Lehel Szilard Marosi

    (@mlehelsz)

    9 years, 3 months ago

    Thank you for your rating,

    The solution for the telephone number input is the following:
    a. Changing the width of the input will fix the size of this one (100%)
    b. Changing the border will keep consistency between the elements (color: #e3e3e3)
    c. Changing the padding will fix the height of the element (12px for the top 10px for the bottom 12px for left and right)

    More explanatory screenshot for the solution above: http://screencast.com/t/ssY6DHabo
    This will fix every problem on the telephone input.

    Have a great day,
    Lehel

    MakarkinPRO

    (@makarkinpro)

    9 years, 2 months ago

    2017-01-19_2218

    background changing only after I change (in F12 Google Chrome mode)

    background-color
    to
    background

    Where I should change background-color to background into you CODE?

Viewing 4 replies - 1 through 4 (of 4 total)

The topic ‘Submit Button Problems’ is closed to new replies.