Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • May 18, 2017 at 1:40 pm #795865
    Luca

    Hey Guys,

    I have a problem. I need to implement a speical code from my E-Mail service, but I want the form to look like the theme-avia-contact-form-thingy. So I set the css classes to the avia ones… but then, the button just begins the animation and the “post” process doesn’t work!

    Do you know how to fix this?

    <div id="form-78948-wrapper"><form class="avia_ajax_form av-form-labels-hidden" id="ktv2-form-78948" accept-charset="UTF-8" method="post" action="https://www.klick-tipp.com/api/subscriber/signin.html" ><input type="hidden" id="FormField_ApiKey" name="apikey" value="1tfnzik4z8z5475" />

<div class="ktv2-form-element">
<p class="first_form form_element form_element_third">
<input class="text_input" type="text" id="FormField_LastName" name="fields[fieldLastName]" value="" placeholder="Nachname"/>
</p>
</div>

<div class="ktv2-form-element">
<p class="form_element form_element_third">
<input class="text_input" type="text" id="FormField_EmailAddress" name="email" value="" size="40" placeholder="Ihre E-Mail Adresse*"/>
</p>
</div>

<div>
<p class="form_element form_element_third modified_width">
<input class="button" type="submit" id="FormSubmit" name="FormSubmit" value="weiter"/>
</p>
</div>

</form></div>

    The site:
    http://www.lythas.com/#webinar

    May 19, 2017 at 12:19 am #796245
    Jordan Shannon

    Hey lucaroehrl,

    Please disable all active plugins and re-test. If it works try and narrow down which plugin is the problem. Also be sure you are using the latest version of Enfold.

    Best regards,
    Jordan Shannon

    May 19, 2017 at 10:36 am #796462
    Luca

    It had no effect…
    But if i remove the class avia_ajax_form from the form, it looks horrible and works – is there any other class to theme it like that without breaking the form?

    May 19, 2017 at 4:51 pm #796662
    Jordan Shannon

    Hi,

    So the form functions when the styling classes are removed? That may be a function of the email service script. If the script responsible for submission and redirection looks for a specific class string then the added ones could possibly be causing a conflict.

    Best regards,
    Jordan Shannon

    May 20, 2017 at 2:05 pm #796997
    Luca

    There’s no other script involved, other than the code above.
    As I said, I need to add the class avia_ajax_form for the form to look like the one from enfold.
    I think there’s some code in the enfold theme that targets this class that is needed for the styling and prefents the default “onsubmit” event.

    So what I need is a way to restore the default onsubmit event from HTML.

    – OR –

    Another way to style the form like the default enfold-avia-form-thing…

    May 22, 2017 at 4:01 pm #797723
    Jordan Shannon

    Hi,

    How did you add the classes onto the form? You can add a class to the section you added your e-mail script to (code box or text box?), and then target and style the fields from there.

    Best regards,
    Jordan Shannon

    May 22, 2017 at 4:27 pm #797750
    Luca

    I put “avia_ajax_form” into the code right here <form class=”avia_ajax_form av-form-labels-hidden” id=”ktv2-f… so that the element looks like the form element from the avia builder.
    Like this:
    with avia code

    BUT THEN THE FORM DOESN’T WORK because it’s doing some wired ajax thing and not sending the form!

    If I remove the styling it works but looks like this:
    without avia code

    So, if I can’t use the avia class, whats the CSS code to theme my elements like the avia form.
    I haven’t found it in the enfold theme files yet…

    May 22, 2017 at 4:56 pm #797772
    Jordan Shannon

    Hi,

    You can use the browser element inspector to view the form styles. However, as I stated be sure to add a unique class to the element that your are adding your email script to. This is just to add a little insurance that it won’t conflict with the sending of the form.

    Best regards,
    Jordan Shannon

    May 22, 2017 at 5:09 pm #797785
    Luca

    Ok could you help me a little bit with my code?
    I just can’t find the right CSS in these hundreds of lines of code… heres mine:

    .klick-tipp input[type='text'] {
    border-color: #ebebeb;
    background-color: #f8f8f8;
    color: #919191;
    width: 100%;
    margin-bottom: 0;
    display: inline;
    min-width: 50px;
    padding: 13px !important;
    border-radius: 2px;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    font-weight: normal;
    font-size: 0.92em;
    min-width: 142px;
    outline: none;
}

.klick-tipp input[type='submit'] {
    background-color: #000000;
    color: #ffffff;
    border-color: #000000;
    margin: 0;
    padding: 16px 20px;
    border-radius: 2px;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    font-weight: normal;
    font-size: 0.92em;
    min-width: 142px;
    outline: none;
}

.klick-tipp input[type='submit']:hover {
    background-color: #9cc3df;
    color: #ffffff;
    border-color: #7aa1bd;
}

.klick-tipp .first_form {
    clear: both;
    margin-left: 0;
}

.klick-tipp .form_element_third {
    width: 32.6%;
    float: left;
}

    Looks like this:
    god damn ugly

    May 22, 2017 at 9:29 pm #797918
    Jordan Shannon

    Hi,

    Okay and if you need it to look like the first image you pasted above add this to the css:

    #FormField_EmailAddress.text_input {
margin:0 10px!important;
}

#FormSubmit.button{
margin:0 20px!important;
}

    Let me know if this works and then we can work on the responsive end.

    Best regards,
    Jordan Shannon

    May 22, 2017 at 10:17 pm #797938
    Luca

    Ok I’ve spent quite some time with the code and did some modifications…

    .klick-tipp input[type=text] {
    width: 100%;
    margin-bottom: 0;
    display: inline;
    min-width: 50px;
    padding: 13px !important;
    border-radius: 2px !important;
}

#top input[type="text"] {
    border-radius: 2px !important;
}

.klick-tipp .form_element_third {
    width: 32.6%;
    margin-left: 10px;
    float: left;
}

.klick-tipp .first_form {
    margin-left: 0;
}

    How do we make this bad boy responsive do you say?

    May 22, 2017 at 11:05 pm #797966
    Jordan Shannon

    Hi,

    Add this to the css:

    @media only screen and (min-width: 767px)  {
.klick-tipp .form_element_third{
width:100%!important;
margin-left:0px!important;
}
}

    This should adjust it so it looks good on mobile.

    Best regards,
    Jordan Shannon

    May 22, 2017 at 11:49 pm #797972
    Luca

    had to change it to “max-width: 1046px” and now it works PERFECT! :)
    Thank you Jordan!

    May 22, 2017 at 11:57 pm #797976
    Jordan Shannon

    Hi,

    No problem at all. If you need additional help, please let us know here in the forums.

    Best regards,
    Jordan Shannon

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