CSS or HTML to have form float on page

  • Profile Image
    John Penate 
    Asked on July 31, 2021 at 02:03 PM

    Hello.

    I am trying to get my form to float as in this example:

    https://www.livitaly.com/tour/colosseum-underground-ancient-rome-tour/

    I use weebly to create my website and html code would be best to implement. I can also customize the CSS if I have to.

    My website still under construction: https://www.hopnvinetours.com/taco-tour-of-tijuana.html

    Thank you.

  • Profile Image
    Amin_N
    Answered on August 01, 2021 at 06:17 AM

    Hi there,

    Thanks for reaching out to us!

    Kindly note that this is not a feature provided by JotForm by default. You may hire a dedicated developer for such a task providing you with the correct code to inject into your website.

    The closest thing that JotForm provides is the Floating Feedback Button for Card Forms as shown below.

    1627812396_6106722c4d33f_

    Related guide: How-to-create-a-jotform-card

    Should you have any further inquiries, we will be more than happy to help.

  • Profile Image
    hopnvinetours
    Answered on August 02, 2021 at 02:00 PM

    That is what I am using at the moment. .. the feedback code you provide.
    The main issue I am having is that your code seems to block the ability to use the menu on mobile devices.

    This is what I am trying to fix.

  • Profile Image
    Lars_L
    Answered on August 02, 2021 at 07:59 PM

    Hello,

    Thanks for clarifying the situation. I tested this and experience the same. On the page where the form is present, I am unable to open the top menu. Meanwhile on any other page on the website, I am able to open the menu.

    I'm currently researching this to see what causes this change in behavior.

    Thank you for your patience.

    Best regards,

    Lars

  • Profile Image
    Lars_L
    Answered on August 02, 2021 at 09:03 PM

    Hello again,

    The JavaScript that loads the form might be adding something that conflicts with the JavaScript on your page.

    There's a different version we can try, to see if there's a change in the behavior of the page.

    I prepared this code below for you to try, the only change is in which JavaScript is being used, "feedback.js" instead of "feedback2.js".

     <script src="https://form.jotform.com/static/feedback.js" type="text/javascript"> new JotformFeedback({ formId: "212105636308044", buttonText: "BOOK YOUR TOUR", base: "https://form.jotform.com/", background: "#F59202", fontColor: "#000000", buttonSide: "right", buttonAlign: "center", type: 0, width: 700, height: 500, isCardForm: false }); </script>


    If you're able to try this code, please let us know if it changes anything.

    There's a small risk that the form won't look exactly the same, but if that's the case, we will help you adjust that with some additional CSS.

    Best regards,

    Lars

  • Profile Image
    hopnvinetours
    Answered on August 03, 2021 at 01:08 PM

    Lars,


    Wonderful!!

    I tried it and it worked!!

    Thank you very much!

  • Profile Image
    Vanessa_T
    Answered on August 04, 2021 at 01:12 AM

    Unfortunately, there is only minimal customizations available for the feedback button:

    1628053834_610a214ac9f82_05062.jpg

    If you wish to further customize it, you will need to coordinate with a web developer to make the changes within your website.