Question

我是HTML和CSS的新手，所以我仍然在努力学习一些更中级的技能。

我发现landing page有一个我喜欢的效果，可以在下面的截图here中找到。具体来说，我想重现围绕文本和按钮的手绘外观线。

我在自己的网站上有一个表单，我想用同一行或类似的东西包围。该表单的代码位于本文的底部。我的挑战是表单是由一个名为Contact Form 7的WordPress插件生成的。我知道它可以使用CSS样式进行修改，但我不确定该怎么做。任何意见，将不胜感激。

<div class="x-column vc one-third" style="width:66%">
    <h5>Please fill out the form below to schedule a pick up</h5>

    <div class="wpcf7" id="wpcf7-f6750-p6643-o1">
        <div class="screen-reader-response"></div>
        <form action="/6643-2/#wpcf7-f6750-p6643-o1" method="post" class="wpcf7-form" novalidate="novalidate">
            <div style="display: none;">
                <input type="hidden" name="_wpcf7" value="6750" />
                <input type="hidden" name="_wpcf7_version" value="3.8" />
                <input type="hidden" name="_wpcf7_locale" value="en_US" />
                <input type="hidden" name="_wpcf7_unit_tag" value="wpcf7-f6750-p6643-o1" />
                <input type="hidden" name="_wpnonce" value="8ef2029f38" />
            </div>
            <p><span class="wpcf7-form-control-wrap your-company"><input type="text" name="your-company" value="" size="40" class="wpcf7-form-control wpcf7-text" aria-invalid="false" placeholder="Your Company" /></span> 
            </p>
            <p> <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> 
            </p>
            <p> <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="Your Email" /></span> 
            </p>
            <p><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-tel" aria-invalid="false" placeholder="Your Phone Number" /></span> 
            </p>
            <p> <span class="wpcf7-form-control-wrap your-address1"><input type="text" name="your-address1" value="" size="40" class="wpcf7-form-control wpcf7-text" aria-invalid="false" placeholder="Your Street Address" /></span>
            </p>
            <p><span class="wpcf7-form-control-wrap your-address2"><input type="text" name="your-address2" value="" size="40" class="wpcf7-form-control wpcf7-text" aria-invalid="false" placeholder="Your Suite or Unit Number" /></span>
            </p>
            <p><span class="wpcf7-form-control-wrap your-city"><input type="text" name="your-city" value="" size="40" class="wpcf7-form-control wpcf7-text" aria-invalid="false" placeholder="Your City" /></span>
            </p>
            <p><span class="wpcf7-form-control-wrap your-postalcode"><input type="text" name="your-postalcode" value="" size="40" class="wpcf7-form-control wpcf7-text" aria-invalid="false" placeholder="Your Postal Code" /></span>
            </p>
            <p><span class="wpcf7-form-control-wrap textbox"><textarea name="textbox" cols="40" rows="10" class="wpcf7-form-control wpcf7-textarea" aria-invalid="false" placeholder="What would you like to recycle?"></textarea></span>
            </p>
            <p>My electronics are located in an
                <br />
<span class="wpcf7-form-control-wrap radio-15"><span class="wpcf7-form-control wpcf7-radio"><span class="wpcf7-list-item first"><label><span class="wpcf7-list-item-label">Office</span>&nbsp;
                <input type="radio" name="radio-15" value="Office" />
                </label>
                </span><span class="wpcf7-list-item last"><label><span class="wpcf7-list-item-label">Warehouse</span>&nbsp;
                <input type="radio" name="radio-15" value="Warehouse" />
                </label>
                </span>
                </span>
                </span>
            </p>
            <p>I'd like to schedule a pickup for
                <br />
<span class="wpcf7-form-control-wrap BookingDate"><input type="date" name="BookingDate" value="" class="wpcf7-form-control wpcf7-date wpcf7-validates-as-date" min="2014-05-01" max="2099-05-01" aria-invalid="false" /></span>
            </p>
            <p>
                <input type="submit" value="Book My Pickup" class="wpcf7-form-control wpcf7-submit" />
            </p>
            <div class="wpcf7-response-output wpcf7-display-none"></div>
        </form>
    </div>
</div>

Answer 1

它使用包含表单的div的背景图片，您只需在样式表中添加规则。

如何在我的网站上实现特定的视觉效果？

1 个答案: