Newbie to CSS – How to find the right element?

Question

I have spent the larger part of the past hour trying to figure out the right element to override my theme’s styling of Contact Form 7 but haven’t progressed farther than scratching my head in confusion.

Here’s the code when I ‘inspected’ the webpage:

<div class="elementor-widget-wrap">
                        <div class="elementor-element elementor-element-210b140 elementor-widget elementor-widget-shortcode" data-id="210b140" data-element_type="widget" data-settings="{&quot;_animation_tablet&quot;:&quot;none&quot;,&quot;_animation_mobile&quot;:&quot;none&quot;,&quot;_animation&quot;:&quot;none&quot;}" data-widget_type="shortcode.default">
                <div class="elementor-widget-container">
                    <div class="elementor-shortcode"><div role="form" class="wpcf7" id="wpcf7-f2619-p243-o1" lang="en-US" dir="ltr">
<div class="screen-reader-response"><p role="status" aria-live="polite" aria-atomic="true"></p> <ul></ul></div>
<form action="/#wpcf7-f2619-p243-o1" method="post" class="wpcf7-form init" novalidate="novalidate" data-status="init">
<div style="display: none;">
<input type="hidden" name="_wpcf7" value="2619">
<input type="hidden" name="_wpcf7_version" value="5.3">
<input type="hidden" name="_wpcf7_locale" value="en_US">
<input type="hidden" name="_wpcf7_unit_tag" value="wpcf7-f2619-p243-o1">
<input type="hidden" name="_wpcf7_container_post" value="243">
<input type="hidden" name="_wpcf7_posted_data_hash" value="">
</div>
<div class="form_home_1">
<label><br>
    <span class="wpcf7-form-control-wrap your-name"><input type="text" name="your-name" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" aria-required="true" aria-invalid="false" placeholder="Your Name*"></span> </label><br>
<label><br>
    <span class="wpcf7-form-control-wrap your-email"><input type="email" name="your-email" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-email wpcf7-validates-as-required wpcf7-validates-as-email" aria-required="true" aria-invalid="false" placeholder="Email*"></span> </label><br>
<label><br>
    <span class="wpcf7-form-control-wrap your-phone"><input type="tel" name="your-phone" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-tel wpcf7-validates-as-required wpcf7-validates-as-tel" aria-required="true" aria-invalid="false" placeholder="Phone*"></span> </label><br>
<label><br>
    <span class="wpcf7-form-control-wrap your-company"><input type="text" name="your-company" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" aria-required="true" aria-invalid="false" placeholder="Company Name*"></span> </label><br>
<label><br>
    <span class="wpcf7-form-control-wrap your-website"><input type="url" name="your-website" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-url wpcf7-validates-as-url" aria-invalid="false" placeholder="Website URL"></span> </label><br>
<input type="submit" value="Submit Query" class="wpcf7-form-control wpcf7-submit submit"><span class="ajax-loader"></span>
</div>
<div class="wpcf7-response-output" aria-hidden="true"></div></form></div></div>
                </div>
                </div>
                        </div>

I need to change the styling of all the contact forms across the website (~6 of them).

The website I’m working on is using the ‘Coming soon’ mode. But here’s a link to the theme’s demo page if that helps.

Any and all help would be colossally helpful and much appreciated!

0
Ashish V 2 months 0 Answers 14 views 0

Leave an answer