How can I achieve a specific visual effect on my site?

Question

I am new to HTML and CSS so I am still struggling with some of the more intermediate level skills.

I found a landing page that has an effect that I like captured in the following screenshot here. Specifically, I want to reproduce the hand-drawn-looking line that surrounds the text and button.

I have a form on my own site that I would like to surround with that same line or something similar. The code for that form is at the bottom of this post. My challenge is that the form is being generated by a WordPress plug-in called Contact Form 7. I know it can be modified using CSS styling but I'm not exactly sure what to do. Any advice would be appreciated.

<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

It uses a background image for the div that contains the form, you just need to add a rule in your stylesheet.