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

    I edited the class-form-generator.php file as others have, and still need some fine tuning.

    I am seeing this with the updated look.

    contact_form-1.jpg

    I need it to look like the version I created on the right, with all fields padded correctly for mobile & desktop.

    Here is the current desktop view.

    ScreenShot2012-11-24at25507PM.png

    Thanks!

    -Jimmy

    http://test.emoshun.com/contact

    #98336

    Hey!

    Add following code to css/custom.css:

    .ajax_form #element_avia_message{
    margin-top: 22px;
    }

    Regards,

    Peter

    #98337

    Hi Peter!

    It fixed some of the issue but not all.

    Here is all the custom CSS I have in the theme, wanted to post it here to see if there might be a conflict.

    h1.logo {

    padding-top: 0px;

    padding-bottom: 0px;

    }

    #main .main-title {

    display: none;

    }

    #main .container {

    padding-top: 10px;

    padding-bottom: 10px;

    }

    #footer #portfoliobox-3 .news-time {

    display: none;

    }

    #top.page-id-25 .post-entry-129,#top.page-id-25 .post-entry-130 {

    margin-top: 10px;

    }

    @media only screen and (min-width: 480px) and (max-width: 767px) {

    .site-phone-num {

    display: inline-block;

    position: relative;

    font-size: 1.04em;

    top: -115px;

    right: -103px;

    }

    }

    @media only screen and (max-width: 479px) {

    .site-phone-num {

    display: inline-block;

    position: relative;

    font-size: 1.1em;

    top: -125px;

    right: -25px;

    }

    }

    fieldset h3 {

    font-size: 1.15em;

    }

    .ajax_form .textare_label {

    top: -5px;

    left: 0%;

    margin-left: 0px;

    }

    .ajax_form p {

    padding: 0 0 5px 0;

    }

    .form-allowed-tags{

    display:none;}

    .ajax_form #element_avia_message{

    margin-top: 22px;

    }

    Let me know as it’s still appearing incorrectly.

    photo-14.png

    Thanks!

    -Jimmy

    #98338

    Updated Custom CSS to this. (adjusted padding)

    h1.logo {

    padding-top: 0px;

    padding-bottom: 0px;

    }

    #main .main-title {

    display: none;

    }

    #main .container {

    padding-top: 10px;

    padding-bottom: 10px;

    }

    #footer #portfoliobox-3 .news-time {

    display: none;

    }

    #top.page-id-25 .post-entry-129,#top.page-id-25 .post-entry-130 {

    margin-top: 10px;

    }

    @media only screen and (min-width: 480px) and (max-width: 767px) {

    .site-phone-num {

    display: inline-block;

    position: relative;

    font-size: 1.04em;

    top: -115px;

    right: -103px;

    }

    }

    @media only screen and (max-width: 479px) {

    .site-phone-num {

    display: inline-block;

    position: relative;

    font-size: 1.1em;

    top: -125px;

    right: -25px;

    }

    }

    fieldset h3 {

    font-size: 1.15em;

    }

    .ajax_form .textare_label {

    top: -25px;

    left: 0%;

    margin-left: 0px;

    }

    .ajax_form p {

    padding: 0 0 5px 0;

    }

    .form-allowed-tags{

    display:none;}

    .ajax_form #element_avia_message{

    margin-top: 30px;

    }

    I like the way that looks now all I need is help to move the drop down title over field, and the button issue.

    Thanks so much for your help!

    #98339

    Hi,

    Please make a backup and open up class-form-generator.php located in /framework/php/ directory and find lines 236-238 which look like

    $this->elements_html .= "<p class='".$p_class."' id='element_$id'>";
    $this->elements_html .= ' <select name="'.$id.'" class="select '.$element_class.'" id="'.$id.'">'.$select.'</select><label for="'.$id.'">'.$element['label'].$required.'</label>';
    $this->elements_html .= "</p>";

    and change them to look like

    $this->elements_html .= "<p class='".$p_class."' id='element_$id'>";
    $this->elements_html .= ' <label for="'.$id.'">'.$element['label'].$required.'</label><select name="'.$id.'" class="select '.$element_class.'" id="'.$id.'">'.$select.'</select>';
    $this->elements_html .= "</p>";

    You can also add this css to change the width of the select box to make it equal to the other fields

    select, .ajax_form .select, .entry-content select, .mobileMenu
    {
    min-width: 230px;
    }

    Thanks,

    Nick

    #98340

    For flexibility the business needed I had to go the route of check boxes. (Ability to select any/all number of features)

    checkboxes.jpg

    I need them to appear in that format (if possible), along with a description above them. (Why is there no option for a title for the check boxes?)

    It should also appear the same on desktop.

    Please let me know, thanks!

    #98341

    Hi emoshun,

    With that level of customization it would be a lot more beneficial to use something like Gravity Forms or on a basic level Contact Form 7.

    You’re expanding into the realm of complete customization of the class form which is a bit beyond the scope of what we are generally able to offer through support.

    Regards,

    Devin

    #98342

    Thanks, that’s what I figured with the customization.

    My only outstanding question is how can we get the submit button to appear normal on this form.

    Does the issue lie with the avia styling?

    Please let me know.

    Thanks!

    #98343

    I’m not sure why you are getting the different button style (from the screenshot). When I view your page and the demo as well, the correct avia button style with the square button is showing for me.

    Regards,

    Devin

    #98344

    This button issue is Mobile/Tablet only, thanks.

    #98345

    Again, I’m not sure why you are getting that view. On mobile and tablet view I’m getting the default square button.

    I don’t have an i-device to test on, but perhaps iOS interprets buttons differently and ignores the theme styling.

    Regards,

    Devin

    #98346

    Hi,

    For checkboxes you can try something like this. I only styled the 2 top boxes since I didn’t know if you want to go that route. That’s just for mobile screen,

    @media only screen and (max-width: 479px) {
    #element_avia_used_car_sales {
    top: -34px;
    right: -140px;
    }
    #element_avia_new_car_sales {
    top: 14px;
    }}

    and for the other screen sizes

    @media only screen and (min-width: 480px) {
    .ajax_form .input_checkbox {
    top: -13px;
    right: -20px;
    }
    #element_avia_used_car_sales {
    top: -15px;
    right: -140px;
    }
    .ajax_form .input_checkbox {
    top: -13px;
    right: -20px;
    }}


    As for the button … it look like something changed in the user agent stylesheet that is doing that i believe. Just to make sure, could you see if the button is same when viewed on Chrome browser on your iphone?

    Thanks,

    Nick

Viewing 12 posts - 1 through 12 (of 12 total)

The topic ‘Contact Page Mobile View & Contact Form Button Default’ is closed to new replies.