Shock Docs - Creative Multipurpose WordPress Theme

Form Templates

Shock Theme suggests the simplest and easiest to use WordPress plugin for building forms. We are referring to Contact Form 7 which is free, ad-free, in addition to being used by millions of sites worldwide, which consolidates a test base for all types of needs.

The Templates described here are in HTML format, unfortunately we haven't found a more user-friendly way to do this, but in future theme updates we'll try to implement something.

Tip

The Contact Form 7 plugin is optional, you can install another one of your choice if you wish. However, the templates described here may not work as usual.

If you have imported the Demo Data many ready-made Contact Forms will already be available in the list, leaving you to customize the content.

Important

You will be able to include the Contact Forms in your pages with Shortcodes When editing a page with Elementor, look for the Shock Form Widget, and you can choose the style, colors, typography of the fields, buttons, add icons, among others.

Contact Form 1


<div class="form-area delay-init">
  <div class="form-row row">
    <div class="form-col form-floating col-12 col-md-6">
      [text* your-name placeholder "Name"]
      <label class="form-label">Name</label>
      <div class="invalid-feedback">Please enter your name.</div>
      <div class="valid-feedback">Looks good.</div>
    </div>
    <div class="form-col form-floating col-12 col-md-6">
      [email* your-email placeholder "Email"]
      <label class="form-label">Email</label>
      <div class="invalid-feedback">Please enter a valid email address.</div>
      <div class="valid-feedback">Looks good.</div>
    </div>
  </div>
  <div class="form-row row">
    <div class="form-col form-floating col-12">
      [textarea your-message x5 placeholder "Message"]
      <label class="form-label">Message</label>
      <div class="valid-feedback">It's optional, but we'd like to know about it :)</div>
    </div>
  </div>
  <div class="form-row row">
    <div class="form-col col-12">
      [acceptance acceptance]
      I agree to the <a href="#your-link">terms of use</a>
      [/acceptance]
    </div>
  </div>
</div>

Contact Form 2


<div class="form-area delay-init">
  <div class="form-row row">
    <div class="form-col form-floating col-12 col-md-6">
      [text* your-name placeholder "First Name"]
      <label class="form-label">First Name</label>
      <div class="invalid-feedback">Please enter your first name.</div>
      <div class="valid-feedback">Looks good.</div>
    </div>
    <div class="form-col form-floating col-12 col-md-6">
      [text* your-last-name placeholder "Last Name"]
      <label class="form-label">Last Name</label>
      <div class="invalid-feedback">Please enter your last name.</div>
      <div class="valid-feedback">Looks good.</div>
    </div>
  </div>
  <div class="form-row row">
    <div class="form-col form-floating col-12 col-md-6">
      [tel your-phone placeholder "Phone"]
      <label class="form-label">Phone</label>
      <div class="valid-feedback">It's optional, but we'd like to know about it :)</div>
    </div>
    <div class="form-col form-floating col-12 col-md-6">
      [email* your-email placeholder "Email"]
      <label class="form-label">Email</label>
      <div class="invalid-feedback">Please enter a valid email address.</div>
      <div class="valid-feedback">Looks good.</div>
    </div>
  </div>
  <div class="form-row row">
    <div class="form-col form-floating col-12">
      [textarea your-message x5 placeholder "Message"]
      <label class="form-label">Message</label>
      <div class="valid-feedback">It's optional, but we'd like to know about it :)</div>
    </div>
  </div>
  <div class="form-row row">
    <div class="form-col form-floating col-12">
      [checkbox* choices "I want to receive news from this site by email." "I want to receive news from this site by sms."]
    </div>
  </div>
</div>

Contact Form 3


