Edit in JSFiddle

<div class="col-md-6">
    <div class="contact-form-container" id="contact-form-container"></div>
</div>

<!-- Modal -->
<div class="modal fade" id="contactModal" tabindex="-1" role="dialog" aria-labelledby="contactModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                	<h4 class="modal-title" id="contactModalLabel">Edit Contact Form</h4>

            </div>
            <div class="modal-body">
                <div id="edit-form-container">This is placeholder for contact form edit</div>
            </div>
        </div>
    </div>
</div>

<script type="handlebars/template" id="save-template">
	<div class="contact-form-view clearfix" >
		<div class="form-group row">
			<label for="name" class="col-sm-2 control-label">Name</label>
			<div class="col-sm-10">
				<p>{{name}}</p>
			</div>
		</div>
		<div class="form-group row">
			<label for="email" class="col-sm-2 control-label">Email</label>
			<div class="col-sm-10">
				<p>{{email}}</p>
			</div>
		</div>
		<div class="form-group row">
			<label for="message" class="col-sm-2 control-label">Message</label>
			<div class="col-sm-10">
				<p>{{message}}</p>
			</div>
		</div>
		<div class="form-group row">
			<div class="col-sm-10 col-sm-offset-2">
				<input name="edit" type="button" value="Edit" class="btn btn-primary edit-button" >
			</div>
		</div>

	</div>
</script>
<script type="handlebars/template" id="edit-template">
	<form class="contact-form clearfix" id="contact-form">
		<div class="form-group row">
			<label for="name" class="col-sm-2 control-label">Name</label>
			<div class="col-sm-10">
				<input type="text" class="form-control" id="name" name="name" placeholder="First & Last Name" value="{{name}}" >
			</div>
		</div>
		<div class="form-group row">
			<label for="email" class="col-sm-2 control-label">Email</label>
			<div class="col-sm-10">
				<input type="email" class="form-control" id="email" name="email" placeholder="[email protected]" value="{{email}}">
			</div>
		</div>
		<div class="form-group row">
			<label for="message" class="col-sm-2 control-label">Message</label>
			<div class="col-sm-10">
				<textarea class="form-control" rows="4" name="message">{{message}}</textarea>
			</div>
		</div>
		<div class="form-group row">
			<div class="col-sm-10 col-sm-offset-2">
				<input name="submit" type="submit" value="Save" class="btn btn-success save-button" >
			</div>
		</div>
	</form>
</script>

    var ContactForm = Backbone.View.extend({
        el: '#contact-form-container',
        events: {
            'click .edit-button': 'editForm',
                'click .save-button': 'saveForm',
        },
        saveTemlate: 'save-template',
        editTemplate: 'edit-template',
        initialize: function () {
            var self = this;
            this.contactData = {
                name: 'Debasis Panda',
                email: '[email protected]',
                message: 'Debasis Panda: This is my message. This is my message. This is my message. This is my message. This is my message. This is my message.'
            }

            this.getTemplate(this.saveTemlate);
            $(document).on('click', '.save-button', function (e) {
                e.preventDefault();
                self.saveForm();
            })
        },
        getTemplate: function (templateId) {
            var html;
            var self = this;
            var template = Handlebars.compile($('#' + templateId).html());
            html = template(self.contactData);
            $(this.el).html(html);

        },
        editForm: function () {
            this.el = '#edit-form-container';
            this.getTemplate(this.editTemplate);
            $('#contactModal').modal('show');
        },
        saveForm: function () {
            self = this;
            self.el = '#contact-form-container';

            self.saveData(function () {
                self.getTemplate(self.saveTemlate);
                $('#contactModal').modal('hide');
            });

        },
        saveData: function (callback) {
            self = this;
            $.each($('#contact-form').serializeArray(), function (_, form) {
                self.contactData[form.name] = form.value;
            });

            if (callback) {
                callback();
            };
        }

    });

    var contactForm = new ContactForm();

.contact-form-view {
    padding: 20px;
    border: 1px solid #ddd;
    margin: 50px;
}