Tagged: 

Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • March 28, 2016 at 10:28 pm #604120
    flyworxatl

    Hello,

    I am trying to create a custom button in the enfold theme to be able to lunch a type form pop-up. Type form provides a button through an embed code but it does not match our design. In the above the fold section on our home page (http://www.flyworxinspections.com), you will see a transparent button i have created called “typeform” and want to use to lunch a typeform popup and below it you will see type form generated button. How do i tie those together?

    Any suggestions?

    Thank You
    Roman

    March 29, 2016 at 6:12 am #604260
    Ismael

    Hi flyworxatl!

    Thank you for using Enfold.

    How does the typeform pop up works? Does it require a custom css class attribute? If it requires a custom css class attribute, turn on the custom css field of the theme: http://kriesi.at/documentation/enfold/turn-on-custom-css-field-for-all-alb-elements/

    Please ask the plugin author for the popup requirement.

    Cheers!
    Ismael

    March 29, 2016 at 5:13 pm #604691
    flyworxatl

    Ismael,

    They provide a popup button code, see below. Not sure if it requires css class attributes..

    Click for Typeform
    <script>(function(){var qs,js,q,s,d=document,gi=d.getElementById,ce=d.createElement,gt=d.getElementsByTagName,id=’typef_orm’,b=’https://s3-eu-west-1.amazonaws.com/share.typeform.com/&#8217;;if(!gi.call(d,id)){js=ce.call(d,’script’);js.id=id;js.src=b+’share.js’;q=gt.call(d,’script’)[0];q.parentNode.insertBefore(js,q)}id=id+’_’;if(!gi.call(d,id)){qs=ce.call(d,’link’);qs.rel=’stylesheet’;qs.id=id;qs.href=b+’share-button.css’;s=gt.call(d,’head’)[0];s.appendChild(qs,s)}})()</script>

    Doe this help to answer question?

    Thanks

    March 29, 2016 at 6:38 pm #604744
    flyworxatl

    How do i attached typrform custom script (above) to lunch from a regular button?

    Thank You

    March 30, 2016 at 2:36 pm #605190
    Josue

    Hey!

    Try using a Code Block element.

    Best regards,
    Josue

    March 30, 2016 at 5:03 pm #605286
    flyworxatl

    Thank you Josue. When i create code block, it just imbeds the form.

    March 31, 2016 at 12:01 am #605559
    Josue

    Ok let’s try something different. Place an Enfold button and set the link to Manually and put this:

    https://flyworx.typeform.com/to/m6eicf?iframe=true

    Regards,
    Josue

    March 31, 2016 at 12:25 am #605563
    flyworxatl

    Jose, worked like a charm!!! Thank You!

    March 31, 2016 at 12:38 am #605567
    Josue

    You are welcome, glad to help :)

    Regards,
    Josue

    March 31, 2016 at 12:52 am #605572
    flyworxatl

    Josue, actually, I just checked it on my iPhone and it does not open up :(. Pop up works but it shows a small symbol instructing you to turn phone horizontally but it still won’t show the form… is it due to iframe…?

    Any other suggestions to make it work on mobile?

    Thank You!!

    March 31, 2016 at 1:15 am #605578
    Josue

    Could be, i think it would be better to have the form open in a new tab instead of lightbox in mobile, you can achieve this by having to buttons, one linking to the iframe enabled URL (iframe?true) and the other without.

    Then with CSS you could control which one shows depending on screen size:

    .only-mobile{
	display: block !important;
}
.only-desktop{
	display: none !important;
}
@media only screen and (min-width: 767px) {
	.only-mobile{ 
		display: none !important;
	}
	.only-desktop{
		display: block !important;
	}
}

    Regards,
    Josue

    December 11, 2016 at 1:15 pm #722829
    therobdiaz

    Hi there,

    I’m having this exact problem right now (the second half), but where should I add that custom CSS code from Josue?

    Thanks a lot.

    December 12, 2016 at 9:17 am #723016
    Rikard

    Hi,

    Please try it in Quick CSS under Enfold->General Styling.

    Best regards,
    Rikard

    December 12, 2016 at 5:21 pm #723238
    therobdiaz

    Hi Rikard,

    Thanks for your quick response. It works!

    I will point out for future reference the following from another post:

    Turn on custom CSS field for ALB elements ( http://kriesi.at/documentation/enfold/turn-on-custom-css-field-for-all-alb-elements/ ) and give elements you would like to hide on mobile a custom CSS class (i.e.: only-desktop )

    That’s why it didn’t work before.

    Thanks!

    December 13, 2016 at 8:35 am #723583
    Rikard

    Hi @therobdiaz,

    Great, glad you got it working and thanks for sharing the documentation link :-)

    Best regards,
    Rikard

  • Author
    Posts
Viewing 15 posts - 1 through 15 (of 15 total)
  • You must be logged in to reply to this topic.