<div class="form-area delay-init">
  <div class="form-row row">
    <div class="form-col form-floating col-12 col-md-6">
      [text* your-name placeholder "First Name"]
      <label class="form-label">First Name</label>
      <div class="invalid-feedback">Please enter your first name.</div>
      <div class="valid-feedback">Looks good.</div>
    </div>
    <div class="form-col form-floating col-12 col-md-6">
      [select service "Option 1" "Option 2" "Option 3" "Option 4" "Option 5"]
      <label class="form-label">Service</label>
      <div class="valid-feedback">It's optional, but we'd like to know about it :)</div>
    </div>
  </div>
  <div class="form-row row">
    <div class="form-col form-floating col-12 col-md-6">
      [tel your-phone placeholder "Phone"]
      <label class="form-label">Phone</label>
      <div class="valid-feedback">It's optional, but we'd like to know about it :)</div>
    </div>
    <div class="form-col form-floating col-12 col-md-6">
      [email* your-email placeholder "Email"]
      <label class="form-label">Email</label>
      <div class="invalid-feedback">Please enter a valid email address.</div>
      <div class="valid-feedback">Looks good.</div>
    </div>
  </div>
  <div class="form-row row">
    <div class="form-col form-floating col-12">
      [textarea your-message x5 placeholder "Message"]
      <label class="form-label">Message</label>
      <div class="valid-feedback">It's optional, but we'd like to know about it :)</div>
    </div>
  </div>
  <div class="form-row row">
    <div class="form-col col-12">
      [acceptance acceptance]
      I agree to the <a href="#your-link">terms of use</a>
      [/acceptance]
    </div>
  </div>
</div>

Contact Form 4


<div class="form-area delay-init">
  <div class="form-row row">
    <div class="form-col form-floating col-12 col-md-6">
      [text* your-name placeholder "First Name"]
      <label class="form-label">First Name</label>
      <div class="invalid-feedback">Please enter your first name.</div>
      <div class="valid-feedback">Looks good.</div>
    </div>
    <div class="form-col form-floating col-12 col-md-6">
      [text* your-last-name placeholder "Last Name"]
      <label class="form-label">Last Name</label>
      <div class="invalid-feedback">Please enter your last name.</div>
      <div class="valid-feedback">Looks good.</div>
    </div>
  </div>
  <div class="form-row row">
    <div class="form-col form-floating col-12 col-md-6">
      [tel your-phone placeholder "Phone"]
      <label class="form-label">Phone</label>
      <div class="valid-feedback">It's optional, but we'd like to know about it :)</div>
    </div>
    <div class="form-col form-floating col-12 col-md-6">
      [email* your-email placeholder "Email"]
      <label class="form-label">Email</label>
      <div class="invalid-feedback">Please enter a valid email address.</div>
      <div class="valid-feedback">Looks good.</div>
    </div>
  </div>
  <div class="form-row row">
    <div class="form-col form-floating col-12 col-md-6">
      [date date]
      <label class="form-label">Date</label>
      <div class="valid-feedback">It's optional, but we'd like to know about it :)</div>
    </div>
    <div class="form-col form-floating col-12 col-md-6">
      [file file limit:1024 filetypes:pdf|jpg|png]
      <label class="form-label">File</label>
      <div class="valid-feedback">It's optional, but we'd like to know about it :)</div>
    </div>
  </div>
  <div class="form-row row">
    <div class="form-col form-floating col-12">
      [textarea your-message placeholder "Message"]
      <label class="form-label">Message</label>
      <div class="valid-feedback">It's optional, but we'd like to know about it :)</div>
    </div>
  </div>
  <div class="form-row row">
    <div class="form-col form-floating col-12">
      [radio radios default:1 "I found this site by searching the internet." "A friend recommended this site to me."]
    </div>
  </div>
</div>

Contact Form 5


