For all forms-related functionality Startuply uses Contact Form 7 plugin. It's a free and extremely popular WordPress plugin. With various examples, this tutorial explains how to display a form on your page, and how to customize your forms. Before getting started, I recommend to get familiar with official documentation of Contact Form 7 plugin.

Displaying a Form

Let's start with displaying a form on your page. After Contact Form 7 is installed, you’ll find a new menu item in your WordPress Dashboard. See Forms > Contact Forms. Here you will see the central administration panel where you can manage multiple contact forms.

After importing of demo content, you should see a list of forms on this page, such as "Fast signup 1", "Fast signup 2" and so on. If there is no forms, it means that demo content was imported before plugin activation. Try to enable Contact Form 7 and re-import demo data again.

The next step is placing your form on the page. Open the edit menu of the page (‘Pages’ > ‘Edit’) into which you wish to place the contact form. Find the element called Form Manager or Contact Form 7. The only difference between them is that Form Manager have an additional setting for mailing list integration (MailChimp, Aweber, Mad Mimi and so on), while Contact Form 7 is a simple element that can only display your form.

Save your changes. Now your contact form setup is complete. Visitors to your site can now find the form and start submitting messages to you.

 

How to Use Predefined Styles

Contact Form 7 is so simple that it seems literally anyone can use it effectively. Styling too, is intended to be simple. But perhaps too simple for some. By default we don't style our forms, you need to manually put the form code inside the <div class="form">...</div>. It was made on purpose - to avoid conflicts with other plugins, such as Gravity Forms, Ninja Forms, WPForms and so on. We don't force users to use only Contact Form 7, you can use any form plugin you want.

By default, when you just clicked on the Add New the form code will look like this:

<label> Your Name (required)
    [text* your-name] </label>

<label> Your Email (required)
    [email* email] </label>

<label> Subject
    [text subject] </label>

<label> Your Message
    [textarea* your-message] </label>

[submit "Send"]

The form without styling:

Here’s a quick example to demonstrate Startuply’s form styles. I converted default form code into Startuply-friendly format.

<div class="form"> <-- Always wrap your form code inside the "form" class
  <div class="form-group">
    <div class="col-sm-12 col-xs-12">
      [text* your-name placeholder "Your Name"]
    </div>
  </div>

  <div class="form-group">
    <div class="col-sm-12 col-xs-12">
      [email* email placeholder "Your Email"]
    </div>
  </div>

  <div class="form-group">
    <div class="col-sm-12 col-xs-12">
      [text subject placeholder "Subject"]
    </div>
  </div>

  <div class="form-group">
    <div class="col-sm-12 col-xs-12">
      [textarea* your-message placeholder "Your message here..."]
    </div>
  </div>

  <div class="form-group">
    <div class="col-sm-12 col-xs-12">
      [submit class:btn class:btn-solid "Send"]
    </div>
  </div>
</div>

An overview of changes:

1. I added the <div class="form">...</div> wrapper.

2. All <label>...</label> has been removed.

3. For the sake of simplicity, I wrapped every form element into this:

  <div class="form-group">
    <div class="col-sm-12 col-xs-12">
      ...text field here...
    </div>
  </div>

You can find more advanced layouts in official Bootstrap documentation.

4. The submit button has been changed to this [submit class:btn class:btn-solid "Send"].

Keep reading for documentation on required classes, form groups, and more.

1. The "form" class

The form code should be always wrapped in "form" class. This is the base class for all forms, to make your form transparent, add the "clear-inline" modifier like so:

<div class="form clear-inline">
    ...here goes your form code...
</div>

On the picture below you can see the difference, default form style on the left (without clear-inline) and transparent style on the right (with clear-inline added):

Depending on the type of background, transparent form fields can have white outline (fits for dark backgrounds) or dark outline. You can manage outline color in Row Settings (See Text color scheme option):

Please note that this option only works for transparent forms and have no effect on default style. The result is shown on the picture below. On the left you can see the "Light text" value was selected, on the right - the "Dark text" was selected:

Yet another useful option - you can add an opaque gray background to your form. Add the "leadform" modifier like so:

<div class="form leadform">
    ...here goes your form code...
</div>

And the last option - you can add a semi-transparent dark background to your form. Simply add the "form-overlay":

<div class="form form-overlay">
    ...here goes your form code...
</div>

2. Form groups.

The form-group class is the easiest way to add some structure to forms. Its purpose is to pair form controls with a legend or label, and to provide help text and invalid/valid feedback text.

3. Submit button.

Add the class to the button. Because the button requires two classes btn and btn-solid or btn-outline (on your own taste). Separate them using the class tag

Make sure you place the classes before the “Send” tag.

[submit class:btn class:btn-solid "Send"]


Code examples:

Lead generation 1

Lead generation 2

Lead generation 3

"Contact Us" (Sidebar widget)

More examples will be added soon...