Form short codes

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:

Withe same solution but using the shortcode to another form:

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, 10 months ago by Brolle.

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!

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.

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!

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