Creating Forms

Our theme used a third party plugin for creating forms, in order to give you full flexibility over this feature. We've chosen Contact Form 7, but the theme should work with other form plugins as well.

You only need to wrap the form shortcodes inside some rows and columns, for a good design. Below we'll give some examples of forms, which you can tweak after your own needs.

Basic contact form (as seen in online demo):

<div class="krown-form">

 <div class="krown-column-row"> 

  <div class="krown-column-container span4">
    [text* your-name placeholder "Name"]
  </div>

  <div class="krown-column-container span4">
    [email* your-email placeholder "Email"]
  </div>

  <div class="krown-column-container span4">
    [text your-subject placeholder "Subject"]
  </div>

 </div>

 <div class="krown-column-container span12">
    [textarea your-message placeholder "Message"]
 </div>

 <div class="krown-column-container span12"> [submit "Send"] </div>

</div>

As you can see, every input field needs to be wrapped inside another element, with a column indicator. A row of columns also needs to be wrapped and last, everything is wrapped in a form.

So it goes like this:

1. Main wrapper

<div class="krown-form"> .... </div>

2. Row wrapper (full width columns don't need to be wrapped like this)

<div class="krown-column-row"> .... </div>

3. Column wrapper

<div class="krown-column-container span4"> .... </div>

There are a few available classes for column dimensions inside forms:

  • span4 - 33%
  • span6 - 50%
  • span12 - 100%

Follow these guidelines and you'll be able to create forms as you desire. 

Below you can see two more examples, which can be also seen at this link:  http://alpha-demo.krownthemes.com/more-contact-forms/

More field types:

<div class="krown-form">

 <div class="krown-column-row"> 

  <div class="krown-column-container span4">
    [text* your-name placeholder "Name"]
  </div>

  <div class="krown-column-container span4">
    [email* your-email placeholder "Email"]
  </div>

  <div class="krown-column-container span4">
    [select menu-193 "Male" "Female"]
  </div>

 </div>

 <div class="krown-column-row">
   
   <div class="krown-column-container span6">
     [checkbox checkbox-262 "I agree with all the terms."]
   </div>


   <div class="krown-column-container span6">
     [radio radio-770 default:1 "I'm a robot" "I'm not a robot"]
   </div>

 </div>

 <div class="krown-column-container span12">
    [textarea your-message placeholder "Message"]
 </div>

 <div class="krown-column-container span12"> [submit "Send"] </div>

</div>

Form with labels:

<div class="krown-form">

 <div class="krown-column-row"> 

  <div class="krown-column-container span6">
    <label>
       Your name
         [text* your-name]
    </labe>
  </div>

  <div class="krown-column-container span6">
     <label>
        Your email
          [email* your-email placeholder]
     </label>
  </div>

 </div>

 <div class="krown-column-container span12">
     <label>
        Write your story
           [textarea your-message]
     </label>
 </div>

 <div class="krown-column-container span12"> [submit "Send"] </div>

</div>