Colourbox and forms


When a colorbox opens, the form is removed. Here is how to add it back.

$.colorbox({ width: "50%", opacity: 0.25, html: true, 
        inline: true, transition: "elastic", initialWidth: 20, initialHeight: 20
        //, innerHeight: 244
        ,scrolling: false, href: "#colorboxLeadDiv"
        //,title: 'Show interest'
        ,onOpen:function (){
            //when the colorbox pops up, form is lost. need to create one, and put the form items in it.
            var $existingFormElements = $('#colorboxLeadDiv table');
            var $form = $('#newForm');
            if($form.length==0)$form = $("<form id='newForm' method='post'></form>");

<div style='display:none'>
    var textBlock=new Beweb.TextBlock("Featured Country - Lead Popup","Please provide your details","If you are interested in this country, please fill in the details below. Check any jobs you are interested in and we will send you the job brief.");
    <div id='colorboxLeadDiv' style='padding:10px; background:#fff;'>
        <p><strong><%=textBlock.Title %></strong></p>
        <p><%=textBlock.BodyTextHTML %></p>       
                <td class="label">First Name:</td>
                <td class="field"><%=new Forms.TextField(record.Fields.FirstName, true) { style = "" }%></td>
                <td class="label">Surname:</td>
                <td class="field"><%=new Forms.TextField(record.Fields.Surname, true) %></td>
                <td class="label">Email:</td>
                <td class="field"><%=new Forms.EmailField(record.Fields.Email, true) %></td>
                <td class="label">Phone:</td>
                <td class="field"><%=new Forms.PhoneField(record.Fields.Phone, true) %></td>
                <td class="label">Which jobs are you interested in?:</td>
                <td class="field"><%=new Forms.Checkboxes("InterestedIn").Add(GetCurrentJobs()) %></td>
                <td class="label"></td>
                <td class="field"><input name="new" type="submit" class="btn_sm_arrow" value="Send" style="cursor:pointer"/></td>


Leave a Comment