What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.


  • Profile Image

    How can I clone a form from a website/page?

    Asked by siddallandhilton on September 21, 2013 at 11:45 AM

    Hi

    I have been told by my boss to replicate a form on our website exactly as it currently looks as our previous form provider has now gone bust.  Why me?  Because I made the mistake of telling him I once glanced at a computer in the 80's and for some reason that means I know everything about HTML...

     

    I am not allowed to change the design, other than to remove the captcha which he didnt want on there in the first place.

     

    I was hoping someone could help me replicate the form so I can just drop the jotform code into the form placeholder on the website?  


    I have posted the form html and css below.  The form can also be found on the right hand side of every page at the following address:

     

    http://79.170.44.210/sandhp.com/products/wire-products/upholstery-springs.html

     

    Major karma points for anyone who can help!

     

    Thanks

     

    Ian

     

     

    Form html:

     

    <form action=""
      method="post"
      enctype="application/x-www-form-urlencoded"
      id="quickContactForm">
      <h3>Your Enquiry</h3>
      <div>
      <label for="quickContactName" id="quickContactName_label">Name:</label>
      <input type="text" name="quickContactName" id="quickContactName" value="" /><label for="quickContactTelephone" id="quickContactTelephone_label">Telephone Number:</label>
      <input type="text" name="quickContactTelephone" id="quickContactTelephone" value="" class="validate[custom[onlyNumberSp]]" /><label for="quickContactTelephoneWhen" id="quickContactTelephoneWhen_label">Contact me:</label>
      <select name="quickContactTelephoneWhen" id="quickContactTelephoneWhen">
      <option value="asap" label="As soon as possible">As soon as possible</option>
      <option value="8am - 9am" label="8am - 9am">8am - 9am</option>
      <option value="9am - 10am" label="9am - 10am">9am - 10am</option>
      <option value="10am - 11am" label="10am - 11am">10am - 11am</option>
      <option value="11am - 12pm" label="11am - 12pm">11am - 12pm</option>
      <option value="12pm - 1pm" label="12pm - 1pm">12pm - 1pm</option>
      <option value="1pm - 2pm" label="1pm - 2pm">1pm - 2pm</option>
      <option value="2pm - 3pm" label="2pm - 3pm">2pm - 3pm</option>
      <option value="3pm - 4pm" label="3pm - 4pm">3pm - 4pm</option>
      <option value="4pm - 5pm" label="4pm - 5pm">4pm - 5pm</option>
      </select><label for="quickContactEmail" id="quickContactEmail_label">Email:</label>
      <input type="text" name="quickContactEmail" id="quickContactEmail" value="" class="validate[required,custom[email]]" /><label for="quickContactComments" id="quickContactComments_label">Comments:</label>
      <textarea name="quickContactComments" id="quickContactComments" class="validate[required] text-input" rows="24" cols="80"></textarea><div id="quick-captcha">
      <img width="240" height="50" alt="" src="/images/captcha/2783123b4f0ae850a101d103837cfb5e.png"/><br/>
      <input type="hidden" name="captcha[id]" value="2783123b4f0ae850a101d103837cfb5e" id="captcha-id" />
      <input type="text" name="captcha[input]" id="captcha-input" value="" />
      <label for="captcha-input" class="required">Enter The Above Code:</label></div>
      <input type="submit" name="quickContactSubmit" id="quickContactSubmit" value="Send" /> </div>
      </form>
     

     

    CSS code:

     

    #quickContact

    {

    padding-top:20px;position:relative

    }

     

    #quickContactform

    {

    background:url(images/sandhsprite.png) no-repeat -10px -540px transparent;width:252px;height:500px;position:relative

    }

     

    #quickContact formh3

    {

    color:white;padding:12px0 0 55px;font-weight:lighter

    }

     

    #quickContact form input, #quickContact form label, #quickContact form select, #quickContact formtextarea

    {

    font-family:"Helvetica Bold",Helvetica;font-size:13px;color:#999;position:absolute;width:236px;left:8px;background:none;border:none;padding:05px;padding-left:100px

    }

     

    #quickContact formselect

    {

    padding-left:5px

    }

     

    #quickContact formlabel

    {

    padding-left:5px;color:#999;z-index:2

    }

     

    #quickContact form 

    #quick-captchalabel

    {

    bottom:-25px

    }

     

    #quickContact form 

    #quickContactEmail, #quickContact form 

    #quickContactName, #quickContact form 

    #quickContactTelephone, #quickContact form 

    #quick-captcha 

    #captcha-input

    {

    background:url(images/sandhsprite.png) no-repeat -10px -221px transparent;height:43px

    }

     

    #quickContact form

    #quickContactName

    {

    top:48px

    }

     

    #quickContact form

    #quickContactName_label

    {

    top:63px

    }

     

    #quickContact form

    #quickContactTelephone

    {

    top:100px

    }

     

    #quickContact form

    #quickContactTelephone_label

    {

    top:115px

    }

     

    #quickContact form

    #quickContactTelephoneWhen

    {

    background:url("images/sandhsprite.png") no-repeat scroll -10px -221px transparent;padding:13px5px 13px 80px;top:150px

    }

     

    #quickContact form

    #quickContactTelephoneWhen_label

    {

    top:166px;width:75px

    }

     

    #quickContact form

    #quickContactEmail

    {

    top:200px

    }

     

    #quickContact form

    #quickContactEmail_label

    {

    top:215px

    }

     

    #quickContact form

    #quickContactComments

    {

    top:250px;height:90px;padding-top:10px;background:url(images/sandhsprite.png) no-repeat -10px -283px transparent;overflow:auto

    }

     

    #quickContact form

    #quickContactComments_label

    {

    top:262px

    }

     

    #quickContact form

    #quickContactSubmit

    {

    top:458px;left:140px;height:28px;color:white;font-weight:bold;width:100px;padding-left:5px

    }

     

    #quickContact form 

    #quick-captcha

    {

    position:absolute;top:350px;padding:6px

    }

     

    #quickContact form 

    #captcha-input

    {

    width:230px

    }

    Page URL:
    http://79.170.44.210/sandhp.com/products/wire-products/upholstery-spri<br/>ngs.html

    form html JotForm textarea form label email
  • Profile Image

    Answered by khrisell on September 21, 2013 at 12:17 PM

    Hello,

    Here's the form I got from that website.

    http://form.jotformpro.com/form/32634570336958

    You can clone this form so that you can use it on your own website/page.

     

    Here's the instruction on how you can duplicate/clone a form.

    1. Copy the URL of the form that needs to be cloned

    2. Log into your target account

    3. Click on "Create Form"


    4. Click on "Import Form"


    5. Click on "From a Web Page" and paste the form URL I have provided you at the first part of my response.

     


    6. Click Continue and your form should be cloned.

    The customization that I have seen on that website is coded in the website/page not on the form itself.

    Kindly let us know if you need further assistance.
    Thank you for using JotForm. :)
  • Profile Image

    Answered by siddallandhilton on September 21, 2013 at 12:52 PM

    Hi Khrisell

     

    Thanks for getting back to me so quickly!  I have followed your instructions and now have the form.  Is there any way of copying the CSS styles?  Can I import them in any way, or change the field details so they match the css id's and classes on the page?

     

    Thanks

     

    Ian

  • Profile Image

    Answered by siddallandhilton on September 21, 2013 at 12:53 PM

    Dont worry, I've found it!

     

    Jotform rocks!

  • Profile Image

    Answered by khrisell on September 21, 2013 at 12:58 PM

    Hello siddallandhilton ,

    Follow this guide on how to inject this codes

    1. Click Setup & Embed

    2. Preference

    A new window will pop-up.

    3. Then click Form Styles

    4. And paste the code under Inject Code CSS box.

    And then close that window and you're done.

     

    We are very glad that you are happy with our service.

    Feel free to contact us if you need any assistance.

    Thank you for using JotForm. :)

  • Profile Image

    Answered by pinoytech on September 21, 2013 at 02:05 PM

    @siddallandhilton 

    You might like to take a look at this clone form also in addition to my colleague's response.

    http://www.jotform.co/form/32634763513858

    Feel free to clone the form.

    If you need further assistance, please let us know.

    Thank you!

  • Profile Image

    Answered by siddallandhilton on September 21, 2013 at 02:07 PM

    Hi Pinoytech

     

    That is absolutely perfect!  Thanks for looking at this for me!  I am off to clone the form right now!

     

    Regards

     

    Ian

  • Profile Image

    Answered by pinoytech on September 21, 2013 at 02:16 PM

    It's my pleasure Ian! If you need our assistance again, please feel free to contact us at anytime.

    Have a nice day!