Bootstrap design in Web Forms for Marketers Sitecore

Question

I want to design a form according to bootstrap like this:

<form class="form-inline">
    <div class="control-group">
        <div class="input-append">
            <input class="span2" placeholder="Email Address" name="email" id="email" type="text">
            <button class="btn" type="submit">Go!</button>
        </div>
    </div>
</form>

How I can customize the design of WFFM?

EDIT

I want to create a form just like that

Here is my sample html

<div class="inputBtn">
    <input class="" placeholder="Email Address" name="email" id="email" type="text">
    <button class="" type="submit">Go!</button>
</div>
</div>

I have created inputBtn class and applied as above mentioned but it is not looking exact which i want. It is looking like this.

Answer 1

First you need to add the definition of the Css Class to the site.css file.

Then you need to create a new Item in Sitecore under the default path /sitecore/system/Modules/Web Forms for Marketers/Settings/Meta data/Css Classes based on the Template Extended List Item. In the Value field you will need to enter your Css Class.

Now in your Form Designer, select the Field you wish to add the class. You will then see on the left you can select your class in the Css Class drop down list. See below

EDIT

You can go down the route of create your own custom Field Type. You will need to add your html to an ascx, in the code behind implement BaseUserControl.

Having implemented BaseUserControl you will need to add your code for the email submit action in the Result method.

From there you need to add your new custom Field Type to Sitecore. To add the new Web Form for Marketers Field, in the Content Editor browse to the path /sitecore/system/Modules/Web Forms for Marketers/Settings/Field Types/Custom and insert a new Field type entering the Assembly name and Class name into the appropriate fields. See below

This will allow you to select your new Field Type with that exact styling through the Form Designer. References and more info is below:

https://divamatrix.wordpress.com/2011/12/20/wffm-custom-field-type-made-easy/ http://jonathanrobbins.co.uk/2015/02/18/sitecore-web-forms-for-marketers-send-email-with-attachment-save-action/