Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #1337764

    Hi,

    I got excellent help from Mike in my previous question (Popup window), that thread is closed for comments so I ask some following up questions here.

    In that question I was told to “add your forms you will create your forms with the shortcode wand in a Classic Editor”. I did this but need to add more elements in the form and can’t find all shortcodes to the form so I can make it as I want, For example, I want to add checkbox, select element, Google reCaptcha, and so on.

    It’s easy to use Enfold for creating the form but then I can’t see the code of the form that I need to paste in another place.

    Is it possible to find the code from a form done with Enfold or where can I find all shortcodes used in a form?

    Many thanks!

    #1337780

    Hi again,

    I did a test to install a form plugin called WPForm and used the shortcode from the plugin instead of the whole code for a “standard form”. But that seems to break something.

    With solution from Mike:
    form correct
    Withe same solution but using the shortcode to another form:
    form not correct

    I added the shortcode below where it says [wpforms id=”1061″]. The section under that is still as it was before with the “standard code” for a form.

    <script type="text/javascript">
    jQuery(window).load(function(){
    jQuery('.avia-button-wrap.form-popup a.avia-button').addClass('form-popup-link');
      jQuery('.form-popup-link').magnificPopup({
        type:'inline',
        midClick: true
      });
    });
    </script>
    <style>
    .form-popup {
      position: relative;
      background: #f8f8f8;
      padding: 20px;
      width: auto;
      max-width: 500px;
      margin: 20px auto;
    }
    </style>
    
    <div id="form-popup-one" class="form-popup mfp-hide">
    [wpforms id="1061"]
    </div>
    
    <div id="form-popup-two" class="form-popup mfp-hide">
    [av_contact title='Form2' button='Submit 2' on_send='' sent='Your message have been sent!' link='manually,http://' captcha='' captcha_theme='light' captcha_size='normal' captcha_score='0.5' email=' (Email address hidden if logged out) ' from_email='' subject='' autoresponder_email=' (Email address hidden if logged out) ' autoresponder_reply_to='' autoresponder_subject='' autorespond='' autorespond_after='' form_align='' color='' heading_tag='' heading_class='' alb_description='' id='' custom_class='' template_class='' aria_label='' av_uid='av-kyvmoki5' sc_version='1.0' admin_preview_bg='']
    [av_contact_field label='Namn' type='text' check='is_empty' options='' multi_select='' av_contact_preselect='' element_display='' width='' headline_tag='h3' av_uid='av-7o4nfk' sc_version='1.0'][/av_contact_field]
    [av_contact_field label='Email' type='text' check='is_email' options='' multi_select='' av_contact_preselect='' element_display='' width='' headline_tag='h3' av_uid='av-6k86gw' sc_version='1.0'][/av_contact_field]
    [av_contact_field label='Ämne' type='text' check='is_empty' options='' multi_select='' av_contact_preselect='' element_display='' width='' headline_tag='h3' av_uid='av-4fdjpc' sc_version='1.0'][/av_contact_field]
    [av_contact_field label='Meddelande' type='textarea' check='is_empty' options='' multi_select='' av_contact_preselect='' element_display='' width='' headline_tag='h3' av_uid='av-27sqzk' sc_version='1.0'][/av_contact_field]
    [/av_contact]
    </div>
    • This reply was modified 2 years, 9 months ago by Brolle.
    #1337958

    Hi,
    Thank you for your patience, when you use the shortcode wand in a Classic Editor you are given the same element builder as in the Advanced Layout Builder, I checked again to ensure nothing had changed, you can add checkbox, select element, Google reCaptcha, and so on.
    2022-01-30_014.jpg
    But there is another way to get your shortcodes: Enable the Avia Layout Builder Debugger
    with this method, you will be shown the full page of shortcodes so you will need to be careful when you copy, the shortcode wand method shows you just the element that you created in the builder.
    I also tested your wpform shortcode on the test page, by creating a third button & popup and it seems to work correctly:
    2022-01-30_015.jpg
    please check, from your screenshot of the form error it looked like css conflict which I thought could be solved, but since I don’t see the error all the better.

    Best regards,
    Mike

    #1338017

    Hi Mike,

    Thanks for checking in on this.👍

    Yes, that works for me also now, not sure what it could be. I did get the same fault the first test I did today after your answer but now it looks like it works, strange…
    I can make my form from the wand and I can add more entries and/or captcha for example. But is it possible to change the form after if I want to add or remove something after a while? I can see the code and can maybe figure out some parts but is it possible to edit this without editing the code? Edit like you do in the first step? Or do I need to make a new form with the wand to have my changes done?

    I have a question on one more part and that is about is the white area around the button, I can’t fill that with color. Please check my test page again, I have added colors in all places to see where/what to change but can’t figure out how to remove the white area around the button. I did change the padding: 20px in the code block to 0 but there was still a small white border around the button.

    Thanks!

    #1338046

    Hi,
    If you wish to charge the form after you have created it with the wand tool, I would recommend starting over.
    For the area around the button try adding this css:

    #main .avia-button-wrap.form-popup {
    	background: transparent;
    }

    After applying the css, please clear your browser cache and check.

    Best regards,
    Mike

    #1338182

    Hi Mike,

    Thanks! I added this in the code block and it seems to work fine 👍. Was it correct to add it in the code block?

    I have one more question and that is about my forms and the space between the sub-label and the field you write in. Right now I’m testing WPForm and it looks promising. I asked WPForm about the problem and they were helpful and answered fast “the spacing shouldn’t be that large so it’s likely coming from your theme styling maybe“. They also come up with some help to solve this: “To grab all WPForms labels, you would use this CSS

    div.wpforms-container-full .wpforms-form .wpforms-field-sublabel {
    margin: 0 !important;
    }

    They told me to add this here; Appearance » Customize » Additional CSS. But this didn’t help me, I still have the same problem.

    WPFormCSS

    Could there be anything else that is faulty, something we added here before? I added the same form on a page without the new code block and it didn’t help, still the same big space. See the private content box for the other page (without code block) with the form and still the same problem. It’s the form in the bottom.

    Thanks in advance!

    #1338230

    Hi,
    Thanks for the screenshot, try this css:

    #top #main [id^=wpforms-] {
    	margin-bottom: 0;
    }

    2022-02-01_001.jpg
    After applying the css, please clear your browser cache and check.

    Best regards,
    Mike

    #1338238

    Hi Mike,

    Thanks! I added the CSS code from you at Appearance » Customize » Additional CSS. That helped on the forms on the page but not on the forms with the popup window. They are still the same. Shouldn’t that CSS “reach” the popup forms also?

    Best regards,
    Robert

    #1338286

    I have added a short link for a form to the popup-test page so the form will be seen there together with the buttons for the popup.

    The form that you see there (without clicking the button) is fine and works well. The form that you see after clicking button 3 that is the same form and shortcode does not work with the “margin 0” code. Is there anything with the code for the popup that needs any changes?

    I also tried to add the CSS code in the code block but without luck.

    #1338342

    Hi,
    Thanks for the feedback, for the form inside the popup try this css:

    #top .mfp-content [id^=wpforms-] {
    	margin-bottom: 0;
    }

    After applying the css, please clear your browser cache and check.

    Best regards,
    Mike

    #1338400

    🙂 As usual… amazing support. Many Thanks!

    Best regards,
    Robert

    #1338462

    Hi,
    Glad we were able to help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

    Best regards,
    Mike

Viewing 12 posts - 1 through 12 (of 12 total)
  • The topic ‘Form short codes’ is closed to new replies.