Submit button background color not changable

  • Resolved moniro

    (@moniro)


    2 years ago

    I create I WordPress website with Theme Raft (of Otter). The button background color is changeable by the Themes editor. I changed the background color of buttons, it is now different to the style I choosed. Now I create a contact form with WP plugin Contact form 7. Unfortunately the submit button has the color of the style and not the color I choosed manually. Which css class do I have to use?

    I tried:
    input.wpcf7-form-control.has-spinner.wpcf7-submit {
    background: #292E29;
    }

Viewing 5 replies - 1 through 5 (of 5 total)
  • Plugin Author Takayuki Miyoshi

    (@takayukister)

    Where can we see the website in question?

    Thread Starter moniro

    (@moniro)

    Unfortunately you can’t. I post the html code of the form. Does this help?

    <form action="/?page_id=63&preview=true#wpcf7-f124-p63-o1" method="post" class="wpcf7-form init" aria-label="Kontaktformular" novalidate="novalidate" data-status="init">
<div style="display: none;">
<input type="hidden" name="_wpcf7" value="124" />
<input type="hidden" name="_wpcf7_version" value="5.7.3" />
<input type="hidden" name="_wpcf7_locale" value="de_DE" />
<input type="hidden" name="_wpcf7_unit_tag" value="wpcf7-f124-p63-o1" />
<input type="hidden" name="_wpcf7_container_post" value="63" />
<input type="hidden" name="_wpcf7_posted_data_hash" value="" />
</div>
<p><label> Anrede </label><span class="wpcf7-form-control-wrap" data-name="anrede"><span class="wpcf7-form-control wpcf7-radio"><span class="wpcf7-list-item first"><label><input type="radio" name="anrede" value="Herr" tabindex="" /><span class="wpcf7-list-item-label">Herr</span></label></span><span class="wpcf7-list-item last"><label><input type="radio" name="anrede" value="Frau" tabindex="" /><span class="wpcf7-list-item-label">Frau</span></label></span></span></span>
</p>
<p><label> Vorname<br />
<span class="wpcf7-form-control-wrap" data-name="vorname"><input size="40" class="wpcf7-form-control wpcf7-text" aria-invalid="false" value="" type="text" name="vorname" /></span> </label>
</p>
<p><label> Nachname<br />
<span class="wpcf7-form-control-wrap" data-name="nachname"><input size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" aria-required="true" aria-invalid="false" value="" type="text" name="nachname" /></span> </label>
</p>
<p><label> E-Mail<br />
<span class="wpcf7-form-control-wrap" data-name="email"><input size="40" class="wpcf7-form-control wpcf7-text wpcf7-email wpcf7-validates-as-required wpcf7-validates-as-email" aria-required="true" aria-invalid="false" value="" type="email" name="email" /></span> </label>
</p>
<p><label> Telefon<br />
<span class="wpcf7-form-control-wrap" data-name="telefon"><input size="40" class="wpcf7-form-control wpcf7-text" aria-invalid="false" value="" type="text" name="telefon" /></span> </label>
</p>
<p><label> Betreff<br />
<span class="wpcf7-form-control-wrap" data-name="betreff"><input size="40" class="wpcf7-form-control wpcf7-text" aria-invalid="false" value="" type="text" name="betreff" /></span> </label>
</p>
<p><label> Ich interessiere mich für </label><br />
<span class="wpcf7-form-control-wrap" data-name="thema"><span class="wpcf7-form-control wpcf7-checkbox"><span class="wpcf7-list-item first"><label><input type="checkbox" name="thema[]" value="Steuerberatung" tabindex="" /><span class="wpcf7-list-item-label">Steuerberatung</span></label></span><span class="wpcf7-list-item"><label><input type="checkbox" name="thema[]" value="Planung und Controlling" tabindex="" /><span class="wpcf7-list-item-label">Planung und Controlling</span></label></span><span class="wpcf7-list-item last"><label><input type="checkbox" name="thema[]" value="Wirtschaftsprüfung" tabindex="" /><span class="wpcf7-list-item-label">Wirtschaftsprüfung</span></label></span></span></span>
</p>
<p><label> Nachricht<br />
<span class="wpcf7-form-control-wrap" data-name="nachricht"><textarea cols="40" rows="10" class="wpcf7-form-control wpcf7-textarea wpcf7-validates-as-required" aria-required="true" aria-invalid="false" name="nachricht"></textarea></span> </label>
</p>
<p><label> <span class="wpcf7-form-control-wrap" data-name="dsgvo"><span class="wpcf7-form-control wpcf7-checkbox wpcf7-validates-as-required"><span class="wpcf7-list-item first last"><input type="checkbox" name="dsgvo[]" value="Meine elektronisch erhoben Daten dürfen gespeichert werden." tabindex="" /><span class="wpcf7-list-item-label">Meine elektronisch erhoben Daten dürfen gespeichert werden.</span></span></span></span> </label>
</p>
<p><label> Hier finden Sie die <a href="/?page_id=74">Datenschutzerkl?rung</a>. </label>
</p>
<p><input class="wpcf7-form-control has-spinner wpcf7-submit" type="submit" value="Absenden" />
</p><div class="wpcf7-response-output" aria-hidden="true"></div>
</form>
    Plugin Author Takayuki Miyoshi

    (@takayukister)

    Welcome to Support Forum — Please Read Before Posting

    Thread Starter moniro

    (@moniro)

    I got this CSS statement from the developer tools, but within the custom styles.css of wordpress it is not overriding the css file of the theme.
    .wpcf7-form-control.has-spinner.wpcf7-submit {
    background: #000FF;
    }
    or
    input[type=”submit”] {
    background: #0000FF;
    }

    • This reply was modified 2 years ago by moniro.
    • This reply was modified 2 years ago by moniro.
    • This reply was modified 2 years ago by moniro.
    Thread Starter moniro

    (@moniro)

    Put the following code snippet into the themes css file
    input[type=”submit”] {
    background: #0000FF;
    }

    With theme Raft it is the following file:
    https://mydomain.com/wp-content/themes/raft/assets/css/build/style.css?ver=1.0.5

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Submit button background color not changable’ is closed to new replies.