Use form WordPress plug-in to 'Show-hide Collapse-expand'

  • kjfeilhof
    Asked on June 20, 2019 at 9:15 PM

    I would like to use my forms on my Wordpress site, using the below linked plug-in. 


    https://wordpress.org/plugins/show-hidecollapse-expand/


    We've tested the plug-in using a WP Form, but we prefer to use JotForms. Is it possible to mimic what I am doing here, but w/ a Jotform. I attached a screenshot to show the WP Forms ID we use to make it work. What would be the Jotform equivalent of what I'd enter in my builder? 





    Jotform Thread 1865123 Screenshot
  • Nik_C
    Replied on June 21, 2019 at 2:28 AM

    I'm not sure if that could work, but you can try following this guide: https://www.jotform.com/help/324-A-Guide-to-Embed-Forms-for-WordPress-Users

    Then please check if it is possible to somehow connect those two fields.

    If you're having any difficulties, please get back to us so we can check further.

    Thank you!


  • kjfeilhof
    Replied on June 21, 2019 at 11:54 AM

    We are using Beaver Builder. The Plug-in I referenced above is looking for our form ID in the fashion as shown here in this screenshot. Would you say that in order to make this work, we must have the JotForm plug-in running on our Wordpress? I tried entering that information from a test form in the screenshot field above, and it did not work. My assumption was that it was because we do not yet have the JotForm plug in on our website. 

  • Nik_C
    Replied on June 21, 2019 at 1:13 PM

    I'm not sure how that works honestly, is it possible you could insert iFrame embed code: https://www.jotform.com/help/148-Getting-the-Form-iFrame-Code

    That would avoid using JotForm plug-in.

    If that doesn't work, I can suggest using form collapse in our forms and avoid using that plug-in https://wordpress.org/plugins/show-hidecollapse-expand/

    You can find section collapse in the form builder in elements list on the left-hand side:

    1561137165Screen Shot 2019 06 21 at 7 Screenshot 10

    Let us know if that could work for you.

    Thank you!

  • kjfeilhof
    Replied on June 21, 2019 at 1:22 PM

    That may work...I'm going to play with that. I have another question for the same form I'm working on. Is there a way to hyperlink an image to call a phone number? 


    https://form.jotform.com/91697484284170

  • Nik_C
    Replied on June 21, 2019 at 2:43 PM

    Yes, there is a way.

    Here is how:

    1) Use Text field instead of Image field:

    1561142500Screen Shot 2019 06 21 at 8 Screenshot 10

    2) Go to its source code:

    1561142529Screen Shot 2019 06 21 at 8 Screenshot 21

    3) Insert this code:

    <p><a href="tel:6024182589"><img src="https://www.jotform.com/uploads/kjfeilhof/form_files/Screen%20Shot%202019-06-19%20at%203.09.17%20PM.5d0cffa6d1eb67.41374605.png" alt="image2" width="150" height="150" /> </a></p>

    Where bolded part is number that will be called on click.

    You can check my test form as well: https://www.jotform.com/91715745303961

    Let us know if that works for you.

    Thank you!

  • kjfeilhof
    Replied on June 21, 2019 at 7:09 PM

    Yes!! That is PERFECT w/ image linked to tele!! Omg! I'm working on the builder/embed/plugin situation to get the form live on my page. Fixing this though helps cinch JF > WPForms

  • kjfeilhof
    Replied on June 21, 2019 at 7:17 PM

    Could you share me a live version of the form on which you made that change to turn tele number into a text w/link? 

  • kjfeilhof
    Replied on June 21, 2019 at 7:36 PM

    Never mind my last request. I was able to achieve the button based on your instructions!! Woo hoo! 

  • kjfeilhof
    Replied on June 21, 2019 at 7:44 PM

    I do have one other ask though....is it possible to have a 3rd object look like the below, but then have a condition which unhides the rest of my form when clicked?

     1561160364Screen Shot 2019 06 19 at 3 Screenshot 10

    Meaning....when someone clicks a button like the one below which says, "Get Started Online"...my form is revealed, with ONLY the 3 objects at top. TELL US reveals the form, CALL US calls as we've set, and FIND US links to store locator. Right now the only thing keeping me from perfection is the TELL US object which can be conditioned to reveal the rest of the form. PLEASE HELP!! :) Section collapse does not work...because we don't like the way the bar looks. I want something that looks like the mocked up TELL US button I have, to be what reveals the rest of my form. :) 

    1561160675Screen Shot 2019 06 21 at 4 Screenshot 21

  • kjfeilhof
    Replied on June 21, 2019 at 8:00 PM

    Additionally, how can I get the objects to sit closer together on screen? Ideally they would sit side by side on any screen device size. 

  • kjfeilhof
    Replied on June 21, 2019 at 8:22 PM

    Lastly...the image I've hyperlinked in my text box for FIND US, is not working...

  • Nik_C
    Replied on June 22, 2019 at 4:50 AM

    TELL US reveals the form, CALL US calls as we've set, and FIND US links to store locator. Right now the only thing keeping me from perfection is the TELL US object which can be conditioned to reveal the rest of the form. PLEASE HELP!! :) Section collapse does not work...because we don't like the way the bar looks. I want something that looks like the mocked up TELL US button I have, to be what reveals the rest of my form. :) 

    That is a problem since you cannot create such behavior in form, but I have a few suggestions, first, if it is possible, to create these fields:

    1561192270Screen Shot 2019 06 22 at 10 Screenshot 10

    Outside of the form, so to create them in a website, since it would be possible there to create logic to show the whole form on click (that would be done with JavaScript).

    Another way is to insert Image Checkbox widget:

    1561193169Screen Shot 2019 06 22 at 10 Screenshot 21

    Insert the image there:

    1561193184Screen Shot 2019 06 22 at 10 Screenshot 32

    And by using condition, show the rest of the form:

    1561193224Screen Shot 2019 06 22 at 10 Screenshot 43

    You can check how it works here: https://form.jotform.com/91721749146967

    You can clone it if you wish: https://www.jotform.com/help/42-How-to-Clone-an-Existing-Form-from-a-URL

    Also, what you would like to do with Find Us? What you would like to link?


  • kjfeilhof
    Replied on June 24, 2019 at 12:33 PM

    I like that idea! You know, originally I was going to use Image Radio Buttons, but I got stuck on these two things: 

    1. I could not figure out how to make the radio button for "CALL US" 

    a. Dial the number

    2. Hyperlink the "FIND US" radio to just go to the locator page and end the form. 

    Can you clear those two hurdles to make this solution work? Are the above achievable? 

    -----

    On the checkmark path, is there a widget like that one which allows my image to sit more idly and not look like a checkbox option? Make it "look like" it is just sitting next to the other two options on the row?  

  • roneet
    Replied on June 24, 2019 at 2:21 PM

    In that case, you may check out my colleague's Form where he has used two text elements to create the hyperlink and another Image radio button to hide/show the rest of the Form fields.

    Use form WordPress plug in to Show hide Collapse expand Image 10

    Here, the first two are the text elements and the third one is the image radio button which when clicked shows the rest of the Forms.

    If you want then we can remove the border and the orange dot from the radio button option.

    Here is my colleague's Form:

    https://form.jotform.com/91721749146967

    Let us know if you have further questions.

    Thanks.

  • kjfeilhof
    Replied on June 24, 2019 at 2:27 PM

    WOW! That is amazing! 

    Yes, if you could remove the border and the orange dot that would make this about perfect! 

    Can you check the hyperlink in text element for FIND US? It doesn't seem to be working. It should go to: https://www.hallofframes.com/blog/store-locator/

    Oh wow! W/ this....the form is now perfect. Now back to embedding into my site. However, w/ the form perfected, we should be clear to just use the JotForm plugin. 

    Appreciate your help very much. Are you able to share me the form w/ your test? I have several other pages to make unique clones for. 


  • roneet
    Replied on June 24, 2019 at 2:36 PM

    I have injected the following code in the widget to make it look appear like the text element next to it in my colleague's code:

    .default {
     width: 150px;
     height: 132px;
    }
    li img {
    border: 0px;
    border-radius: 0px;
    }
    .theme-orange .radio {
    background: none !important;
    }

    Use form WordPress plug in to Show hide Collapse expand Image 10

    Let me check your Form now. I'll get back to you.

    Thanks.

  • kjfeilhof
    Replied on June 24, 2019 at 2:42 PM

    That looks great!! Is it just uneven from the other two (a little higher) because of image sizing? Or is that fixable w/ CSS also? This is so great!

  • roneet
    Replied on June 24, 2019 at 2:57 PM

    Were you referring to this Form?

    The clickable link is working now in this Form.

    Also, I have fixed the uneven heights in my colleague's Form by injecting the following CSS codes in the Form:


    .default,.active {
     width: 150px;
     height: 132px;
    }

    .active {
    border: 0px;
    border-radius: 0px;
    }
    .theme-orange, .radio,.active {
    background: none !important;
    }
    .default,.active {
     position: relative;
     left: -15px;
    bottom: -7px;
    }

    Let us know if you need further assistance.

    Thanks.

  • kjfeilhof
    Replied on June 24, 2019 at 3:07 PM

    I would like to clone your colleague's form. The one you just injected the CSS to. How may I access this form in my back end? 

    https://form.jotform.com/91721749146967


    The one you referred to above....yes, that was where I began w/ all of this. I want to make sure I'm picking up w/ working on the form as you have it in above link. THIS FORM: https://form.jotform.com/91721749146967


    Thanks so much, looks great straightened out! :)

  • roneet
    Replied on June 24, 2019 at 3:23 PM

    You may go ahead and clone this Form using its URL in your account.

    Guide: https://www.jotform.com/help/42-How-to-Clone-an-Existing-Form-from-a-URL

    Let us know if you have further questions.

    Thanks.