如何在我的網站上實現特定的視覺效果？

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的背景圖像，只需要在樣式表中添加一條規則即可。