Tagged: 

Viewing 16 posts - 1 through 16 (of 16 total)
  • Author
    Posts
  • June 10, 2019 at 10:05 am #1108778
    Ryuichiro

    I created a basic contact form using WPForms – however, the appearance is different from what I see in the edit window of WPForms and the actual page of the form.

    Differences are :
    – Font size and style
    – Asterisk color
    – There should be no space between boxes and label text

    How it appears in the edit window of WPForms
    https://www.mocosbikehire.jp/wp-content/uploads/2019/06/スクリーンショット-2019-06-10-16.48.45.png

    How it appears
    https://www.mocosbikehire.jp/wp-content/uploads/2019/06/スクリーンショット-2019-06-10-17.01.39.png

    What can I do to display the form as it appears in the edit window?

    June 11, 2019 at 4:26 am #1108982
    Rikard

    Hey Ryuichiro,

    Thanks for the screenshots, could you post a link to where we can see the actual form as well please?

    Best regards,
    Rikard

    June 13, 2019 at 2:01 am #1109635
    Ryuichiro

    Hi Rikard

    I sent you the links via private content box – can you please confirm if you received it because I am unable to confirm from my side.
    Thanks a lot!

    Ryuichiro

    June 13, 2019 at 7:36 am #1109769
    Rikard

    Hi Ryuichiro,

    I can’t see anything in private unfortunately, could you try sending them again please?

    Best regards,
    Rikard

    June 13, 2019 at 2:12 pm #1109865
    Ryuichiro
    This reply has been marked as private.
    June 13, 2019 at 8:36 pm #1110068
    Victoria

    Hi Ryuichiro,

    We cannot see the form, can you please share credentials with us in private?

    Best regards,
    Victoria

    June 14, 2019 at 1:53 am #1110152
    Ryuichiro

    Hi Victoria

    Credentials in private content.

    Ryuichiro

    June 14, 2019 at 8:04 am #1110235
    Rikard

    Hi,

    Thanks for that. Please try this in Quick CSS to remove the background colour of the input elements:

    .wpforms-container input {
  background-color:transparent;
}

    Let us know if you want to change something else.

    Best regards,
    Rikard

    June 14, 2019 at 11:29 am #1110279
    Ryuichiro

    Rikard

    I added the Quick CSS but there was no change.
    In fact, it is not the background color but the appearance – I will copy the original question sent :

    I created a basic contact form using WPForms – however, the appearance is different from what I see in the edit window of WPForms and the actual page of the form.

    Differences are :
    – Font size and style
    – Asterisk color
    – There should be no space between boxes and label text

    How it appears in the edit window of WPForms
    https://www.mocosbikehire.jp/wp-content/uploads/2019/06/スクリーンショット-2019-06-10-16.48.45.png

    How it appears
    https://www.mocosbikehire.jp/wp-content/uploads/2019/06/スクリーンショット-2019-06-10-17.01.39.png

    What can I do to display the form as it appears in the edit window?

    June 20, 2019 at 3:30 pm #1111967
    Victoria

    Hi Ryuichiro,

    Well, the how it appears screenshot looks better and more uniform than the other one. The spacing is much better and the countries dropdown looks much better.

    Do you want the asterisks in red?

    Best regards,
    Victoria

    June 21, 2019 at 12:49 pm #1112316
    Ryuichiro

    Victoria

    Thank you for reviewing the screen shots.
    However, if you can look closely and compare between the 2 screenshots, there is too much space between the box and label text below the box.
    For example, I prefer to have
    – more space between “NAME*” and the box
    – less space between the box and “First”
    Same for all the other boxes.

    Ryuichiro

    June 21, 2019 at 9:39 pm #1112434
    Victoria

    Hi Ryuichiro,

    Thank you for clarifying. I see it now, but I cannot login anymore. Can you please update the login token?

    Best regards,
    Victoria

    June 22, 2019 at 1:02 am #1112470
    Ryuichiro

    VIctoria

    So sorry.
    I extended the login for one week.

    Ryuichiro

    June 22, 2019 at 9:51 am #1112542
    Victoria

    Hi Ryuichiro,

    Here is the code you can put in Enfold > General Styling > Quick Css,  if it does not work, put into themes/enfold/css/custom.css

    
#top .wpforms-field-container input[type="text"] {
  margin-bottom: 0px;
}

    If you need further assistance please let us know.

    Best regards,
    Victoria

    June 22, 2019 at 3:01 pm #1112574
    Ryuichiro

    Victoria

    Thank you very much. The Quick CSS code worked except for the text ‘Country’ – how can I fix this?

    Can you please also advise the Quick CSS code for :
    1) changing the text right above the box into bold text;
    2) increasing the space between the text right above the box

    Thanks.

    Ryuichiro

    June 22, 2019 at 9:21 pm #1112629
    Victoria

    Hi Ryuichiro,

    Here is the code you can put in Enfold > General Styling > Quick Css,  if it does not work, put into themes/enfold/css/custom.css

    
#top label.wpforms-field-label {
    font-size: 1.2em;
    margin-bottom: 10px;
}

    If you need further assistance please let us know.

    Best regards,
    Victoria

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