How to change Contact Form width in Adobe Muse?

  • excelenglish
    Asked on March 3, 2015 at 7:48 AM

    Hi guys,

    I have been using JotForm for many years and I have always found something that really drives me crazy (I'm not a coder, just a designer).

    Please check this site I'm making  

    excel-english.org

     

    Please go to contact. You will see that the contact page is too large, and that's because I added the jotform form. 

    The form made the box huge. However, in the Adobe Muse looks nice.

    Is there any way I can adjust the form, so when I copy the code to Muse can look well?

     

    Many thanks!!!  :)

     

    vic

    Jotform Thread 525896 Screenshot
  • Ben
    Replied on March 3, 2015 at 9:55 AM

    I took a look at the jotform Vic and I see that you are using source code implementation.

    The reason why this happens is that the form element is not as wide, but your jotform width was set to a much larger size.

    You can however resolve this easily by adding this style to your page (not to jotform styles):

    <style type="text/css>
    div.form-all {
        width: 280px;
    }
    </style>

    It will make the 'inner form' get less width and should look better on your website.

    Do let us know how it goes.

  • excelenglish
    Replied on March 3, 2015 at 8:30 PM

    Hi Ben,

    I just noticed something.

    If I edit the form in the Designer mode, the form will completely change. I mean, it will make this form change the size or space that I showed to you guys.

    But if I don't use the Designer mode, just make the form in the main edit window, and change some options in the form preferences window, the form will be great.

    This happens every time

  • Elton Support Team Lead
    Replied on March 4, 2015 at 12:41 AM

    @excelenglish

    Yes, that's is how the Form Designer works. Once you load the form into the Designer for the first time, a set of CSS codes will be automatically added to your form which includes new spacing around the form as well as the form styles. However, you can customize this spacing and styles in the designer with ease using the style toolbar in the right panel as well as by injecting custom CSS codes in the CSS tab.

    Thanks!