<div class="form-area delay-init">
  <div class="form-row row">
    <div class="form-col form-floating col-12 col-md-6">
      [text* your-name placeholder "First Name"]
      <label class="form-label">First Name</label>
      <div class="invalid-feedback">Please enter your first name.</div>
      <div class="valid-feedback">Looks good.</div>
    </div>
    <div class="form-col form-floating col-12 col-md-6">
      [text* your-last-name placeholder "Last Name"]
      <label class="form-label">Last Name</label>
      <div class="invalid-feedback">Please enter your last name.</div>
      <div class="valid-feedback">Looks good.</div>
    </div>
  </div>
  <div class="form-row row">
    <div class="form-col form-floating col-12 col-md-6">
      [tel phone placeholder "Phone"]
      <label class="form-label">Phone</label>
      <div class="valid-feedback">It's optional, but we'd like to know about it :)</div>
    </div>
    <div class="form-col form-floating col-12 col-md-6">
      [email* your-email placeholder "Email"]
      <label class="form-label">Email</label>
      <div class="invalid-feedback">Please enter a valid email address.</div>
      <div class="valid-feedback">Looks good.</div>
    </div>
  </div>
  <div class="form-row row">
    <div class="form-col form-floating col-12 col-md-6">
      [url website placeholder "https://your-link"]
      <label class="form-label">Website</label>
      <div class="valid-feedback">It's optional, but we'd like to know about it :)</div>
    </div>
    <div class="form-col form-floating col-12 col-md-6">
      [select service "Option 1" "Option 2" "Option 3" "Option 4" "Option 5"]
      <label class="form-label">Service</label>
      <div class="valid-feedback">It's optional, but we'd like to know about it :)</div>
    </div>
  </div>
  <div class="form-row row">
    <div class="form-col form-floating col-12 col-md-6">
      [date date]
      <label class="form-label">Date</label>
      <div class="valid-feedback">It's optional, but we'd like to know about it :)</div>
    </div>
    <div class="form-col form-floating col-12 col-md-6">
      [file file limit:1024 filetypes:pdf|jpg|png]
      <label class="form-label">File</label>
      <div class="valid-feedback">It's optional, but we'd like to know about it :)</div>
    </div>
  </div>
  <div class="form-row row">
    <div class="form-col form-floating col-12">
      [textarea your-message placeholder "Message"]
      <label class="form-label">Message</label>
      <div class="valid-feedback">It's optional, but we'd like to know about it :)</div>
    </div>
  </div>
  <div class="form-row row">
    <div class="form-col col-12">
      [acceptance acceptance]
      I agree to the <a href="#your-link">terms of use</a>
      [/acceptance]
    </div>
  </div>
</div>

Subscribe Form 1


<div class="form-area delay-init">
  <div class="form-row row">
    <div class="form-col form-floating col-12 col-md-6">
      [text* your-name placeholder "Name"]
      <label class="form-label">Name</label>
      <div class="invalid-feedback">Please enter your name.</div>
      <div class="valid-feedback">Looks good.</div>
    </div>
    <div class="form-col form-floating col-12 col-md-6">
      [email* your-email placeholder "Email"]
      <label class="form-label">Email</label>
      <div class="invalid-feedback">Please enter a valid email address.</div>
      <div class="valid-feedback">Looks good.</div>
    </div>
  </div>
  <div class="form-row row">
    <div class="form-col col-12">
      [acceptance acceptance]
      I agree to the <a href="#your-link">terms of use</a>
      [/acceptance]
    </div>
  </div>
</div>

Subscribe Form 2


<div class="form-area delay-init">
  <div class="form-row row has-icon">
    <div class="form-col form-floating">
      <button class="button overlay-button"></button>
      [email* your-email placeholder "Email"]
      <label class="form-label">Email</label>
    </div>
  </div>
</div>

Adding/Editing a Form Template

Make sure you have installed the Required Plugins
From Dashboard, go to Contact » Contact Forms.
To add a new Form, click on the Add New button, or click on the Edit button in the list of registered Forms to edit.
Give your Form a title, just to organize it in the list, this title will not be visible on the site pages.
In the Form tab, paste the code of one of the Templates (listed here above), or edit the fields of your choice.
Take care not to modify important parts of the HTML code, we recommend that you only change the name of the fields, for example: "Name", "Message", etc. You can get more information in the Official Docs
Click on the Save button to save the changes.