Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • December 19, 2016 at 10:32 am #725973
    sberendss

    I use a codeblock to publish a login form which sends the login credentials to an external location. It work fine with some flat html (see example below), but I want to have a ‘one rule design’ with two text fields and the submit button all filling 33%. I tried it with the second code below, but this form doesn’t submit the credentials to the external location.
    Can anyone help me with ‘merging’ the right design and the functionality?

    Form works, but not the right design:

    <form name="webshopform" method="post" action="http://URL/login.php">
<div>Gebruikersnaam:</div><div><input type="text" name="gebruikersnaam" value=""></div>
<div>Wachtwoord:</div><div><input type="password" name="wachtwoord" value=""></div>
<div><input type="submit" value="login"></div>
</form>

    The right design, but form doesn’t work:

    <form  name="webshopform" method="post" action="http://URL/login.php" class="avia_ajax_form av-form-labels-hidden   avia-builder-el-7  el_after_av_heading  avia-builder-el-last">
<fieldset>
<p class=" first_form  form_element form_element_third" id="gebruikersnaam"> <input name="gebruikersnaam" class="text_input is_empty" type="text" id="gebruikersnaam" value="" placeholder="Gebruikersnaam*"></p>
<p class=" form_element form_element_third av-last-visible-form-element" id="wachtwoord"> <input name="wachtwoord" class="text_input is_empty" type="password" id="wachtwoord" value="" placeholder="Wachtwoord*"></p>
<p class="hidden"><input type="text" name="avia_3_1" class="hidden " id="avia_3_1" value=""></p>
<p class="form_element form_element_third modified_width"><input type="hidden" value="1" name="avia_generated_form1">
<input type="submit" value="Login" class="button" data-sending-label="Login"></p>
</fieldset>
</form>
    December 20, 2016 at 6:02 am #726411
    Rikard

    Hey sberendss,

    Could you post a link to the site in question so that we can take a closer look please? Also if you have a screenshot highlighting the changes you would like to make it easier for us to understand what you are looking to achieve.

    Best regards,
    Rikard

    December 20, 2016 at 9:32 am #726482
    sberendss

    Thanks Rikard for the quick reply. I added the URL (development) and login credentials in the private content.
    Sytse

    December 23, 2016 at 3:51 am #727785
    Ismael

    Hi,

    Thank you for the info. Please try to remove the hidden input fields.

    <input type="hidden" value="1" name="avia_generated_form1">

    Best regards,
    Ismael

    December 23, 2016 at 12:48 pm #727905
    sberendss

    Thanks Ismael for the reply, but unfortunately it doesn’t change the result: Design is still right, but the form doesn’t send the data.
    Do you have any other ideas?

    Sytse

    December 28, 2016 at 9:45 am #728348
    Nikko

    Hi,

    I checked your site and it can’t be reached. Try using this code for the form:

    <form  name="webshopform" method="post" action="http://URL/login.php" class="avia_ajax_form av-form-labels-hidden avia-builder-el-7  el_after_av_heading  avia-builder-el-last">
<fieldset>
<p class=" first_form  form_element form_element_third" id="gebruikersnaam"><input name="gebruikersnaam" class="text_input is_empty" type="text" id="gebruikersnaam" value="" placeholder="Gebruikersnaam*"></p>
<p class=" form_element form_element_third av-last-visible-form-element" id="wachtwoord"> <input name="wachtwoord" class="text_input is_empty" type="password" id="wachtwoord" value="" placeholder="Wachtwoord*"></p>
<p class="form_element form_element_third modified_width"><input type="submit" value="Login" class="button" data-sending-label="Login"></p>
</fieldset>
</form>

    Let us know if this helps. :)

    Best regards,
    Nikko

    January 2, 2017 at 9:39 am #728445
    sberendss

    Nikko, thanks for the suggested code. The design looks rigt, but unfortunately, after hitting the send button, it doesn’t work.
    I hope you have any other suggestions, otherwise I think I need to use the plain html and give the fields a set width.

    Sytse

    January 2, 2017 at 11:25 am #728459
    Nikko

    Hi,

    You’re very much welcome :) I created a new page with the form I have modified, can you test it and check if it works? if it doesn’t work can you give us a test account that we can test with the form so we can make changes on the form code then verify if it works or not.

    Best regards,
    Nikko

    January 2, 2017 at 11:32 am #728461
    sberendss

    Thanks again for the quick response.
    Unfortunately it doesn’t work. Very strange.
    I’ll put the ‘test instructions’ in the private data.

    Sytse

    January 2, 2017 at 2:53 pm #728610
    Nikko

    Hi,

    I have modified the code in Form Test 2 page to this one:

    <form  name="webshopform" method="post" action="http://URL/login.php" class="custom-login-form av-form-labels-hidden avia-builder-el-7  el_after_av_heading  avia-builder-el-last">
<fieldset>
<p class=" first_form  form_element form_element_third" id="gebruikersnaam"><input name="gebruikersnaam" class="text_input is_empty" type="text" id="gebruikersnaam" value="" placeholder="Gebruikersnaam*"></p>
<p class=" form_element form_element_third av-last-visible-form-element" id="wachtwoord"> <input name="wachtwoord" class="text_input is_empty" type="password" id="wachtwoord" value="" placeholder="Wachtwoord*"></p>
<p class="form_element form_element_third modified_width"><input type="submit" value="Login" class="button" data-sending-label="Login"></p>
</fieldset>
</form>

    And added this css code in Quick CSS (located in Enfold > General Styling):

    .custom-login-form .form_element_third {
    width: 32.6%;
    float: left;
    margin-left: 1%;
    clear: none;
}

.custom-login-form .first_form {
    clear: both;
    margin-left: 0;
}

.custom-login-form.av-form-labels-hidden p {
    margin-top: 8px;
    margin-bottom: 8px;
}

#top .custom-login-form .text_input, 
#top .custom-login-form .select, 
#top .custom-login-form .text_area {
    width: 100%;
    margin-bottom: 0;
    display: inline;
    min-width: 50px;
    padding: 13px;
    border-radius: 2px;
}

.custom-login-form .button {
    margin: 0;
    border-radius: 2px;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    font-weight: normal;
    font-size: 0.92em;
    min-width: 142px;
    outline: none;
}

.custom-login-form p input, 
.custom-login-form p textarea, 
.custom-login-form p select, 
.custom-login-form p .input_checkbox_label {
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

@media only screen and (max-width:479px) {
  .responsive .custom-login-form .form_element {
    width: 100%;
    clear: both;
    margin-right: 0;
    margin-left: 0;
    float: none;
  }
}

    It should get the right design and works properly. Let us know if it’s also good on your end :)

    Best regards,
    Nikko

    January 2, 2017 at 2:59 pm #728617
    sberendss

    Nikko, you’re the hero! It looks and works perfect now. Thank you!

    Sytse

    January 3, 2017 at 4:17 am #728822
    Rikard

    Hi,

    Great, glad we could help :-)

    Please let us know if you should need any further help on the topic.

    Best regards,
    Rikard

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